Pensando en Accesibilidad - Shift7 - Córdoba, Argentina
•
1 like•527 views
Compartir las bases y buenas prácticas para la accesibilidad web.
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to Pensando en Accesibilidad - Shift7 - Córdoba, Argentina
Similar to Pensando en Accesibilidad - Shift7 - Córdoba, Argentina (20)
Recently uploaded
Recently uploaded (20)
Pensando en Accesibilidad - Shift7 - Córdoba, Argentina
- 1. Pensando en accesibilidad Hernán Garzón de la Roza
- 2. Agenda ● Definición y contexto ● Cómo afectan las diferentes discapacidades el acceso a la web ● Principios de diseño accesible (wcag) ● Prácticas de frontend (wai-aria)
- 3. “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee
- 4. Accesibilidad Percibir, entender, navegar, e interactuar con la web
- 5. Percibir: comprender o conocer algo.
- 6. Entender: tener idea clara de las cosas.
- 7. Navegar: desplazarse a través de una red informática.
- 8. Interaccionar: ejercer una interacción.
- 9. W eb A ccessibility I nitiative http://www.w3.org/WAI/
- 10. Contexto
- 11. Opinión de los profesionales de Accesibilidad Web
- 15. http://webaim.org/projects/practitionersurvey/ ¿Que tendría un mayor impacto sobre la accesibilidad?
- 16. http://webaim.org/projects/practitionersurvey/ ¿Porque los sitios web no son accesibles? ● Falta de conciencia sobre el tema (36%) ● Falta de conocimiento (36%) ● Falta de dinero o recursos (14%) ● Miedo a que la accesibilidad arruine el diseño o la funcionalidad (13%)
- 17. ¿Cómo usan la web las personas con discapacidad?
- 20. Sensorial: visual y auditiva
- 21. Lectores de voz teclados braille Subtítulos Sensorial: visual y auditiva
- 22. Discapacidad física o motora
- 24. Incapacidad neurológica, intelectual o cognitiva
- 25. Situaciones relacionadas con el envejecimiento
- 27. Principios de diseño accesible
- 29. Requisitos de conformidad visibilidad, operatividad, comprensividad y robustez.
- 33. Texto alternativo para imagenes http://webaim.org/techniques/alttext/ <img src="cart.jpg" alt="Proceed to checkout" />
- 34. Accesible con teclado <h1 role=”button”> text </h1> Name: <input name="name" tabindex="1" /> Age: <input name="age" tabindex="3" /> Email: <input name="email" tabindex="2" />
- 36. Distinguible
- 37. Distinguible
- 38. Distinguible
- 39. Adaptable
- 40. ● características de navegación ● navegar al contenido principal ● <title> ● orden del foco de elementos ● propósito de los links ● <headings> y <labels> ● foco de los elementos visible Navegable
- 41. WAI-ARIA
- 43. WAI ARIA ¿Como agregar información accesible a elementos HTML usando la especificación WAI-ARIA?
- 44. WAI ARIAPrimera regla de ARIA Usar elementos HTML5 nativos
- 45. WAI ARIASegunda regla de uso de ARIA No modificar la semántica nativa
- 47. MEJOR HACE ESTO... <h1><span role="button">heading button</span></h1>
- 48. O MEJOR, ¡ESTO! <h1><button>heading button</button></h1>
- 49. WAI ARIATercera regla de uso de ARIA Todos los elementos interactivos deben tener un nombre accesible
- 50. <!-- elemento que está etiquetado, pero no esta asociado al control que debería etiquetar --> user name <input type="text"> <label>user name</label> <input type="text">
- 51. <!-- Si usamos for/id envolviendo la etiqueta alrededor del texto y el control, vamos a tener un nombre accesible --> <label>user name <input type="text"></label> <label for="username">user name</label> <input type="text" id="username">
- 53. WAI ARIA ¿Que ocurre al agregar un role sobre la semántica nativa de un elemento HTML?
- 54. <h1 role=”button”> text </h1> <button> text </button>
- 55. WAI ARIA ¿Que NO hace?
- 56. <button role=”heading”> text </heading> <heading> text </heading>
- 57. ● Abstractos ● Componente (widget) ● Documento (document) ● de marca (Landmark) Categorización de los Roles
- 58. ROLES de componentes (widgets) WAI ARIA http://www.w3.org/TR/wai-aria/roles#widget_roles
- 59. - alert - alertdialog - button - checkbox - dialog - gridcell - link - log - marquee - menuitem - menuitemcheckbox - menuitemradio - option - progressbar - radio - scrollbar - slider - spinbutton - status - tab - tabpanel - textbox - timer - tooltip - treeitem
- 60. <img id="lbrb" alt="" src="ninja.png" width="150" class="ch- shownby-pointerenter" data-title="This is a tooltip" title="" aria-owns="ch-layer-23" aria-haspopup="true" data-side=" right" data-align="bottom" /> <div class="ch-popover ch-tooltip ch-cone" role="tooltip" id="ch- layer-23" style="z-index: 1070; width: auto; height: auto; position: absolute; top: 4751px; left: 1112px; display: block;" data-side="right" data-align="bottom" aria-hidden="false"> <div class="ch-popover-content">This is a tooltip</div> </div www.chico-ui.com.ar example widget roles: tooltip
- 61. ROLES de componentes que actúan como contenedores WAI ARIA http://www.w3.org/TR/wai-aria/roles#widget_roles
- 62. - combobox - grid - listbox - menu - menubar - radiogroup - tablist - tree - treegrid
- 64. example widget roles: tablist <ul class="ch-tabs-triggers" role="tablist"> <li><a href="#tab1-a" class="ch-tab ch-user-no-select ch- expandable-trigger-on" aria-controls="tab1-a" role="tab" >Tab1</a></li> <li><a href="#tab2-a" class="ch-tab ch-user-no-select" aria- controls="tab2-a" role="tab">Tab2</a></li> <li><a href="#tab3-a" class="ch-tab ch-user-no-select" aria- controls="tab3-a" role="tab">Tab3</a></li> <li><a href="/src/assets/ajax.html#ajax-a" class="ch-tab ch- user-no-select" aria-controls="ajax-a" role="tab">Tab4</a></li> </ul> www.chico-ui.com.ar
- 65. example widget roles: tabpanel <div class="ch-box-lite ch-tabs-panel" role="presentation"> <div id="tab1-a" class="ch-tabpanel" aria-expanded="true" role="tabpanel" aria-hidden="false"> <p>Lorem ipsum dolor sit amet...</p> </div> <div id="tab2-a" class="ch-hide ch-tabpanel" aria-expanded="false" role="tabpanel"> <p>content...</p> </div> <div id="tab3-a" class="ch-hide ch-tabpanel" aria-expanded="false" role="tabpanel"> <p>content...</p> </div> <div id="ajax-a" class="ch-tabpanel ch-hide" aria-expanded="false" role="tabpanel"></div> </div> www.chico-ui.com.ar
- 66. ROLES de documento (document) WAI ARIA http://www.w3.org/TR/wai-aria/roles#document_structure_roles
- 67. - article - columnheader - definition - directory - document - group - heading - img - list - listitem - math - note - presentation - region - row - rowgroup - rowheader - separator - toolbar Document ROLES
- 68. ROLES de marca (landmarks) WAI ARIA http://www.w3.org/TR/wai-aria/roles#landmark_roles
- 70. ”application” ”banner” “complementary” “contentinfo” ”form” “main” “navigation” “search” Aria Landmark Role HTML5 sectioning element No HTML5 equivalent No HTML5 equivalent <aside> Recommended <footer> Recommended neutral element <main> <nav> No HTML5 equivalent Use Application ROLE wisely!
- 71. WAI ARIA ● Atributos de componente ● Atributos de live region ● Atributos de drag and drop ● Atributos de relaciones Estados & Propiedades
- 72. WAI ARIA Atributos de componente - aria-autocomplete - aria-checked (state) - aria-disabled (state) - aria-expanded (state) - aria-haspopup - aria-hidden (state) - aria-invalid (state) - aria-label - aria-level - aria-multiline - aria-multiselectable - aria-orientation - aria-pressed (state) - aria-readonly - aria-required - aria-selected (state) - aria-sort - aria-valuemax - aria-valuemin - aria-valuenow - aria-valuetext Estados & Propiedades
- 73. <input id=”product” type=”text” name=”as_word” placeholder=”iphone 5” class=”autocomplete” data-side=”bottom” data-align=”left” aria-autocomplete=”list” aria-haspopup=”false” aria-owns=”ch-popover-2” aria-describedby=”autocomplete-info”> ejemplo estados y propiedades: autocomplete www.chico-ui.com.ar
- 74. <input id=”product” type=”text” name=”as_word” placeholder=”iphone 5” class=”autocomplete” data-side=”bottom” data-align=”left” aria-autocomplete=”list” aria-haspopup=”true” aria-owns=”ch-popover-2” aria-describedby=”autocomplete-info”> ejemplo estados y propiedades: autocomplete www.chico-ui.com.ar
- 75. <ul aria-expanded=”false” aria-hidden=”true” id=”ch-expandable”> <li>Collapsible</li> <li>Collapsible</li> <li>Link</li> <li>Collapsible</li> <li>Collapsible</li> </ul> ejemplo estados y propiedades: aria-hidden y aria-expanded www.chico-ui.com.ar
- 76. <ul aria-expanded=”true” aria-hidden=”false” id=”ch-expandable”> <li>Collapsible</li> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> <li>Collapsible</li> <li>Link</li> <li>Collapsible</li> <li>Collapsible</li> </ul> ejemplo estados y propiedades: aria-hidden y aria-expanded www.chico-ui.com.ar
- 77. Atributos de regiones “en vivo” - aria-atomic - aria-busy (state) - aria-live - aria-relevant WAI ARIA Estados & Propiedades
- 78. Atributos de Drag and drop - aria-dropeffect - aria-grabbed (state) Drag and drop interaction ideas WAI ARIA Estados & Propiedades
- 79. Atributos de relaciones - aria-activedescendant - aria-controls - aria-describedby - aria-flowto - aria-labeledby - aria-owns - aria-posinset - aria-setsize Estados & Propiedades WAI ARIA
- 80. <input id=”product” type=”text” name=”as_word” placeholder=”iphone 5” class=”autocomplete” data-side=”bottom” data-align=”left” aria-autocomplete=”list” aria-haspopup=”true” aria-owns=”ch-popover-2” aria-describedby=”autocomplete-info”> <p class=”ch-form-hint” id=”autocomplete-info”> This is working with the MercadoLIbre API</p> ejemplo estados y propiedades: autocomplete
- 83. Recursos
- 84. Questions?
- 85. Thank you :)
- 86. Hernán Garzón de la Roza @chertopjanov