CHOOSING AN ACCESSIBLE UI FRAMEWORK
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
29TABS SOLUTIONChoosing an Accessible UI Framework
Paypal Bootstrap Accessibility Plugin
http://paypal.github.io/bootstrap-accessibility-plugin/
DIALOGS
16DIALOG CRITERIAChoosing an Accessible UI Framework
FOCUS INDICATION
ARIA
KEYBOARD INTERACTION
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
KEYBOARD INTERACTION
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
33TABS SOLUTIONChoosing an Accessible UI Framework
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
Related Documents
