#17129 closed defect (fixed)
dojox/mobile accessibility fixes
Reported by: | cjolif | Owned by: | cjolif |
---|---|---|---|
Priority: | high | Milestone: | 1.9.1 |
Component: | DojoX Mobile | Version: | 1.9.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
A few accessibility bugs have been noticed after 1.9. They must be fixed for 1.9.1.
Attachments (2)
Change History (12)
comment:1 Changed 8 years ago by
Milestone: | tbd → 1.9.1 |
---|---|
Owner: | changed from Eric Durocher to cjolif |
Priority: | undecided → high |
Status: | new → assigned |
comment:2 follow-up: 8 Changed 8 years ago by
Changed 8 years ago by
Attachment: | 9846_EditableListMixin.patch added |
---|
Editable list patch - move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element.
Changed 8 years ago by
Attachment: | 9923_ComboBox.patch added |
---|
The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.
comment:3 Changed 8 years ago by
refs #17129. Fix some accessibility issues:
1/ move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element. 2/ The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.
Thanks David Tood (IBM, CCLA).
Changeset: 99b0031688bda299b341cf7f348cfc269052fa9c
comment:4 Changed 8 years ago by
comment:5 Changed 8 years ago by
refs #17129. Fix some accessibility issues:
1/ move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element. 2/ The Dojo mobile ComboBox? widget is missing an aria-expanded. The combobox must have aria-expanded=true if the list is displayed or aria-expanded=false when it is not.
Thanks David Tood (IBM, CCLA).
Changeset: 1d55367a16ec56549a8c9e905e8b8d3ac75cc9df
comment:6 Changed 8 years ago by
comment:7 Changed 8 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:8 Changed 8 years ago by
Replying to Paul Christopher:
I noticed this when I looked at ListItem: When you provide a "label" and a "rightText", the rightText div appears before the label div in the DOM. As far as I can see, this is not correct since a screenreader would first read the rightText div then the label div?
I'm not 100% sure if that is really problematic from a pure accessibility point of view as I'm not an accessibility expert. That said might be nice to get that fixed as well. We are always happy to accept patches.
comment:9 Changed 8 years ago by
Screen readers understand which labels apply to which nodes because of the "for" attribute, ex:
<input id="foo" type="checkbox"><label for="foo">xyz</label>
comment:10 Changed 8 years ago by
See http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_EdgeToEdgeList.html.
The html of a list item named "Wi-Fi" (so called "label" in dojox/mobile) and a right text "mac" looks like this:
<li id="dojox_mobile_ListItem_1" class="mblListItem" data-dojo-props="icon:"images/i-icon-2.png", rightText:"mac", moveTo:"hello"" data-dojo-type="dojox.mobile.ListItem" tabindex="0" style="" widgetid="dojox_mobile_ListItem_1" role="button"> <img class="mblImageIcon mblListItemIcon" alt="" src="images/i-icon-2.png"> <div class="mblListItemRightIcon"> <div class="mblListItemRightText">mac</div> <div class="mblListItemLabel" style="display: block;"> Wi-Fi </div> </li>
There is no semantic in there. "Wi-Fi" is the name of the list item. It is the most important information. Right text "mac" is just a supplement. But "mac" appears before "Wi-Fi" in the Dom. Therefore screenreaders might read it first. There is also no way for search engines/screenraders to tell a difference in the importance of "Wi-Fi" or "mac". A description is missing what "mac" is (right text/ supplement), and what "Wi-Fi" (list item's name/ label). And missing semantics is always an accessibility problem as far as I know.
I noticed this when I looked at ListItem: When you provide a "label" and a "rightText", the rightText div appears before the label div in the DOM. As far as I can see, this is not correct since a screenreader would first read the rightText div then the label div?