Material: chips: accessibility improvements

Created on 29 Apr 2015 · 9Comments · Source: angular/material

There are a few issues in mdChips that make them hard to use with a screen reader, including:

The input needs a label enforced - right now it's empty if no placeholder
When the input is focused, it should announce the label, not "Press delete to remove this chip"
Chips need to be uniquely labeled along with the delete hint text. Ex: when a chip is focused, it should say: "Apple. Press delete to remove this chip".
Need to verify chips can be removed from touch devices with screen readers running.

required a11y Pull Request fixed bug

Source

marcysutton

👍1

All 9 comments

This is complicated by the fact that there are three different ways a Chips component can get a native <input>, which is the thing requiring a label:

Using an autocomplete, which has its own <input>.
Manually including an <input>.
Chips dynamically adds an <input>.

If there is a placeholder on the <md-chips> or <md-contact-chips>, we can copy that text to the child input IF it doesn't already have aria-label (likely when manually adding an input). If the parent has aria-label supplied, that should be moved to the input instead of the placeholder.

Bonus points for supporting aria-labelledby. But I can't even get a reliable aria-label in all three scenarios.

marcysutton on 19 May 2015

👍1

An accessible, rendered chips component would look like this (regardless of API used by the developer):

<md-chips ng-model="ctrl.roFruitNames" tabindex="-1">
    <md-chips-wrap ng-if="!$mdChipsCtrl.readonly || $mdChipsCtrl.items.length > 0" 
         ng-keydown="$mdChipsCtrl.chipKeydown($event)" 
         ng-class="{ 'md-focused': $mdChipsCtrl.hasFocus() }" class="md-chips">

        <md-chip ng-repeat="$chip in $mdChipsCtrl.items" index="0" 
            ng-class="{'md-focused': $mdChipsCtrl.selectedChip == $index}" 
            class="md-chip">
            <div class="md-chip-content" tabindex="-1" 
                ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)">
                <md-chip-template>
                    <strong>Apple</strong>
                    <em>(fruit)</em>
                </md-chip-template>
          </div>          
          <div class="md-chip-remove-container"> 
              <button class="md-chip-remove" 
                    ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)" 
                    type="button" 
                    aria-hidden="true" tabindex="-1"
                    id="uniqueButtonID">        
                    <md-icon md-svg-icon="md-close" aria-hidden="true"></md-icon>
             </button>
           </div>
        </md-chip>

        <div class="md-chip-input-container">        
               <input ng-model="$mdChipsCtrl.chipBuffer" 
                         ng-focus="$mdChipsCtrl.onInputFocus()" 
                         ng-blur="$mdChipsCtrl.onInputBlur()" 
                         ng-keydown="$mdChipsCtrl.inputKeydown($event)"
                         aria-label="Some label"
                         placeholder="Placeholder"
                         aria-describedby="deleteHintText_0">
               <div id="deleteHintText_0" style="display: none;">
                   Press delete to remove {{ lastChip.name }} 
               </div>
        </div>          
    </md-chips-wrap>
</md-chips>

The major differences are:

The input has aria-label, different from the placeholder (it should support both but default to copying from placeholder).
The input has aria-describedby pointing to a new hint text node telling a screen reader user that the delete key will remove the last chip added (with a unique name).
md-chip-remove buttons don't need visually-hidden text with aria-hidden and tabindex="-1".

marcysutton on 19 May 2015

👍1

@ThomasBurleson aria-label isn't making its way to the input in the chips demo that uses autocomplete. The static chips demo also throws a warning. Can you take a look at those?

marcysutton on 5 Jun 2015

@marcysutton @ThomasBurleson any progress on this?

ilanbiala on 22 Jul 2015

@ilanbiala - The team is focused and working very hard on features and issue resolution for v1.0. Issue comments posted requesting progress/status updates are not helpful.

ThomasBurleson on 23 Jul 2015

@ThomasBurleson this is marked for 0.11.0, which is the next release and the latest commit was made over a month ago, I'm trying to find out if any progress has been made that hasn't been reported or if there are issues and maybe someone from the community can help.

ilanbiala on 23 Jul 2015

👍1

I am scheduling some other chips issues for RC6 and will try to look at this then.