Making Accessible Ember Components

Transcript

1. Making Accessible Ember Components I’m Josh I work at Uniiverse && @jdjkelly robotfuture.net
2. What are components? Web Components Templates, Custom elements, Imports, Shadow DOM Ember Components Templates/Layouts, Ember.Component, Resolver, ??? An Ember.Component might look like this: A p p . N a m e T a g C o m p o n e n t = E m b e r . C o m p o n e n t . e x t e n d ( { a c t i o n s : { h e l l o : f u n c t i o n ( n a m e ) {
3. a l e r t ( n a m e ) ; } } } ) ; Its template might look like this: < d i v { { a c t i o n ' h e l l o ' p e r s o n . n a m e } } > H i , m y n a m e i s { { p e r s o n . n a m e } } < / b u t t o n > It might be instantiated like this: { { n a m e - t a g p e r s o n = c u r r e n t _ u s e r } }
4. What is accessibility? “Screen readers don’t work with Javascript” Wrong, wrong, wrong. Screen readers Demo
5. only care about DOM. ⌘-F5 WAI-ARIA Accessible Rich Internet Applications
6. Sounds like Ember, right? Architecture
7. Roles & States/Properties
8. Roles allows the author to annotate host languages with machine- extractable semantic information about the purpose of an element Or: the purpose of an element in the DOM Simplest possible example: < d i v r o l e = " b u t t o n " > C l i c k m e < / d i v >
9. Basic a l e r t a l e r t d i a l o g b u t t o n c h e c k b o x d i a l o g g r i d c e l l l i n k l o g m a r q u e e m e n u i t e m m e n u i t e m c h e c k b o x m e n u i t e m r a d i o o p t i o n p r o g r e s s b a r r a d i o s c r o l l b a r s l i d e r s p i n b u t t o n s t a t u s t a b t a b p a n e l t e x t b o x t i m e r t o o l t i p t r e e i t e m Complex combobox grid listbox menu menubar radiogroup tablist tree treegrid An example of a component with parent and child roles is a menu:
10. < a w e s o m e - n a v r o l e = " m e n u " > < d i v r o l e = " m e n u i t e m " > I t e m o n e < / d i v > < d i v r o l e = " m e n u i t e m " > I t e m t w o < / d i v > < / a w e s o m e - n a v > States/Properties What meaningful properties does this object have at this time? < a w e s o m e - n a v r o l e = " m e n u " a r i a - e x p a n d e d = " t r u e " > < d i v r o l e = " m e n u i t e m " > I t e m o n e < / d i v > < d i v r o l e = " m e n u i t e m " > I t e m t w o < / d i v > < / a w e s o m e - n a v >
11. Roles communicate the purpose of the component to the assistive software. States communicate the state of the current state of the component. Applying ARIA to Ember
12. Role support is built-in Taco Button Component example taco-button-component.js A p p . T a c o B u t t o n C o m p o n e n t = E m b e r . C o m p o n e n t . e x t e n d ( { t a g N a m e : ' t a c o - b u t t o n ' ,
13. n a m e B i n d i n g : ' t a c o . n a m e ' , a t t r i b u t e B i n d i n g s : [ ' l a b e l : a r i a - l a b e l ' , ' t a b i n d e x ' ] , a n s w e r : f a l s e , l a b e l : f u n c t i o n ( ) { r e t u r n " A r e " + t h i s . g e t ( ' n a m e ' ) + " t a c o s t a s t y ? " ; } . p r o p e r t y ( ' n a m e ' ) , t a b i n d e x : - 1 , a r i a R o l e : ' b u t t o n ' , c l i c k : f u n c t i o n ( e v e n t ) { a l e r t ( ' Y e s ' ) ; } , k e y D o w n : f u n c t i o n ( e v e n t ) { i f ( e v e n t . k e y C o d e = = 1 3 | | e v e n t . k e y C o d e = = 3 2 ) { t h i s . c l i c k ( e v e n t ) ; } } } ) ;
14. components/taco-button.hbs { { l a b e l } } index.hbs { { t a c o - b u t t o n t a c o = m o d e l } } Rendered DOM < t a c o - b u t t o n a r i a - l a b e l = " A r e s p i c y t a c o s t a s t y ? " t a b i n d e x = " 1 " r o l e = " b u t t o n " > A r e s p i c y t a c o s t a s t y ? < / t a c o - b u t t o n >
15. Compare What about something more complex? Accessible Example Inaccessible Example ic-menu
16. Buffer slide A note about future proofing What’s the shadow DOM? Is the Shadow DOM keyboard navigable? So when Ember Components implement Shadow DOM will they still be accessible? Thanks! Come see an expanded version of this talk at && Toronto Javascript on June 23 notes slides