AHG 2015 Choosing an Accessible UI Framework

CHOOSING AN ACCESSIBLEUI FRAMEWORK

2CONTACTChoosing an Accessible UI Framework

Gerard K. CohenFront-End Ux Architect/ Senior Accessibility LeadWells Fargo, Wholesale Technology Servicesemail:// [email protected]:// @gerardkcohen

UI FRAMEWORKS

HOW DO YOU KNOWWHICH ONE ISACCESSIBLE?

MATERIALDESIGNLITE

6TOPICSChoosing an Accessible UI Framework

FORMS

DIALOGS

TABS

TOOLTIPS

7CRITERIAChoosing an Accessible UI Framework

KEYBOARD NAVIGATION/ FOCUS INDICATION

ARIA(http://www.w3.org/TR/wai-aria-practices/#aria_ex)

PROPER LABELS/ DESCRIPTIONS

COLOR CONTRAST

FORMS

10FORM CRITERIAChoosing an Accessible UI Framework

FOCUS INDICATION

ERROR VALIDATION

PROPER LABELS/ GROUPING

COLOR CONTRAST

FORMS SOLUTION

24FORMS SOLUTIONChoosing an Accessible UI Framework

GROUP RELATED FIELDS WITHFIELDSET/ LEGEND

EXPLICITLY ASSOCIATE LABELSWITH INPUTS

CONVEY ERROR STATE ANDDESCRIPTION

25VISUALLY HIDDEN CONTENTChoosing an Accessible UI Framework

FOUNDATION: .show-for-srBOOTSTRAP: .sr-only

26VISUALLY HIDDEN CONTENTChoosing an Accessible UI Framework

.u-hiddenVisually { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

TABS

12TABS CRITERIAChoosing an Accessible UI Framework

FOCUS INDICATION

ARIA

KEYBOARD INTERACTION

COLOR CONTRAST

13TABS KEYBOARD INTERACTIONChoosing an Accessible UI Framework

LEFT/ UP FOR PREVIOUS TAB

ARROW KEYS SHOULD CYCLE

TAB KEY FOCUSES ACTIVE TAB

RIGHT/ DOWN FOR NEXT TAB

14TABS ARIAChoosing an Accessible UI Framework

STATES: ARIA-SELECTED

ROLES: TABPANEL, TABLIST, TAB

PROPERTIES: ARIA-CONTROLS

TABS SOLUTION

28TABS SOLUTIONChoosing an Accessible UI Framework

LEFT/ UP FOR PREVIOUS TAB

ARROW KEYS SHOULD CYCLE

TAB KEY FOCUSES ACTIVE TAB

RIGHT/ DOWN FOR NEXT TAB


Paypal Bootstrap Accessibility Plugin

http://paypal.github.io/bootstrap-accessibility-plugin/

DIALOGS

16DIALOG CRITERIAChoosing an Accessible UI Framework

FOCUS INDICATION

ARIA


COLOR CONTRAST

17DIALOG ARIAChoosing an Accessible UI Framework

ROLES: DIALOG, ALERTDIALOGPROPERTIES: ARIA-LABEL, ARIA-LABELLEDBY

DIALOGS SOLUTION

31DIALOG SOLUTIONChoosing an Accessible UI Framework

FOCUS SHOULD RETURN TO TRIGGER

CYCLE FOCUS WITHIN DIALOG

ROLE=“DIALOG”, ARIA-HIDDEN,ARIA-LABELLEDBY

TOOLTIPS

19TOOLTIP CRITERIAChoosing an Accessible UI Framework

COLOR CONTRAST


ARIA

20TOOLTIP KEYBOARD INTERACTIONChoosing an Accessible UI Framework

ESCAPE TO HIDE

TAB KEY TO DISPLAY

21TOOLTIP ARIAChoosing an Accessible UI Framework

PROPERTIES: ARIA-LABELLEDBY

ROLES: TOOLTIP

TOOLTIP SOLUTION


ROLE=“TOOLTIP”, ARIA-LABELLEDBY

DISPLAY ON FOCUS, ESC TO HIDE

FUTURE OF FRAMEWORKS

CONCLUSION

36CONCLUSIONChoosing an Accessible UI Framework

YOU NEED TO FILL IN THE GAPS

CONTRIBUTE BACK

NO SILVER BULLET

SHARE YOUR KNOWLEDGE

CHOOSING AN ACCESSIBLEUI FRAMEWORK