Choosing an Accessible UI Framework

Presenter:  Gerard Cohen from Wells Fargo, Kevin Kalahiki

@gerardkcohen | Slide deck at SlideShare.net

This was my first session at the CSUN conference on Friday, March 6.  I’m getting off to a good start, definitely feeling better than last night.  My headache yesterday made me go up to my room about 4:00 PM, and I ended up sleeping until 10:00 PM, completely missing the reception.  D’oh!  I’ve got another full day of sessions, so let the coverage begin.  Every year, there seem to be more great sessions scheduled on the last day of the conference.

Choosing a framework is a serious decision, it’s something you’ll have to live with for at least a few years.  Ease of use, popularity, opinionated, customization, size, and of course accessibility are all considerations.  How do you know which one is accessible?

Frameworks that will be covered here

• Angular.js
• Bootstrap
• Foundation Zurb
• JQuery Mobile Framework

Other Topics Covered

• Documentation
• Forms
• Tabs
• Dialogs

Criteria

• Proper Labels / Descriptions
• Keyboard Navigation / Focus indication
• Color Contrast
• ARIA (is it being used properly?)

Documentation

• Angular 1.4 developer guide, ngAria; has accessibility patterns documented
• Bootstrap has a good accessibility page; skip to content, nested headings, etc.
• Foundation has an accessibility page, but it’s a little slim.  It’s pretty much copy/pasted from Bootstrap, with links to some other resources.
• JQuery Mobile does NOT have a specific accessibility page, but does have an “accessibly hidden labels” section.

Forms

• Easy to get right – and wrong.
• Error validation is typically customized because HTML5 validation (support) is lacking
• Proper labels / Grouping, Focus indication, Color contrast, Error validation
• Angular has a bad rap for accessibility documentation on forms.  Labels are not included on input fields by default.  However, a lot of work is being done with Angular Material Design.  Fields are not grouped together properly by default.  Required fields automatically show a color indication onFocus, but colors do not meet color contrast.
• Bootstrap:  error validation needs to be handled, does require some weird markup, color contrast issues
• JQuery Mobile:  their forms pass pretty much every check Gerard was looking for.

Tabs

• Criteria:  Keyboard interaction, focus indication, color contrast, ARIA
• Tab key focuses active tab
• Left/up for previous tab
• Right/down for next tab
• Arrow keys should cycle
• Roles;  tabpanel, tablist, tab
• States:  aria-selected
• Properties:  aria-controls
• Bootstrap (core) tabs:  arrow keys don’t work.  ARIA roles are done right, tabpanel is there, list of tabs is there,   Color contrast is also missing.
• Angular.js:  doesn’t come with any built-in widgets, you rely on material design.  Documentation isn’t there.  Arrow navigation works, but it doesn’t cycle around.  Does not activate tab when selected.
• JQuery Mobile:  was perfect…nailed it!
• Foundation:  has NO focus indications, but basic keyboard interaction is there (a little pointless if you can’t see where you are.  Also, you need to press enter to activate tab.

Dialogs

• Keyboard interaction, focus indication, color contrast, ARIA roles
• Tabs should remain within the dialog itself, esc is expected to dismiss dialog, enter should submit the form.
• Roles:  dialog, alertdialog
• Properties:  aria-label, aria-labelledby
• Foundation:  has a big note at the bottom that it is not accessible.  No roles assigned, tabbing doesn’t make it into the dialog.

Solutions

• Forms:  explicitly associate labels with inputs, group related fields with fieldset/legend, convey error state and description (each framework has classes to handle this)
• Tabs:  use PayPal accessibility plug-in
• Dialogs:  this is where I had to do the most work.  Cycle focus within dialog, focus should return to trigger
• Body content should also wrap

 Future of Frameworks

• None of the material design widgets will be released unless they are fully accessible
• Foundation is starting from scratch, specifically for accessibility v 6 should be available in June
• Next version of bootstrap is being refactored (Patrick Lauke from TPG is reworking this personally.)
• Anything you can do to help is greatly appreciated!