Validation result how to read ARIA tab interface example 4 patterns by screen readers.
I verified on October 17, 2016. The combination of version of the OS and the screen reader and the browser is as follows.
- Windows7/NVDA2016.3jp/Firefox48.0.2
- Windows7/PC-Talker7/Internet Explorer11
- iOS 9.3.5/VoiceOver/Safari
- Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124
The screen reader read by Japanese language. I translate it to English.
Validation 1 Tabs | jQuery UI Case
Tabs menu parts are the li element has role="tab" and The a element role="presentation", It uses jQuery UI - v1.12.1 - 2016-09-14. And The li element has the aria-controls attribute related to the div element of tab panel has id. And The li element has the aria-labelledby attribute related to the id of the a element and the aria-selected attribute and the aria-expanded attribute. Tab panel has the aria-labelledby attribute related to the id of the a element and the aria-hidden attribute.
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | Possible click Tab Expanded Selected 「Nunc tincidunt」 Tab Folded 「Proin dolor」 Tab Folded 「Aenean lacinia」 (Contents of tab panel related to select tab)Proin elit arcu, rutrum commodo… |
Selected of「Nunc tincidunt」 Decision by Tab 「Nunc tincidunt」 「Nunc tincidunt」 Selected of 「Proin dolor」 Decision by Tab 「Proin dolor」 「Proin dolor」 Selected of 「Aenean lacinia」 Decision by Tab 「Aenean lacinia」 「Aenean lacinia」 (Contents of tab panel related to select tab)Proin elit arcu, rutrum commodo… |
Selected 「Nunc tincidunt」 Tab 1 out of 3 Expanded 「Proin dolor」 Tab 2 out of 3 Folded 「Aenean lacinia」 Tab 3 out of 3 Folded (Contents of tab panel related to select tab)Proin elit arcu, rutrum commodo… |
「Nunc tincidunt」 Tab Selected 「Proin dolor」 Tab 「Aenean lacinia」 Tab (Contents of tab panel related to select tab)Proin elit arcu, rutrum commodo… |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Nunc tincidunt」 Tab Expanded Selected 1-3 「Proin dolor」 Tab Folded Selected 2-3 「Aenean lacinia」 Tab Folded Selected 3-3 (Contents of tab panel related to select tab)Proin elit arcu, rutrum commodo… |
The same result as reading from top case | The same result as reading from top case | Displays 3 items in Tab list 「Nunc tincidunt」 Tab Selected Become effective by Double tap 「Proin dolor」 Tab Become effective by Double tap 「Aenean lacinia」 Tab Become effective by Double tap 「Nunc tincidunt」 Tab panel |
Validation 2 Accessible jQuery-ui Components Demonstration Case
Maybe This Tabs UI was jQuery UI - v1.9.0pre - 2012-05-31 add uniquely modification. Tabs menu parts are the li element has role="presentation" and The a element role="tab".(Original jQuery UI of this version is same jQuery UI - v1.12.1.)
And The a element has the aria-controls attribute related to the div element of tab panel has id. and The a element has the aria-selected attribute. Tab panel has the aria-labelledby attribute related to the id of the the a element and the aria-hidden attribute and the aria-expanded attribute.
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | Tab Select 「Dogs」 Tab 「Cats」 Tab 「Sheep」 (Contents of tab panel related to select tab)Heading Level 2 Dogs… |
「Dogs」 Link 「Dogs」 Link 「Cats」 Link 「Cats」 Link 「Sheep」 Link 「Sheep」 Link (Contents of tab panel related to select tab)Dogs… |
Selected 「Dogs」 Tab 1 out of 3 「Cats」 Tab 2 out of 3 「Sheep」 Tab 3 out of 3 (Contents of tab panel related to select tab)Dogs… |
「Dogs」 Tab Selected 「Cats」 Tab 「Sheep」 Tab 「Dogs」Heading2 |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Dogs」 Tab Selected 1-3 「Cats」 Tab Selected 2-3 「Sheep」 Tab Selected 3-3 (Contents of tab panel related to select tab)Dogs… (Focus mode / Case of moved by the tab key)「Dogs」Property page Expanded Paragraph More information about Dogs on Wikipedia… |
Only reading 「Dogs」Link, so Can't move by Tab and arrow key. (Case of move form tab menu by tab key)More information about Dogs on Wikipedia… |
The same result as reading from top case | Displays 3 items in Tab list「Dogs」 Tab Selected Become effective by Double tap 「Cats」 Tab Selected Become effective by Double tap 「Sheep」 Tab Selected Become effective by Double tap 「Dogs」 Tab Panel |
Consideration and Analysis results of validation1 and validation2
Screen readers of except PC-Talker was reading 「tab」, both the li element has role="tab" case and the a element has role="tab" case. But, PC-Talker used most in Japan. So, the li element has role="tab" case that was reading 「tab」 by all screen readers was used in validation is more better than the a element has role="tab" case.
Screen readers of except PC-Talker was reading 「selected」 when selected tab has aria-selected="true" and aria-expanded="true" and Not selected tab has aria-selected="false" and aria-expanded="false". Moreover, NVDA and ViceOver was reading 「Expanded」 or 「Folded」. So, Screen readers of except PC-Talker supports the aria-selected attribute, NVDA and ViceOver supports the aria-expanded attribute.
Screen readers of more than two supports the aria-selected attribute and the aria-expanded attribute was found from the result that I think that I should to write the aria-selected attribute and the aria-expanded attribute.
As I have writen to validation 1 is better, But The a element of validation 1 has role="presentation". Now the question is 「Does the a element change role to presentation？」. So, I checked ARIA in HTML.
The a element with a href is role=link. The a element may be used roles is button, checkbox, menuitem, menuitemcheckbox, menuitemradio, radio, tab, switch or treeitem.
The a element may not be used roles="presentation". So, The a element of validation 1 is more better It don't has role="presentation". I try to validate how to reading of screen readers be in influence change as it.
Validation 3 case the a element of Tabs | jQuery UI doesn't has role="presentation".
The a element of same tab menu of validation 1 doesn't has role="presentation".
Validation results reading by screen reader, Validation 1 had the same result as validation 3. The bottom line is, It doesn't matter whether the a element has role="presentation" or not.
Validation 4 case the li element of Accessible jQuery-ui Components Demonstration doesn't has role="presentation".
The li element of same tab menu of validation 2 doesn't has role="presentation". case only the a element has rorle ="tab".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as validation 2.(it's same when The li element has role="presentation".) | The same result as validation 2.(it's same when The li element has role="presentation".) | Selected 「Dogs」 Tab 1 out of 1 「Cats」 Tab 1 out of 1 「Sheep」 Tab 1 out of 1 (Contents of tab panel related to select tab)Dogs… |
The same result as validation 2.(it's same when The li element has role="presentation".) |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Dogs」 Tab Selected 1-1 「Cats」 Tab Selected 1-1 「Sheep」 Tab Selected 1-1 (Contents of tab panel related to select tab)Dogs… (Focus mode / Case of moved by the tab key)「Dogs」Property page Expanded Paragraph More information about Dogs on Wikipedia… |
The same result as validation 2.(it's same when The li element has role="presentation".) | The same result as reading from top case | The same result as validation 2.(it's same when The li element has role="presentation".) |
Consideration and Analysis results of validation 3 and validation 4
First I think more better the a element doesn't have role="presentation" from validation results reading by screen reader, Validation 1 had the same result as validation 3.
So I thought I want to remove role="presentation" in the a element of jQuery UI Tabs. I tryed to sent pull requests Tabs: Remove presentation role ・ jquery/jquery-ui@b9ffc34 ・ GitHub. It didn't marge but it was added a commit. That'd be fine if that were true but will be incorporate my fixed in next version….
Next NVDA and ViceOver was read with the wrong numbers in the li element doesn't have role="presentation" case. So The li element needs to have role="presentation" in the a element has role="tab" case.
Please read to The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0 about role="presentation". And Please use it after understanding guideline include note that「Is role="presentation" inherite the child element ?」 etc…
Validation 2 used Accessible jQuery-ui Components Demonstration. But, It has a bug the environment in PC-Talker7/Internet Explorer11. So I try to validation again. A final conclusion is I write by Validation result how to read ARIA tab interface example 16 patterns by screen readers.
