Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Selectmenu: Tweak ARIA impplementation #931

Closed
wants to merge 1 commit into from

2 participants

@jzaefferer
Owner

Goals: Have the screenreader read the current value, the label and the role on focus. Have it read the selected value when it changes.

Achieved by: Using an initial aria-labelledby pointing at the button itself and the label. Make the button a live region and change the labelledby when the selection changes. Restore the original labelling on blur to get the correct description the next time the button is focused.

Side notes: Updating aria-selected caused NVDA/Firefox to announce "not selected" when changing selection with the open menu. Without it, it instead announces the items as proper menu items (x of n), that's much better.

TODOs: Not sure if removing the menu's labelledby was actually necessary. Though since menu doesn't receive focus, its likely that none of the menu aria changes are necessary. In fact they should probably just be removed.

Tested with: VoiceOver/Safari, NVDA/Firefox, JAWS/IE9. The first two are really solid, JAWS is good enough. Forgot what part it skipped, but we aren't done here anyway.

@jzaefferer jzaefferer Selectmenu: Tweak ARIA impplementation
Goals: Have the screenreader read the current value, the label and the role on focus. Have it read the selected value when it changes.

Achieved by: Using an initial aria-labelledby pointing at the button itself and the label. Make the button a live region and change the labelledby when the selection changes. Restore the original labelling on blur to get the correct description the next time the button is focused.

Side notes: Updating aria-selected caused NVDA/Firefox to announce "not selected" when changing selection with the open menu. Without it, it instead announces the items as proper menu items (x of n), that's much better.

TODOs: Not sure if removing the menu's labelledby was actually necessary. Though since menu doesn't receive focus, its likely that none of the menu aria changes are necessary. In fact they should probably just be removed.

Tested with: VoiceOver/Safari, NVDA/Firefox, JAWS/IE9. The first two are really solid, JAWS is good enough. Forgot what part it skipped, but we aren't done here anyway.
a78c0d8
@jzaefferer jzaefferer referenced this pull request
Closed

Selectmenu ARIA tweaks #877

@fnagel
Collaborator

My test results on Win7 for the selectmenu-aria2 branch:

FF/NVDA: solid, but does not read value on focus
IE/JAWS: solid, but does not reas role

I've tested the selectmenu branch too and it already meets the above mentioned goals, at least on Windows.
@jzaefferer Could you test the selectmenu branch too and post your results?

@jzaefferer
Owner

Tried again, after making sure that I'm running latest version of both Firefox and NVDA and could confirm your result. I've just commited a change to the selectmenu branch to remove the aria-selected usage, but beyond that, this implementation is pretty solid. This one works a little better with VoiceOver, but the original is still usable, as long as the user opens the menu first.

I think we spend enough time on this. Let's get this released and focus on fixing remaining bugs along with working with ARIA "vendors" to fix ARIA and its implementations.

@jzaefferer jzaefferer closed this
@fnagel
Collaborator

Nice, since your change FF/NVDA reads value on focus!
I will update the API docs and we're ready to go!

@fnagel
Collaborator

Nice, since your change FF/NVDA reads value on focus!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 7, 2013
  1. @jzaefferer

    Selectmenu: Tweak ARIA impplementation

    jzaefferer authored
    Goals: Have the screenreader read the current value, the label and the role on focus. Have it read the selected value when it changes.
    
    Achieved by: Using an initial aria-labelledby pointing at the button itself and the label. Make the button a live region and change the labelledby when the selection changes. Restore the original labelling on blur to get the correct description the next time the button is focused.
    
    Side notes: Updating aria-selected caused NVDA/Firefox to announce "not selected" when changing selection with the open menu. Without it, it instead announces the items as proper menu items (x of n), that's much better.
    
    TODOs: Not sure if removing the menu's labelledby was actually necessary. Though since menu doesn't receive focus, its likely that none of the menu aria changes are necessary. In fact they should probably just be removed.
    
    Tested with: VoiceOver/Safari, NVDA/Firefox, JAWS/IE9. The first two are really solid, JAWS is good enough. Forgot what part it skipped, but we aren't done here anyway.
This page is out of date. Refresh to see the latest.
Showing with 15 additions and 7 deletions.
  1. +15 −7 ui/jquery.ui.selectmenu.js
View
22 ui/jquery.ui.selectmenu.js
@@ -56,7 +56,7 @@ $.widget( "ui.selectmenu", {
var tabindex = this.element.attr( "tabindex" );
// fix existing label
- this.label = $( "label[for='" + this.ids.id + "']" ).attr( "for", this.ids.button );
+ this.label = $( "label[for='" + this.ids.id + "']" ).attr( "for", this.ids.button ).uniqueId();
this._on( this.label, {
"click": function( event ) {
this.button.focus();
@@ -77,7 +77,9 @@ $.widget( "ui.selectmenu", {
"aria-expanded": false,
"aria-autocomplete": "list",
"aria-owns": this.ids.menu,
- "aria-haspopup": true
+ "aria-haspopup": true,
+ "aria-live": "assertive",
+ "aria-labelledby": this.ids.button + " " + this.label.attr( "id" )
})
.insertAfter( this.element );
@@ -103,7 +105,6 @@ $.widget( "ui.selectmenu", {
// create menu portion, append to body
this.menu = $( "<ul>", {
"aria-hidden": true,
- "aria-labelledby": this.ids.button,
id: this.ids.menu
});
@@ -290,6 +291,12 @@ $.widget( "ui.selectmenu", {
this.button.addClass( "ui-state-focus" );
this._off( this.button, "focus" );
},
+ blur: function() {
+ // restored aria label to include both button and label
+ this.button.attr({
+ "aria-labelledby": this.ids.button + " " + this.label.attr( "id" )
+ });
+ },
click: function( event ) {
this._toggle( event );
event.preventDefault();
@@ -360,6 +367,10 @@ $.widget( "ui.selectmenu", {
this.element[ 0 ].selectedIndex = item.index;
this._setText( this.buttonText, item.label );
this._setAria( item );
+ // only do this when the selection changes
+ this.button.attr({
+ "aria-labelledby": this.label.attr( "id" )
+ });
this._trigger( "select", event, { item: item } );
if ( item.index !== oldIndex ) {
@@ -372,10 +383,7 @@ $.widget( "ui.selectmenu", {
id = link.attr( "id" );
// change ARIA attr
- this.menuItems.attr( "aria-selected", false );
- link.attr( "aria-selected", true );
this.button.attr({
- "aria-labelledby": id,
"aria-activedescendant": id
});
this.menu.attr( "aria-activedescendant", id );
@@ -459,7 +467,7 @@ $.widget( "ui.selectmenu", {
this.button.remove();
this.element.show();
this.element.removeUniqueId();
- this.label.attr( "for", this.ids.id );
+ this.label.attr( "for", this.ids.id ).removeUniqueId();
}
});
Something went wrong with that request. Please try again.