I used Accessible jQuery-ui Components Demonstration in validation 2 of Validation result how to read ARIA tab panel example 4 patterns by screen readers. But, It has a bug the environment in PC-Talker7/Internet Explorer11. So I try to validation again.
This time, I modified Practical ARIA Examples「Simple ARIA tab interface」 of HeydonWorks | The works, workings and reckonings of Heydon in the same write as ARIA of Tabs | jQuery UI(Query UI - v1.12.1 - 2016-09-14 ). And I validation it and different ARIA 16 pattern.
I verified on October 17, 2016. The combination of version of the OS and the screen reader and the browser is as follows.
The screen reader read by Japanese language. I translate it to English.
Tabs menu were the li element has role="tab"、The a element has role="presentation".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| The same result as reading from top of page case | Tab Expanded Selected 「Section1」 Tab Folded 「Section2」 Tab Folded 「Section3」 (Contents of tab pannel related to select tab)Heading Level 3 Heading Section1 |
Selected of「Section1」Decision by Tab 「Section1」「Section1」 Selected of「Section2」Decision by Tab 「Section2」「Section2」 Selected of 「Section3」 Decision by Tab 「Section3」「Section3」 Heading Section 1 |
Selected「Section1」 Tab 1 out of 3 Expanded 「Section2」 Tab 2 out of 3 Folded 「Section3」 Tab 3 out of 3 Folded Heading Section1 |
「Section1」 Tab , Selected 「Section2」 Tab 「Section3」 Tab Heading Section1 Heading 3 January 28, 2017 The aria-expanded attribute is now read as "expanded" or "folded". |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Section1」Tab Expanded Selected 1-3 Folded 「Section2」Tab Expanded Selected 2-3 Folded 「Section3」Tab Folded Selected 3-3 (Contents of tab pannel related to select tab)Heading Level 3 Heading Section1 |
Reading use Tab and Arrow keys or Tap case | Tabs menu parts are same to reading from top case Heading Section1 Heading Level 3 |
Displays 3 items in tab list「Section1」 Tab Selected Become effective by Double tap 「Section2」Tab Selected Become effective by Double tap 「Section3」Tab Selected Become effective by Double tap 「Section1」 Tab Panel Heading Section1 Heading Level 3 Become effective by Double tap January 28, 2017 The aria-expanded attribute is now read as "expanded" or "folded". |
tabindex="0".Tabs menu were the li element has role="tab"、The a element has role="presentation".
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | Tabs menu parts is The same as the pattern 1 Character input of heading Section 1 Heading Section 1 |
The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1 (Focus mode / Case of moved by the tab key)Property page「Section1」Heading Section1 Heading Level 3 |
The same result as reading from top case | The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation" and the a element has role="tab".Tabs menu were the li element has role="presentation"、The a element has role="tab".
So, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element, and The aria-labelledby attribute remove from the li element.
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| The same result as reading from top of page case | The same result as the pattern 1 | 「Section1」Link「Section1」Link 「Section2」Link「Section2」Link 「Section3」Link「Section3」Link Tab panel parts is the same result as the pattern 1 |
The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Section1」 Tab Expanded Selected 1-3 「Section2」Tab Folded Selected 2-3 「Section3」Tab Expanded Selected 3-3 Tab panel parts is the same result as the pattern 1 |
「Section1」Link「Section1」 「Section2」Link「Section2」 「Section3」Link「Section3」 Tab panel parts is the same result as the pattern 1 |
The same result as the pattern 1 | The same result as the pattern 1 |
tabindex="0".Tabs menu were the li element has role="presentation"、The a element has role="tab".
So, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element, and The aria-labelledby attribute remove from the li element.
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | Tabs menu parts are the same result as the pattern 2 Tab panel parts is the same result as the pattern 1-1 |
The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 2 Tab panel parts is the same result as the pattern 1-1 |
Tabs menu parts are the same result as the pattern 2 Tab panel parts is the same result as the pattern 1-1 |
The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation" remove from the a element in the tab menu of validation 1.The role="presentation" remove from the a element in the tab menu of validation 1, and Only the li element has role="tab".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
tabindex="0".The role="presentation" remove from the a element in the tab menu of validation 1, and Only the li element has role="tab".
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 1-1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1-1 | The same result ass the pattern 1-1 | The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation" remove from the li element in the tab menu of validation 2.The role="presentation" remove from the li element in the tab menu of validation 1, and Only the a element has role="tab".
And, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element, and The aria-labelledby attribute remove from the li element.
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2 | Selected 「Section1」 Tab 1 out of 1 Expanded 「Section2」Tab 1 out of 1 Folded 「Section3」Tab 1 out of 1 Folded Tab panel parts is the same result as the pattern 1 |
The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | Tab Control 「Section1」 Tab Expanded Selected 1-1 「Section2」 Tab Expanded Selected 1-1 「Section3」Tab Expanded Selected 1-1 Tab panel parts is the same result as the pattern 1 |
The same result as the pattern 2 | Tabs menu parts are the same result as reading from top case Tab panel parts is the same result as the pattern 1 |
The same result as the pattern 1 |
tabindex="0".The role="presentation" remove from the li element in the tab menu of validation 1, and Only the a element has role="tab".
And, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element, and The aria-labelledby attribute remove from the li element.
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2-1 | The same result as the pattern 4 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | Tabs menu parts are the same result as the pattern 4 Tab panel is the same result as the pattern 1-1 |
The same result as the pattern 2-1 | The same result as the pattern 4 | The same result as the pattern 1 |
The aria-labelledby attribute related to the a element has id remove from the li element and tab panel, and Tab panel has the aria-describedby attribute related to the a element has id.
Tabs menu were the li element has role="tab"、The a element has role="presentation".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
tabindex="0".Tabs menu were the li element has role="tab"、The a element has role="presentation".
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1-1 | The same result as the pattern 1-1 | The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation"、The a element has role="tab".Tabs menu were the li element has role="presentation"、The a element has role="tab".
So, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element.
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 2 | The same result as the pattern 2 | The same result as the pattern 1 | The same result as the pattern 1 |
tabindex="0".Tabs menu were the li element has role="presentation"、The a element has role="tab".
So, The aria-controls attribute and the aria-selected attribute and the aria-expanded attribute moved to the a element.
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2-1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 2-1 | The same result as the pattern 2-1 | The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation" remove from the a element in the tab menu of validation 5.The role="presentation" remove from the a element in the tab menu of validation 5, and Only the li element has role="tab".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | Tab Expanded Selected Link 「Section1」 Tab Folded Link「Section2」 Tab Folded Link「Section3」 Tab panel is the same as the pattern 1 |
The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 | The same result as the pattern 1 |
tabindex="0".The role="presentation" remove from the a element in the tab menu of validation 5, and Only the li element has role="tab".
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | Tab Expanded Selected Link 「Section1」 Tab Folded Link「Section2」 Tab Folded Link「Section3」 Tab panel is the same result as the pattern 1 |
The same result as the pattern 1-1 | The same result as the pattern 1 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 1-1 | The same result as the pattern 1-1 | The same result as the pattern 1 | The same result as the pattern 1 |
role="presentation" remove from the li element in the tab menu of validation 6.The role="presentation" remove from the li element in the tab menu of validation 6, and Only the a element has role="tab".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2 | The same result as the pattern 4 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 4 | The same result as the pattern 2 | The same result as the pattern 4 | The same result as the pattern 1 |
tabindex="0".The role="presentation" remove from the li element in the tab menu of validation 6, and Only the a element has role="tab".
And The h element of This tab panel has tabindex="0".
| How to reading of screen reader | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| Reading from top of page case | The same result as the pattern 1 | The same result as the pattern 2-1 | The same result as the pattern 4 | The same result as the pattern 1 |
| Reading use Tab and Arrow keys or Tap case | The same result as the pattern 4-1 | The same result as the pattern 2-1 | The same result as the pattern 4 | The same result as the pattern 1 |
The result was the same to Validation result how to read ARIA tab interface example 4 patterns by screen readers. 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.
Validation 7 of The li element doesn't have aria-labelledby attribute and the a element doesn't have role="presentation" was reading 「Link」 by screen readers too. Validation3, 3-1 of the a element doesn't have role="presentation" was not a problem. It follows from this that the li element has role="tab" and without role="presentation" case needs the li element has aria-labelledby attribute.
jQuery Foundation member had to say
Spec compliance is nice, but not our primary goal. Foremost, it needs to work for our users. That said, have you tested this (before and after) in a screenreader? See http://wiki.jqueryui.com/w/page/43766322/Accessibility-Overview for details on what screenreaders we (try to) support.
I was found from the result that jQuery UI is being developed correctly verify. I take my hat off to they for their approach.
And 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.
To report continuously, NVDA and ViceOver was read with the wrong numbers in the li element doesn't have role="presentation" case(Validation4,4-1,8,8-1). So The li element needs to have role="presentation" in the a element has role="tab" case.
Finally, About tab panel, TalkBack was reading 「「Section1」 Tab Panel」. But, It follows from I have to tap accurately tab panel parts that screen reader users will use flick don't get information.(The same as「Displays 3 items in list」)
It follows from this that It doesn't matter whether the tab panel has tabindex="0" or not. But if the tab panel has tabindex="0", keyboard users can to Jump to contents of tab menu. So the tab panel should have tabindex="0".
I validated The section element has tab panel parts has tabindex="0" case. That was established in the results the same with the h element has tabindex="0" case. But it couldn't to read next contents when after it's focus in the section element by Android, so tabindex="0" should to write first element of contents.
Conclusion is the best way use validation 3-1 that the a element doesn't have role="presentation" and the li element has aria-labelledby attribute.
White Stage
https://white-stage.com/staticpages/index.php/a11y-tabmenu-sr2_en