Validation result how to read ARIA tab interface example 16 patterns by screen readers.

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.

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 Tab UI Pattern 1 I modified Simple ARIA tab interface in the same write as ARIA of Tabs | jQuery UI.

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

Validation 1-1 Tab UI Pattern 1-1 The h element of validation 1 tab panel has 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

Validation 2 Tab UI Pattern 2 The role attribute of validation 1 tab menu is the li element has 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

Validation 2-1 Tab UI Pattern 2-1 The h element of validation 2 tab panel has 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

Validation 3 Tab UI Pattern 3 The 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

Validation 3-1 Tab UI Pattern 3-1 The h element of validation 3 tab panel has 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

Validation 4 Tab UI Pattern 4 The 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

Validation 4-1 Tab UI Pattern 4-1 The h element of validation 4 tab panel has 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

Validation 5 Tab UI Pattern 5 The aria-labelledby attribute remove from the li element and tab panel of validation 1, and Tab panel has the aria-describedby attribute related to the a element has id.

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

Validation 5-1 Tab UI Pattern 5-1 The h element of validation 5 tab panel has 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

Validation 6 Tab UI Pattern 6 Tabs menu of Validation 5 were the li element has 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

Validation 6-1 Tab UI Pattern 6-1 The h element of validation 6 tab panel has 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

Validation 7 Tab UI Pattern 7 The 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

Validation 7-1 Tab UI Pattern 7-1 The h element of validation 5 tab panel has 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

Validation 8 Tab UI Pattern 8 The 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

Validation 8-1 Tab UI Pattern 8-1 The h element of validation 8 tab panel has 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

Conclusion

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.

最終更新日:: 2017年January28日(Sat) 14:49 JST|閲覧数: 980 印刷用ページ