Example 6 - Keyboard Only Users and Entitlement
Summary
In most browsers the title attribute on a focusable element is not exposed on keyboard focus. When the accesskey attribute is used, the browser makes sure to keep it a closely guarded secret unless you are armed with a screen reader.
Example
Your browser is keyboard only awesome if:
- You can see which of the "View your statement" links points to a PDF file (by using the tab key only, no mouse or link activation is allowed).
- You can tell which magic keyboard combination takes you directly to the PDF statement link (don't look at the code).
Explanation
The title attribute specifies extra information about an element, and is typically displayed as a tooltip when a user mouses over the element. The title attribute is mapped to the element's accessible description as dictated by the accessible name calculation algorithm, and is thus exposed to assistive technologies.
But in most browsers the title attribute is not exposed when user with no assistive technology focuses on the element using the keyboard, e.g. by using the tab or shift-tab keys. In this particular example, you can tab or shift tab to the first "View your statement" link and see whether the word "PDF" pops up. Only IE11 exposes the title attribute.
Some elements, such as divs, spans or img elements are not keyboard focusable, so understandably the title attribute cannot be made accessible to a keyboard only user without JavaScript. But for elements that are natively keyboard focusable (such as links and buttons) one would expect the browser to reveal the title to keyboard only users. After all users without mouses are people too.
The accesskey attribute can be used to provide a keyboard only shortcut to a webpage element. But no browser exposes the accesskey attribute to keyboard only users. They are revealed to users of screen readers, but the screen reader user has many ways to quickly navigate to parts of a webpage, including headings and landmarks. The users who would benefit the most from a keyboard only shortcut are never told about it.
Imagine...
You are a developer working on a website where some of the links point to webpages, others to PDF files. You put the title "PDF" on all the PDF links. But when you navigate to these links using the tab key you realize there is no way for you to see that the link points to a PDF file.
You could use a PDF icon, or include the words "PDF" in your link text, but both of these things would break the design spec you have been given. You could also use JavaScript to create an accessible tooltip, but you are supposed to send the page over to the test team today.
So...