How to log out of WordPress without a mouse?

[grahamarmfield]

Those who are blind and using a screen reader and anyone who is sighted but who cannot use a mouse will not be aware how to log out from the admin area without the use of a mouse.

I know that it is possible to log out using keyboard only but believe vast majority will not as there are no clear (and visible) instructions anywhere as far as I am aware.

Please could either:

1) The log out link be a plain text link within the main body of the tool bar. Or...

2) Could clear and visible instructions be added to all admin screens to tell people how to log out using keyboard only.

I feel this is important from a site security perspective as well as an accessibility perspective.

Graham

[edingirl]

Screenshots of log out problems

[edingirl]

I second this. See attachment, which illustrates the issues.

I've tried using keyboard controls to reach the log out link on Firefox and IE and the keyboard focus is very unclear - it can be a very pale blue on white. You have to tab through quite a lot of links until you reach 'Howdy, admin' and then press Enter, then tab to the log out link, and hit Enter again. It's quite fiddly.

It looks as if there is enough space on the admin bar to add the log out link to the right of the Howdy link, though one problem with that seems to be that the Howdy link isn't visible if the window size is narrowed, even if the user scrolls right. So the log out link wouldn't be seen either.

Another issue is that on my smartphone, I can't reach the log out link at all, as I can't hover over the Howdy link - I can only activate the link and reach my profile. I don't think there's a 'hover' state for a touchscreen device - is there?

So I'm not sure where the best place for the log out link is, but it definitely needs to be a separate link.

[grahamarmfield]

The dropdown panel of the Howdy link only contains Edit Profile and Log out. If Log out is to move from here to be a separate link that would only leave the Edit Profile link in the dropdown. Which of course begs the question as to whether the dropdown is required at all.

One solution would be to just have the two links adjacent on the toolbar - eg:

Edit XXX Profile | Log Out

The issue about visibility of these links within a smartphone view is an important one given the potential security risks of not logging out. Ideally the toolbar should allow itself to resize based on its contents, but I guess that should be the subject of a separate ticket??

[DrewAPicture]

Replying to edingirl:

So I'm not sure where the best place for the log out link is, but it definitely needs to be a separate link.

Why not just add a second Log Out link in the admin footer? Yeah, the link will only be on the backend, but accessibility of the toolbar on the frontend is always going to be dependent on what the theme is doing anyway. Just a thought.

[azaozz]

Seems the extra log out link can also be non-visible in the UI, reachable only for screen readers/when tabbing.

[nacin]

This has bothered me since 3.2. We could do a "Log Out" item as Graham describes, but we could keep it hidden unless it has focus (via tabbing) and also make sure it is visible to screen readers.

