Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#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)

9846_EditableListMixin.patch (2.3 KB) - added by davidtodd1 7 years ago.
Editable list patch - move button role to element that has title attribute so VoiceOver? announces button title. Also move aria-grabbed to button element.
9923_ComboBox.patch (954 bytes) - added by davidtodd1 7 years ago.
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.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 7 years ago by cjolif

Milestone: tbd1.9.1
Owner: changed from Eric Durocher to cjolif
Priority: undecidedhigh
Status: newassigned

comment:2 Changed 7 years ago by 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?

Changed 7 years ago by davidtodd1

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 7 years ago by davidtodd1

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 7 years ago by Christophe Jolif

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 7 years ago by Christophe Jolif

Merge pull request #4 from cjolif/master

refs #17129. Mobile accessibility fixes.

Changeset: 22920d79a1581ccc21cb70679b59ff8d33c0cda9

comment:5 Changed 7 years ago by Christophe Jolif

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 7 years ago by Christophe Jolif

Merge pull request #5 from cjolif/1.9

refs #17129. Mobile accessibility fixes (1.9 backport)

Changeset: 2b4cc95aafcae55dbfdce2b8a106a70bb23508f5

comment:7 Changed 7 years ago by cjolif

Resolution: fixed
Status: assignedclosed

comment:8 in reply to:  2 Changed 7 years ago by cjolif

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 7 years ago by bill

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 7 years ago by Paul Christopher

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.

Note: See TracTickets for help on using tickets.