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

[Keli Sato Amann]

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; 
}
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/accessibility/attachments/20130404/faffe318/attachment.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: popup logout.png
Type: image/png
Size: 10489 bytes
Desc: not available
Url : http://collab.sakaiproject.org/pipermail/accessibility/attachments/20130404/faffe318/attachment.png