The menus are expandable on almost all touch devices. (We'd want to fix #20614.) It also works without JavaScript.

Twitter.com, Facebook.com, and Google.com all hide their log-out links in a drop-down. How do they handle it?

[grahamarmfield]

I'm not sure why it is a problem to have the logout link visible at all times in the admin area - it's a pretty key piece of functionality when you think about it.

Whilst the links that appear when they receive focus are usable by screen readers and those using keyboard to tab around, they are not so easily accessible for those who may be controlling their computers using speech recognition software - eg Dragon Naturally Speaking. I'm not saying they are impossible to use but hopefully what we're doing here is to make life easier for as many as we can.

Graham

[azaozz]

21312.patch add a Log Out link at the end of the toolbar. It is off the screen (uses .screen-reader-text) and becomes visible when focused. Will commit it so it's easier to test.

[azaozz]

In [21452]:

Accessibility: add off-screen Log Out link in the toolbar, tweak the class names of the accessible links in #adminbar, see #21312

[grahamarmfield]

Still not sure why such a key link should not be visible at all times?

Also, not strictly an accessibility feature, but how will users on a touch device find the logout link? Or is there some way that the logout link becomes visible on a touch device?

[DrewAPicture]

Replying to grahamarmfield:

Still not sure why such a key link should not be visible at all times?

I believe it was a deliberate decision for the field to live in that dropdown, though I'd be in favor of a standalone Log Off button/link on mobile devices.

Also, not strictly an accessibility feature, but how will users on a touch device find the logout link? Or is there some way that the logout link becomes visible on a touch device?

The dropdown is accessible on touch devices via a swipe, but it mostly comes down to whether it needs to be that readily available.

[lessbloat]

Tested 21312.patch in FF and Chrome. Looks good.

[SergeyBiryukov]

Related: #22065

[helenyhou]

Closing this as fixed. #22065 will serve for the touch issues.

[grahamarmfield]

Have just seen the latest beta version, and have been testing with Dragon Naturally Speaking 12 - speech recognition software used by some with motor impairments.

The lack of a permanently visible link to Logout means that speech recognition software users cannot easily access the link - since it's hidden.

Speech recognition software users may be able to control the mouse pointer but it can be a laborious experience and one that needs an element of accuracy. They also may not know that the link is there if they are not familiar with the admin screens.

[helenyhou]

Well, as nacin asked:

Twitter.com, Facebook.com, and Google.com all hide their log-out links in a drop-down. How do they handle it?

[grahamarmfield]

That's very true helenyhou - however Twitter, Facebook and Google, despite their popularity, are not known as sites that feature accessibility very highly - as many, many blog posts will attest.

The short answer is that motor impaired keyboard/speech recognition users will find it much harder than mouse users to log out of those sites too.

As well as the accessibility angle, I'm thinking about usability too, and I don't understand why it's so bad to have a permanently visible log out link with the WordPress admin screens.

[helenyhou]

I think it's a genuine question, not a comparison - how does software like Dragon handle those sites, or vice versa? It could give us ideas if they are doing something that works.

[grahamarmfield]

I will test them with Dragon and get back to you.

[grahamarmfield]

Facebook - Initially no obvious 'click...' type comments available to Dragon to open up panel to show log off link. Only way to do it is to use move mouse commands to navigate to arrow and then "Mouse click" and then mouse commands again to move down and then "Mouse click" when over Log out link.

But... after experience with Twitter found that there is a voice command that works to open the fly-out panel - "Click settings". Unfotunately though, it's still not possible to follow up with a "Click Log out", and you are forced to mouse command down to the link, before a "Mouse click" when you've arrived.

Twitter - Initially could find no obvious click commands to get the fly-out panel to open. But then I realised that the icon used is like the Google Chrome settings icon so I tried "Click settings" and it worked, the panel flies out. A following "Click Sign out" does the trick straight away.

Google - Can't find a single "Click ..." command to open the panel where the sign out link is. So it's definitely down to the move mouse commands to get the pointer over what is actually a very tiny target and then a "Mouse click" command top open the panel. Once the panel is open the "Click sign out" does work.

WordPress - In WordPress, it is necessary to hover over the Howdy, username text to open the panel - clicking it won't do as I'm taken straight to my profile page. So in Dragon, any of the "Click ..." commands aren't going to work. You have to use the move mouse commands to get the pointer to hover in the right place. Then, once the panel is open you can say "Click log out" to action the link.

The summary is that Dragon will only allow you to access directly links that are visible, and have some text associated with them. The exception here is in something like the Theme Customizer where the links beneath the panel are still actionable, but that's another issue.

In Dragon using the "Click ..." and "Tab" commands are as quick as clicking with a mouse. Controlling the mouse pointer in Dragon is a pig and much slower - even using the mouse grid functionality, it's slower.

[azaozz]

Replying to grahamarmfield:

...
The lack of a permanently visible link to Logout means that speech recognition software users cannot easily access the link - since it's hidden.

But there is a permanently visible (visually hidden off-screen) Log Out link now. Doesn't Dragon pick it? It's the last element in the top toolbar and is also accessible when tabbing.

[grahamarmfield]

Unfortunately in Dragon it's not directly accessible using the "Click log out" command. Presumably Dragon must interact with the stylesheet too to determine what's visible on the page.

You are right that you can tab to the Log out link, and indeed it is possible to simulate the tabbing in Dragon. When arriving on any WordPress admin page you can go: "Tab, tab, click skip to toolbar, tab, tab, tab, tab (through any of the links that are appearing in the toolbar), tab, Click Log Out" - and it works. But that's a lot of steps.

[DrewAPicture]

Replying to grahamarmfield:

Unfortunately in Dragon it's not directly accessible using the "Click log out" command. Presumably Dragon must interact with the stylesheet too to determine what's visible on the page.

You are right that you can tab to the Log out link [SNIP] ... But that's a lot of steps.

Please excuse my naiveté on this subject, but what are the options for creating a target-able link for software like Dragon, JAWS, etc.? From your description of Twitter's process, you said "Click settings" + "Click Sign Out" worked, so maybe it's worth investigating why it works on Twitter but not, say, on Facebook, then apply that logic to the floating 'Log out' link for WordPress or even the link in the dropdown. Thoughts?

[grahamarmfield]

Replying to DrewAPicture:

Replying to grahamarmfield:
Please excuse my naiveté on this subject, but what are the options for creating a target-able link for software like Dragon, JAWS, etc.? From your description of Twitter's process, you said "Click settings" + "Click Sign Out" worked, so maybe it's worth investigating why it works on Twitter but not, say, on Facebook, then apply that logic to the floating 'Log out' link for WordPress or even the link in the dropdown. Thoughts?

It is a good question. On the face of it the Twitter link which is a plain text link of 'Settings and help' is moved off the screen in the same way as the 'Log Out' link just after the WordPress admin toolbar. There is a difference though in that the WP link has width and height both set to 1px and overflow:hidden, whereas the Twitter link has a width of 98px, a height of 12px and no overflow property set.

So maybe that's it? It is evident that Dragon does pay some heed to what is in a stylesheet - in common with screen readers and other AT - so could it be that Dragon interprets the small width, height and the overflow:hidden as exposing none of the text?

I'm not really in a position to test this, but since the WP 'Log out' link is moved so far off to the left, is it really necessary to constrain the width and height, and to ensure overflow is hidden? I can see the styles in question govern any .screen-reader-text items in the #wpadminbar so there could be other implications for changing those properties. But it might be worth a try?

[DrewAPicture]

Replying to grahamarmfield:

I'm not really in a position to test this, but since the WP 'Log out' link is moved so far off to the left, is it really necessary to constrain the width and height, and to ensure overflow is hidden?

I'm not sure why this is necessary, perhaps @azaozz can pipe in here.

For reference, looks like the off-screen Log out link was added in [21452].

[grahamarmfield]

Yes, that trac was linked to this one.

[DrewAPicture]

Replying to grahamarmfield:

Yes, that trac was linked to this one.

Hah, I searched it but didn't realize it was all in the same thread :)

[azaozz]

Replying to DrewAPicture:

Replying to grahamarmfield:

... since the WP 'Log out' link is moved so far off to the left, is it really necessary to constrain the width and height, and to ensure overflow is hidden?

I'm not sure why this is necessary, perhaps @azaozz can pipe in here.

That's a very good question and worth investigating. We followed the accessibility recommendations when making the screen-reader-text css class. Perhaps these recommendations are outdated/inaccurate and we would need to update how we move accessibility related content off-screen.

As far as I see removing width, height and overflow: hidden doesn't impact anything on the screen in the modern browsers (even IE7). But as we are in beta-3, a bit hesitant to change that for all .screen-reader-text labels, links, etc.

[nacin]

graham's results with Dragon are exactly what koopersmith and I witnessed at a demo at ​Accessibility Camp DC. We noted that things did work (occasionally) with other services that used dropdowns, but that they did not with WordPress. (We additionally noted that most items in the toolbar were in no way discoverable, even the visible top-level ones.) The resolution was to look at how they were able to make hidden links functional.

Here's how HTML5 Boilerplate does it: ​https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L135. Not sure if that takes a tool like Dragon into account. And yes, definitely too late to change .screen-reader-text, but happy to visit this early 3.6.

[azaozz]

Yeah, the styles in HTML5 Boilerplate are completely different from what we use. If height: 1px and width: 1px are not the problem with Dragon, perhaps we can use something similar too.

Thinking it's worth it trying to fix this only for the Log Out link for 3.5 if possible and revisit all .screen-reader-text in 3.6.

[grahamarmfield]

Although the Log out link does have a style of screen-reader-text it is further specified in the stylesheet (load-styles.php?) as a descendant of #wpadminbar.

As far as I can see that more-specific style appears to be used only by the three new accessibility links - Skip to content, Skip to toolbar and Log out. Could we not try just changing the style for those three links now so that I can see if that makes a difference in Dragon? I am downloading nightly builds. It'd be easy to revert if there are unforeseen issues.

I almost hesitate to ask again, but why is providing a permanently visible Log out link such a bad thing?

[DrewAPicture]

Replying to grahamarmfield:

Could we not try just changing the style for those three links now so that I can see if that makes a difference in Dragon?

A patch might be a good step, though would that just entail removing the overflow and height/width properties from the CSS?

I almost hesitate to ask again, but why is providing a permanently visible Log out link such a bad thing?

IIRC, it was a deliberate design decision made in 3.0 to declutter the options available in the then-admin bar. As it stands now, on the right side we have the Howdy menu on the back end, Howdy + Search on the front end and the possibility of adding Help and Screen Options in the same area in the next cycle.

[azaozz]

Replying to grahamarmfield:

As far as I can see that more-specific style appears to be used only by the three new accessibility links - Skip to content, Skip to toolbar and Log out. Could we not try just changing the style for those three links now so that I can see if that makes a difference in Dragon?

Sure, will do that. What about all other .screen-reader-text? There are quite a few of them especially on the Settings screens. Do they work for you?

[grahamarmfield]

I've not really done much testing with Dragon, since it's a new purchase. But on the General Settings page of my nightly build site I find the following screen-reader-text items:

1. x plugin updates, y theme updates - This works OK in Dragon - saying "Click x plugin updates" does action the link.
2. Membership - a legend for a fieldset. On it's own I wouldn't expect much traction with Dragon and Dragon users are unlikely to use it in a command.
3. Date format - a legend for a fieldset. On it's own I wouldn't expect much traction with Dragon and Dragon users are unlikely to use it in a command.
4. Time format - a legend for a fieldset. On it's own I wouldn't expect much traction with Dragon and Dragon users are unlikely to use it in a command.

Reading up on Dragon help screens, some of the form interaction controls only work with IE browsers. I can successfully access all the form fields in IE9, which is good. Mentioning the hidden legend doesn't do anything in Dragon with FF12 or IE9. These elements really are for screen reader users.

[azaozz]

21312-2.patch treats the .screen-reader-shortcut links same as the submenus of the admin menu, hiding them visually by only setting top: -1000em;. Seems to work well in all supported browsers.

[azaozz]

In 22730:

Skip To links: visually hide by only setting top: -1000em; (this should make them work well in all screen readers), fixes #21312