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

[Mary Stores]

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;
> }