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.

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??

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.

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.

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.

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.

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.

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?

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?

... 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.

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.

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?

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.

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?

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.

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.

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.