Accessibility Audit

[kristoferjoseph]

Accessibility Aduit

@majornista Was kind enough to walk us through an audit of our demo page http://topcoat.io/topcoat

• Add labels - Topcoat.io drop down
• Update icon button for slide out menu in Topcoat.io to be a button *like all other topcoat buttons
• Add name to all inputs
• Add ids with comment to update them in your application
• Add examples for how to label inputs to add context for what property is manipulated
• Add display none to the item that is slid out of view for switch
• Add labels for icon button icons. Can use :before to add icon and offset the label text.
• Add min, max, and value for range
• Add label to search input *Invisible label for assistive technology
• Up the luminosity level for text 13px and lower 4+ contrast ratio
• Up the luminosity level for links 3/1 contrast ratio
• Add focus ring to all links on the demo http://topcoat.io/topcoat *We added it to our controls, but not generic links like the show / hide snipets
• Add aria-labels to tab bar to describe it as a tab group.
• Add aria-labels to tab item to describe what is active tab
• Add aria-labels to tab item to describe what number tab it is
• Add label to associate tab and content container
• Add hidden label to notification to add context as to what it is displaying for blind users
• Switch might not need On / Off label since it has both a color change and slide action to describe state change?

Tools used:

• Chrome
• Chrome Vox - voice over extension
• Firefox
• color checkin plugin *shooting for level AA
• snooks.ca colour contrast check: http://snook.ca/technical/colour_contrast/colour.html
• https://github.com/globant-ui/arialinter
• https://github.com/DuaneOBrien/A11YLint-Brackets
• Juicy studio Accessibility tool
• Wave toolbar https://addons.mozilla.org/en-us/firefox/addon/wave-toolbar/

[majornista]

Here's a CodePen http://codepen.io/majornista/pen/HEkdv that implements changes to the Tab Bar with a little jQuery plugin experiment so that the radio buttons are properly identified as tabs using WAI-ARIA. One important change is to use span rather than button for the tab label. The button becomes another tab stop that receives focus and interferes with a keyboard/screen reader user's operation of the control.

[kristoferjoseph]

Love it!
Was wondering why we had the double tab stop. Thanks!
I am really not a fan of all the JS needed to add aria attributes. Sad this is the only reliable way to be accessible :(

[majornista]

Actually, if you add the roles, ids, aria-labelledby and aria-controls attributes statically, the only javascript you need to worry about is for the on change event handler, which updates the aria-selected values on the tabs and the aria-hidden and hidden attributes of the tabpanels. You'd need javascript to display the appropriate tabpanel anyway.

[kristoferjoseph]

That sounds fine.
I was planning on using a sibling selector to add display: none to the tab panel to avoid js, but you are correct we would still need to add the accessibility attributes for the selected section.
Thanks for all the work on this. Very exciting to have an accessible tab set!

[majornista]

Simplified javascript with mostly static WAI-ARIA attributes: http://cdpn.io/bklzE. Also, for backward compatibility, I use fieldset and a hidden legend labeling the radio button group as a tablist.

[majornista]

@kristoferjoseph Does Topcoat have a generic label style that assigns the color for use with inputs? Radio button and checkbox labels have color: var-color, but there doesn't seem to be a style for a generic label.

[kristoferjoseph]

No, we haven't taken on a generic label yet. Have any suggestions?

[majornista]

I was just going to add .topcoat__label have it be an inline text element using color: var-color so that it matches the radio button and checkbox label text.

There's also a question as to how it should align with the inputs. .reset-input() sets vertical-align: top, which, depending on the input, could look off with inline labels.

Positioning of labels can often be application UI specific, so I'm not sure how far you'd want to go with providing classes for different types of positioning.