Embed Size (px)
Citation preview
Pensando en accesibilidad
Hernán Garzón de la Roza
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)
“The power of the web is in its universality. Access by everyone
regardless of disability is an essential aspect.”
Tim Berners-Lee
AccesibilidadPercibir, entender, navegar, e interactuar con la web
Percibir: comprender o conocer algo.
Entender: tener idea clara de las cosas.
Navegar: desplazarse a través de una red informática.
Interaccionar: ejercer una interacción.
Contexto
Opinión de los profesionales de
Accesibilidad Web
http://webaim.org/projects/practitionersurvey/
Región
http://webaim.org/projects/practitionersurvey/
Universo
http://webaim.org/projects/practitionersurvey/
Uso de Browsers
http://webaim.org/projects/practitionersurvey/
¿Que tendría un mayor impacto sobre la accesibilidad?
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%)
¿Cómo usan la web las personas con discapacidad?
¡Igual que todos!
Tipos de discapacidad
Sensorial: visual y auditiva
Lectores de vozteclados braille
Subtítulos
Sensorial: visual y auditiva
Discapacidad física o motora
Incapacidad del habla
Incapacidad neurológica, intelectual o cognitiva
Situaciones relacionadas con el envejecimiento
Principios de diseño accesible
WCAG
eb
ontent
ccessibility
uidelines
Requisitos de conformidadvisibilidad, operatividad, comprensividad y robustez.
WCAGconformance requirements
Level A
http://www.w3.org/WAI/WCAG2-Conformance
WCAGconformance requirements
Level AA
http://www.w3.org/WAI/WCAG2-Conformance
WCAGconformance requirements
Level AAA
http://www.w3.org/WAI/WCAG2-Conformance
Texto alternativo para imagenes
http://webaim.org/techniques/alttext/
<img src="cart.jpg" alt="Proceed to checkout" />
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" />
Legible
<html lang="en">
…
</html>
Distinguible
Distinguible
Distinguible
Adaptable
● 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
WAI-ARIA
WAi
ARiA
eb
ccessibility
nitative
ccesible
ich
nternet
pplications
WAI ARIA ¿Como agregar información accesible a elementos HTML usando la
especificación WAI-ARIA?
WAI ARIA Primera regla de ARIA
Usar elementos HTML5 nativos
WAI ARIA Segunda regla de uso de ARIA
No modificar la semántica nativa
NO<h1 role="button">heading button</h1>
MEJOR HACE ESTO...<h1><span role="button">heading button</span></h1>
O MEJOR, ¡ESTO!<h1><button>heading button</button></h1>
WAI ARIA Tercera regla de uso de ARIA
Todos los elementos interactivos deben tener un nombre accesible
<!-- 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">
<!-- 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">
WAI ARIA ¿Que ocurre al agregar un role sobre la semántica
nativa de un elemento HTML?
<h1 role=”button”> text </h1>
<button> text </button>
WAI ARIA ¿Que NO hace?
<button role=”heading”> text </heading>
<heading> text </heading>
● Abstractos
● Componente (widget)
● Documento (document)
● de marca (Landmark)
Categorización de los Roles
ROLES de componentes (widgets)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#widget_roles
- 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
<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
examplewidget roles: tooltip
ROLES de componentes que actúan como contenedoresWAI ARIA
http://www.w3.org/TR/wai-aria/roles#widget_roles
- combobox- grid- listbox- menu- menubar- radiogroup- tablist- tree- treegrid
examplewidget roles: tablist
examplewidget 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
examplewidget 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
ROLES de documento (document)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#document_structure_roles
- article- columnheader- definition- directory- document- group- heading- img- list
- listitem- math- note- presentation- region- row- rowgroup- rowheader- separator- toolbar
Document ROLES
ROLES de marca (landmarks)WAI ARIA
http://www.w3.org/TR/wai-aria/roles#landmark_roles
role=”banner”
role=”main”
role=”contentinfo”
role
=”na
viga
tion”
”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!
WAI ARIA
● Atributos de componente
● Atributos de live region
● Atributos de drag and drop
● Atributos de relaciones
Estados & Propiedades
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
<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”>
ejemploestados y propiedades: autocomplete
www.chico-ui.com.ar
<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”>
ejemploestados y propiedades: autocomplete
www.chico-ui.com.ar
<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>
ejemploestados y propiedades: aria-hidden y aria-expanded
www.chico-ui.com.ar
<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>
ejemploestados y propiedades: aria-hidden y aria-expanded
www.chico-ui.com.ar
Atributos de regiones “en vivo”
- aria-atomic- aria-busy (state)- aria-live- aria-relevant
WAI ARIA Estados & Propiedades
Atributos de Drag and drop
- aria-dropeffect- aria-grabbed (state)
Drag and drop interaction ideas
WAI ARIA Estados & Propiedades
Atributos de relaciones
- aria-activedescendant- aria-controls- aria-describedby- aria-flowto- aria-labeledby- aria-owns- aria-posinset- aria-setsize
Estados & PropiedadesWAI ARIA
<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>
ejemploestados y propiedades: autocomplete
Soporte de Browsershttp://stevefaulkner.github.io/html-mapping-tests/
Recursos
Questions?
Thank you :)
Hernán Garzón de la Roza
@chertopjanov
