[WG: Accessibility] putting logout under menu, safe to do from accessibility standpoint?

[Eli Cochran]

Hi Keli,
I sent a response to the list, but I used the wrong email so it bounced. 

Here was my take on it:

I think that it's fine as long as you don't use display:none; instead put the menu offscreen until a mouse/keyboard/sighted user clicks on or puts focus on the menu. That way a screen reader will still read out the link for the Logout. 

Unfortunately, display:none hides the content from a screen reader until it is displayed. Most of the time for screen readers you want all the content available all the time. 

In place of style="display:none" use something like class="visuallyhidden"

with offscreen looking like:

.visuallyhidden { 
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

Mary is right though. You should still test with a screenreader. 

Enjoy,
Eli 

On Apr 4, 2013, at 1:42 PM, Mary Stores <mstores at indiana.edu> wrote:

> Hi,
> 
> Is there any way we could test this with screen readers, perhaps on a 
> nightly server?
> 
> I have to say that I would recommend not implementing this change if we 
> are using Google and Facebook as a comparison for accessibility. With 
> Google the only way to log out of gmail using JAWS is to switch to 
> basic mode (what they recommend for screen reader users) and find the 
> link. When you are in the basic mode in gmail, you have to fill in the 
> entire email address yourself, but when you are in the normal mode, the 
> email addresses are auto-completed once you start typing. Plus the 
> layout changes depending on which mode you are using. So I try and 
> avoid Google myself, because it's a pain to switch between the two 
> modes.
> 
> Using Facebook to log out, a screen reader has to activate the Account 
> Settings ARIA menu. Then they have to activate the Logout ARIA menu. 
> Finally, they can then find the Logout button. I personally don't 
> believe it should ever have to be that difficult to log out of a web 
> site. Most people I know who are blind still use the mobile Facebook 
> site for reasons like that.
> 
> But perhaps with the right coding, logging out of Sakai won't be 
> impossible to too difficult with this change. I'm willing to give it a 
> try.
> 
> Mary
> 
> Quoting Keli Sato Amann <kamann at stanford.edu>:
> 
>> Hello
>> In 2.9 there is now a menu that pops up if you click a little person
>> icon next to logout. Since we have added the user's name to the top
>> right of the header, we are thinking about putting the logout link
>> into a popup and having the user click their name to bring that popup
>> up. This is roughly what it would look like, except I would hope to
>> replace the person cartoon with a down triangle to indicate submenu,
>> among other additional tweaks like getting the name to right align
>> and not wrap no matter how long it is, and narrowing the width. (We
>> don't use Profile here, but it would go here too if we did).
>> 
>> 
>> 
>> 
>> 
>> I think that enough people are used to the convention of needing to
>> click a button to reveal the logout, due to Google and Facebook.
>> However, I don't know enough about css and accessibility to know if
>> these companies did something special to insure that non-sighted
>> users can find the logout. This popup originally contained shortcuts
>> that already had alternate, direct links on the page--profile,
>> preferences, for instance, so I'm not sure if it complies with
>> standards. (In fact, after a recent change to how we handle sso, the
>> only way to truly logout from our campus instance is to quit the
>> browser and on some public computers, completely logout of the
>> machine, so clicking the link is now not that important. This is
>> another reason why we have deemed it important to add the user's name
>> to the header--in addition to some personalization, if someone comes
>> to our instance on another user's computer, we want them to know if
>> they are logged in as someone else.)
>> 
>> Any thoughts?
>> 
>> 
>> Keli Amann
>> User Experience Specialist
>> Academic Computing Services, Stanford University
>> 
>> 
>> Here's the code
>> 
>> <div id="mastLogin">
>> <div id="loginLinks">
>> <span class="topnav">
>> <span class="nav-menu" aria-haspopup="true">
>> <ul class="nav-submenu subnav" role="menu" style="display: none;">
>> <li class="submenuitem"><span><a role="menuitem"
>> href="http://nightly2.sakaiproject.org:8087/portal/site/%7Ekamann/page/f80210b0-f2d0-4aa2-adfc-86b25ab082bb?sakai_nav_minimized=true"
>> class="submenuitem-prefs">Preferences</a></span></li>
>> <li class="submenuitem"><span><a id="tutorialLink" role="menuitem"
>> href="#" onclick="startTutorial({});"
>> class="submenuitem-tutorial">Tutorial</a></span></li>
>> <li class="submenuitem lastMenuItem"><span><a id="loginuser"
>> role="menuitem"
>> href="http://nightly2.sakaiproject.org:8087/portal/logout"
>> title="Logout">Logout</a></span></li>
>> 
>> </ul>
>> 
>> 
>> <span align="right" class="drop" tabindex="-1">Keli Amann</span>
>> </span>
>> </span>
>> !- <a href="http://nightly2.sakaiproject.org:8087/portal/logout"
>> title="Logout" id="loginLink1">Logout</a>--!
>> </div>
>> </div>
>> #mastLogin span.drop {
>> cursor: pointer;
>> background: transparent url(/library/image/silk/user.png) 0 0 no-repeat;
>> background-position-x: right;
>> margin: 0 10px 0 10px;
>> padding-right: 15px;
>> width: 100px;
>> height: 20px;
>> }
> 
> 
> 
> _______________________________________________
> accessibility mailing list
> accessibility at collab.sakaiproject.org
> http://collab.sakaiproject.org/mailman/listinfo/accessibility
> 
> TO UNSUBSCRIBE: send email to accessibility-unsubscribe at collab.sakaiproject.org with a subject of "unsubscribe"