forwardjs 2015: choosing an accessible framework
TRANSCRIPT
![Page 1: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/1.jpg)
CHOOSING AN ACCESSIBLEUI FRAMEWORK
![Page 2: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/2.jpg)
2CONTACTChoosing an Accessible UI Framework
Gerard K. CohenFront-End Ux Architect/ Senior Accessibility LeadWells Fargo, Wholesale Technology Servicesemail:// [email protected]:// @gerardkcohen
![Page 3: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/3.jpg)
UI FRAMEWORKS
![Page 4: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/4.jpg)
HOW DO YOU KNOWWHICH ONE ISACCESSIBLE?
![Page 5: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/5.jpg)
MATERIALDESIGNLITE
![Page 6: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/6.jpg)
6TOPICSChoosing an Accessible UI Framework
FORMS
DIALOGS
TABS
TOOLTIPS
![Page 7: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/7.jpg)
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
![Page 8: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/8.jpg)
FORMS
![Page 9: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/9.jpg)
10FORM CRITERIAChoosing an Accessible UI Framework
FOCUS INDICATION
ERROR VALIDATION
PROPER LABELS/ GROUPING
COLOR CONTRAST
![Page 10: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/10.jpg)
TABS
![Page 11: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/11.jpg)
12TABS CRITERIAChoosing an Accessible UI Framework
FOCUS INDICATION
ARIA
KEYBOARD INTERACTION
COLOR CONTRAST
![Page 12: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/12.jpg)
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
![Page 13: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/13.jpg)
14TABS ARIAChoosing an Accessible UI Framework
STATES: ARIA-SELECTED
ROLES: TABPANEL, TABLIST, TAB
PROPERTIES: ARIA-CONTROLS
![Page 14: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/14.jpg)
DIALOGS
![Page 15: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/15.jpg)
16DIALOG CRITERIAChoosing an Accessible UI Framework
FOCUS INDICATION
ARIA
KEYBOARD INTERACTION
COLOR CONTRAST
![Page 16: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/16.jpg)
17DIALOG ARIAChoosing an Accessible UI Framework
ROLES: DIALOG, ALERTDIALOGPROPERTIES: ARIA-LABEL, ARIA-LABELLEDBY
![Page 17: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/17.jpg)
TOOLTIPS
![Page 18: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/18.jpg)
19TOOLTIP CRITERIAChoosing an Accessible UI Framework
COLOR CONTRAST
KEYBOARD INTERACTION
ARIA
![Page 19: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/19.jpg)
20TOOLTIP KEYBOARD INTERACTIONChoosing an Accessible UI Framework
ESCAPE TO HIDE
TAB KEY TO DISPLAY
![Page 20: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/20.jpg)
21TOOLTIP ARIAChoosing an Accessible UI Framework
PROPERTIES: ARIA-LABELLEDBY
ROLES: TOOLTIP
![Page 21: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/21.jpg)
SOLUTIONS
![Page 22: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/22.jpg)
FORMS
![Page 23: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/23.jpg)
24FORMS SOLUTIONChoosing an Accessible UI Framework
GROUP RELATED FIELDS WITHFIELDSET/ LEGEND
EXPLICITLY ASSOCIATE LABELSWITH INPUTS
CONVEY ERROR STATE ANDDESCRIPTION
![Page 24: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/24.jpg)
25VISUALLY HIDDEN CONTENTChoosing an Accessible UI Framework
FOUNDATION: .show-for-srBOOTSTRAP: .sr-only
![Page 25: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/25.jpg)
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;}
![Page 26: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/26.jpg)
TABS
![Page 27: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/27.jpg)
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
![Page 28: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/28.jpg)
29TABS SOLUTIONChoosing an Accessible UI Framework
Paypal Bootstrap Accessibility Plugin
http://paypal.github.io/bootstrap-accessibility-plugin/
![Page 29: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/29.jpg)
DIALOGS
![Page 30: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/30.jpg)
31DIALOG SOLUTIONChoosing an Accessible UI Framework
FOCUS SHOULD RETURN TO TRIGGER
CYCLE FOCUS WITHIN DIALOG
ROLE=“DIALOG”, ARIA-HIDDEN,ARIA-LABELLEDBY
![Page 31: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/31.jpg)
TOOLTIPS
![Page 32: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/32.jpg)
33TABS SOLUTIONChoosing an Accessible UI Framework
ROLE=“TOOLTIP”, ARIA-LABELLEDBY
DISPLAY ON FOCUS, ESC TO HIDE
![Page 33: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/33.jpg)
FUTURE OF FRAMEWORKS
![Page 34: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/34.jpg)
CONCLUSION
![Page 35: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/35.jpg)
36CONCLUSIONChoosing an Accessible UI Framework
YOU NEED TO FILL IN THE GAPS
CONTRIBUTE BACK
NO SILVER BULLET
SHARE YOUR KNOWLEDGE
![Page 36: ForwardJS 2015: Choosing an Accessible Framework](https://reader035.vdocuments.mx/reader035/viewer/2022070511/58a1cab71a28ab9d338b62ff/html5/thumbnails/36.jpg)
CHOOSING AN ACCESSIBLEUI FRAMEWORK