I know that the good scenario is, when I click on number 3 on my keyboard I'm supposed to jump between my h3 headers.
For some reason this thing didn't happen in my case and my screen reader (NVDA) didn't show me any indication of it.
It's some list of results and on each result the title is h3.
Here is one example for one result:
http://codepen.io/anon/pen/PGkjdQ
According to the following page : Keyboard Shortcuts for NVDA
Numpad 3 and 3 keys have different use.
Numpad 3 : "Say Next Character"
1-6: "Headings level 1-6"
So you must not use the numpad when you want to navigate through the headings.
Questions that would be helpful in debugging this:
Are you in browse mode or focus mode?
Are you pressing the 3 on the keyboard or the number pad?
Are you at the end of the page?
Does NVDA speak to you ("No next heading 3") or make any noise when you press the 3 key?
Do you have an example that shows the HTML output, not your uncompiled Angular?
If in browse mode (source):
While in browse mode, For quicker navigation, NVDA also provides single character keys to jump to certain fields in the document. Note that not all of these commands are supported in every type of document.
The following keys by themselves jump to the next available element, while adding the shift key causes them to jump to the previous element:
h: heading
[…]
1 to 6: headings at levels 1 to 6 respectively
If you are not sure which mode you are in, you can toggle between them by pressing the NVDA key + Space (source).
The NVDA key changes based on whether you are using a laptop or desktop computer, and you can also override it. If on a desktop computer, then it is typically the Insert key on the number pad. If on a laptop then it is typically the Caps Lock key. (source)
Both NVDA and JAWS show the h3 in the headings dialog. I'm able to navigate to it using the 3 key along the top row of number keys (not number pad).
NVDA screenshot:
JAWS screenshot:
Related
When a user clicks tab on my page, it travels to all the links and buttons. Simply anything that is interactive. This works fine.
But how will a person that has accessibility limitations know there is a text on the page and to get it read out or to tab to it.
What's the norm here. Cause I tried the same on well known sites like stackoverflow and bbc.co.uk. They are doing the same where tabbing only works on links and buttons. It ignores text.
What about text. I tried using arrow keys which does nothing. If I press down it scrolls the page.
I get that the person could highlight the text and then get it read out to them with a screen reader. But that is assuming they are able to highlight in the first place.
What's the expected behaviour. How do we deal with text to get read out.
Imagine a page in following format. At present tab skips all text and only highlights the links and buttons. How do we handle text for accessibility. How do we set it up for keyboard access or have I pictured this wrong and text should indeed be ignored.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is some sample text.</p>
<h2>Heading 2</h2>
<p>This is some more sample text.</p>
<h3>Heading 3</h3>
<p>Here's even more sample text.</p>
<!-- All the above ignored by screen reader unless you highlight with a mouse, arrow key does nothing even on sites like bbc.co.uk -->
<button>Button 1</button>
Link 1
<button>Button 2</button>
Link 2
</body>
</html>
P.S: If it matters, using mac with built in screen reader. Also tried on Windows with NVDA, same outcome.
You don’t need to do anything additional to allow for reading your website (except for providing a proper semantic structure of your document, which you did).
Desktop screen readers distinguish between reading and interaction. The latter is done via the Tab keys.
As you mentioned, arrow keys are usually used for reading, but only together with a modifier key.
According to WebAIM’s guide on Using VoiceOver to Evaluate Web Accessibility, you can use
VO+a to start reading
VO + → to read next item
The modifier key for VoiceOver, here referred to as VO can be customised. By default, it’s Control + Option. So you’d press Control + Option + a to start reading.
You are essentially asking how to use a screen reader. #andy already spoke about VoiceOver so I'll comment on NVDA since you said "Also tried on Windows with NVDA, same outcome."
Using the tab key is just one way to navigate a webpage. Anyone can use tab regardless of whether a screen reader is running or not.
But with a screen reader such as NVDA (or JAWS) on a PC, you have a ton of shortcut keys for navigating. When NVDA is running, the down arrow will navigate to the next DOM elements (*) so you can access all the text on the page.
(*) It's not really the next DOM element but the next element in the accessibility tree, which is like a subset of the DOM. From the "Accessible Name and Description Computation 1.1" document, the "Introduction" section says:
User agents acquire information from the DOM and create a parallel structure called the accessibility tree, made up of accessible objects. An accessible object provides information about its role, states, and properties.
And the "accessibility tree" is defined as:
Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.
Also, the down arrow might not navigate to the next DOM element if you are in "forms mode". You have two modes you can run a screen reader in: "Forms mode" and "Browse mode". (The actual term for the mode might be different for different screen readers but conceptually they're "forms" and "browse"). The two modes automatically switch between the two by default (unless you change your screen reader settings).
In "browse mode", the down arrow key moves to the next DOM element. Browse mode also allows lots of other keyboard shortcuts such as the H key to navigate to the next heading (<h1>, <h2>, etc), the T key to navigate to the next table (<table>), the L key to navigate to the next list (<ul>, <ol>, <dl>), etc. NVDA and JAWS have similar keyboard shortcuts but occasionally the shortcut letter might be different.
If you tab to a form element such as an <input>, NVDA and JAWS will automatically switch from "browse mode" to "forms mode". In browse mode, all keyboard events are interpreted by the screen reader first but in forms mode, the keyboard events are sent to the browser. This lets you type the letter "H" or "T" or "L" into the <input> without the screen reader trying to navigate to the next heading, table, or list (respectively). So when you're in "forms mode", the down arrow will not move to the next DOM element.
That might be what you were experiencing when you said the down arrow key was not working with NVDA.
I have a page with tabbed navigation, and I need to make JAWS announce the tab statuses. For example:
________
Shop | Cart | Recent orders | Profile
--------------------------------------
When the user moves through the above tabs, JAWS should say something like
Shop tab; not selected
(Tab)
Cart; selected
(Tab)
Recent orders; not selected
(Tab)
Profile; not selected
Where I have "(Tab)" with the parens above, I mean that JAWS is saying the word "tab" because the Tab key was pressed to move between navigation tabs.
Currently, the words "not selected" and "selected" are not being spoken by JAWS, but the rest is. I'm using markup like
<a aria-selected="false" href="profile.html" id="profileTab">
Official JAWS documentation (reproduced online here) indicates that JAWS recognizes aria-selected but doesn't say what effect(s) the property has.
I can see the ARIA markup in my page source, but JAWS doesn't read it aloud, or do anything at all with it as far as I can tell. How can I get JAWS to say "selected" and "not selected" (or something similar)?
The authoring practice has a good section on the tab control. The demo site is using aria-selected like you are but it sounds fine with JAWS and Internet Explorer when I tested it just now, although the demo is setting aria-selected on a <button> instead of a link.
What browser were you using?
The latest version of JAWS?
Also, a tab control normally uses the arrow keys to navigate between the tabs (see aforementioned "authoring practice") rather than the tab key but that shouldn't affect whether aria-selected is read or not.
(As a side fun fact, you can turn off JAWS' announcement of "tab" every time you press the tab key. I use JAWS quite often and don't need it to tell me when I press the tab key. It's just audio clutter (for me). Ins+J > Utilities > Settings Center > Manage Key Labels > Tab > Toggle Mute)
Update
Sorry, had a brain lapse for a moment. I forgot to mention role="tab". That's what causing your problem. aria-selected is not valid on role="button" or role="link" but is valid on role="tab". See "Allowed ARIA roles, states and properties"
Change your code to
<a aria-selected="true" href="profile.html" id="profileTab" role="tab">
and it should work.
While doing research I came across this statement:
Warning: Be careful when marking up links with the button role.
Buttons are expected to be triggered using the Space key, while links
are expected to be triggered using the Enter key.
Does anyone know why a different key is used for buttons / links?
Is it ok to trigger using both Space and Enter?
Before reading this I, as a user, would have had no idea when to use Space or Enter.
Had a quick look at Google to see what they do.
For links Space scrolls down and Enter triggers
For buttons both Space and Enter trigger
Buttons are form elements.
If you select a checkbox element, space will toggle the checkbox while enter will submit the form.
So to be coherent, buttons act the same way. In practice, they accept both enter and space without any difference.
It is not only ok but you have to
Read inside the Third rule of ARIA:
For example, if using role=button the element must be able to receive focus and a user must be able to activate the action associated with the element using both the enter (on WIN OS) or return (MAC OS) and the space key.
This is for historical reason, not that it has been defined in any official recommendation, as far as I know
For instance an old bug from 2000 (https://bugzilla.mozilla.org/show_bug.cgi?id=56495) already stated that space bar was expected to work on buttons. Maybe an inheritance from Windows behavior.
I am speculating to answer #1, but I believe the keys used to activate buttons versus hyperlinks are holdovers from operating systems. For hyperlinks, think of Windows Help in Windows 95 and its reliance on in-content links, or Hypercard on the Mac prior to that. Also note that Space has scrolled a page in browsers since (IIRC) day one.
To answer number 2, no it is not OK. This is because a space bar triggers a page scroll and many users expect that when focus is on a hyperlink that pressing Space will just scroll the page.
In short, honor the keyboard mappings that are in place since there are users who rely on them and messing with them can have catastrophic consequences for users of assistive tech along with users with disabilities who do not use assistive tech.
Let me re-state what you saw at Mozilla:
A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful.
And then let me add this:
I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).
Source: Links, Buttons, Submits, and Divs, Oh Hell.
I want to know, according to WCAG 2.0, in which cases the spacebar is used to interact within the page.
Is it use in the same cases as the enter key?
Should I provide the same function to the enter key and the spacebar?
Do not change the native behavior of controls. That can mess with users.
A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. If there isn’t more to scroll then the user just experiences nothing.
I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).
I have a CodePen from another example that shows this: http://s.codepen.io/aardrian/debug/PZQJyd
If you are making something like a <div> clickable and trying to add keyboard interaction, then do not use a <div>. Use the right element for the purpose, which I briefly outline as:
Does the control take me to another page? Use an anchor (<a href>).
Does the control change something on the current page? Use <button>.
Does the control submit form fields? Use <input type=submit> or <button type=submit>.
As far as WCAG 2.0 it says specifically to use space bar only in 3 cases:
https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/
Checks the radio button with keyboard focus (this is a special case when using tab and no radio buttons have been marked as checked (https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#kbd_general_ex).
It is recommended that the space bar be used for selection for Drag drop support (https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#dragdrop)
Checkbox - Space bar toggles checkboxes, if the list items are checkable (https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224#listbox)
The WCAG only mentions a guideline:
"The TAB key moves keyboard focus to the widget, and other keys operate the features of the widget, typically cursor keys, Enter key and Spacebar. The actual keys are up to the developer, but best practices recommend using the same key bindings that are used to control similar widgets in common GUI operating systems like Microsoft Windows®, Apple OSX® and UNIX Desktops like GNOME and GTK."
Frankly its left to the user's interpretation, and based on what you are trying to implement, you would probably have to see the existing behaviour of similar components on popular tools/web sites/ browser behaviour and make a logical decision.
Conflicts between JAWS table navigation short keys and custom implemented navigation keys(i.e. arrow keys)
I am trying to make an HTML table accessible using keyboard as well as readable using JAWS Screen reader.
To make it keyboard accessible i am doing following things:
- Added keypress events on table cells for arrow keys (left, right, top, bottom)
To make it JAWS readable i am doing following things:
- Added caption,summary to table
- Added scope=col to table headers
- Added ARIA roles like Application, row, grid, gridcell
Keyboard navigation is working fine when the page is run without using JAWS.
JAWS also read the table fine provided JAWS shortcuts are used.
When it is run with JAWS custom implemented keyboard navigation does not work properly.
To move focus to different cell using custom implemented keyboard navigation (i.e. arrow keys), i have use INSERT + 3 key followed by an arrow key.
This will move focus to different cell but it will not change JAWS current cell focus. So when JAWS read, it will read the cell other than the actual focused cell.
Example page URL : http://test.cita.illinois.edu/aria/grid/grid1.php
The above page supports custom keyboard navigation(i.e. arrow keys). Try to read above page using JAWS.
Please help to make it keyboard accessible at the same time readable by JAWS.
Appreciate your help!
Thanks a lot for your quick reply! That was very good information you provided.
However I have few more queries regarding this. It would be great if you could help.
JAWS provides support for various cursors like Virtual PC Cursor, PC Cursor, JAWS Cursor.
As per my knowledge when we specify role="application", JAWS runs on PC Cursor and whatever functionality provided in website are usable using the provided keystrokes.
The functionality i want to achieve especially with HTML Table is, user should be able to navigate using arrow keys as well as JAWS should read the currently focused content.
So the doubt here is why JAWS does not readout currently focused content in in PC Cursor.(in html table it can be currently focused cell).
It would be helpful if you could explain, how the JAWS user ideally uses web sites using JAWS (specifically with information rendered in HTML Table).
I have a complex table having following features and would like it to be accessible by keyboard and readable by JAWS:
Table with expand/collapse icon. Clicking on Expand/Collapse icon or pressing +/- from keyboard the nested table should be visible to user.
Each row of table is having some action items and pressing a key or clicking on it should perform an action. (like each row shows unique product information and user can buy(action item) by pressing some key or clicking on a button. )
I tried using dojo grid and it provides to navigate using keyboard arrow keys and there is a JAWS shortcut to readout the currently focused cell i.e INSERT + UP Arrow.
Try adding role="application" to the table or a surrounding element.
There is no way I know of to do what you want. I'm a Jaws user and the table is fine as is. I would not use your site if your custom navigation keys overrode Jaws defaults. The issue with overriding the defaults is it eliminates the ability to review character by character. If I wanted to check the spelling of a word in the table cell I could read letter by letter with the arrow keys. Disabling this ability of jaws is unacceptable. The reason I do not believe it is possible to do what you want is because Jaws uses a virtual buffer with information obtained from the internet browser to format the page in a way easier to read with a screen reader. In my experience it's murky where the boundary between the browser and Jaws is. This means that you probably cannot capture jaws specific keystrokes before Jaws does. Using the insert+3 key followed by an arrow key will not work with jaws because the key is being passed to the browser. This means the table focus is changing in the browser but there is no way to force that change in the model of the page Jaws uses.