Pensando en Accesibilidad - Shift7 - Córdoba, Argentina

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

Accesibilidad
Percibir, 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.

W eb
A ccessibility
I nitiative
http://www.w3.org/WAI/

Opinión de los
profesionales de
Accesibilidad Web

http://webaim.org/projects/practitionersurvey/
Región

Universo

Uso de Browsers

¿Que tendría un mayor impacto sobre la accesibilidad?

¿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?

Lectores de voz
teclados braille
Subtítulos
Sensorial: visual y auditiva

Incapacidad neurológica, intelectual o
cognitiva

Situaciones relacionadas con el
envejecimiento

Principios de diseño accesible

W
C
A
G
eb
ontent
ccessibility
uidelines

Requisitos de conformidad
visibilidad, operatividad, comprensividad y robustez.

WCAGconformance requirements
Level A
http://www.w3.org/WAI/WCAG2-Conformance

Level AA

Level AAA

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>

● 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

W
A
i
A
R
i
A
eb
ccessibility
nitative
ccesible
ich
nternet
pplications

WAI ARIA
¿Como agregar información accesible a elementos HTML usando la
especificación WAI-ARIA?

WAI ARIAPrimera regla de ARIA
Usar elementos HTML5 nativos

WAI ARIASegunda 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 ARIATercera regla de uso de ARIA
Todos los elementos interactivos deben tener un
nombre accesible

user name <input type="text">
<label>user name</label> <input type="text">

<label>user name <input type="text"></label>
<label for="username">user name</label> <input
type="text" id="username">

WAI ARIA
ROLES
http://www.w3.org/TR/wai-aria/roles

WAI ARIA
¿Que ocurre al agregar un role sobre la semántica
nativa de un elemento HTML?

● 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
example
widget roles: tooltip

ROLES de componentes que actúan como contenedores
WAI ARIA
http://www.w3.org/TR/wai-aria/roles#widget_roles

- combobox
- grid
- listbox
- menu
- menubar
- radiogroup
- tablist
- tree
- treegrid

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

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

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=”navigation”

”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

<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

<input
id=”product”
type=”text”
name=”as_word”
aria-haspopup=”true”
ejemplo
www.chico-ui.com.ar

<ul aria-expanded=”false” aria-hidden=”true”
id=”ch-expandable”>
<li>Collapsible</li>
<li>Link</li>
</ul>
ejemplo
estados y propiedades: aria-hidden y aria-expanded
www.chico-ui.com.ar

<ul aria-expanded=”true” aria-hidden=”false”
id=”ch-expandable”>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<li>Link</li>
</ul>
ejemplo
estados 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

Atributos de Drag and drop
- aria-dropeffect
- aria-grabbed (state)
Drag and drop interaction ideas
WAI ARIA

Atributos de relaciones
- aria-activedescendant
- aria-controls
- aria-describedby
- aria-flowto
- aria-labeledby
- aria-owns
- aria-posinset
- aria-setsize
WAI ARIA

<input
id=”product”
type=”text”
name=”as_word”
aria-haspopup=”true”
<p class=”ch-form-hint” id=”autocomplete-info”> This is working with the MercadoLIbre API</p>
ejemplo

Soporte de Browsershttp://stevefaulkner.github.io/html-mapping-tests/

Hernán Garzón de la Roza
@chertopjanov

Pensando en Accesibilidad - Shift7 - Córdoba, Argentina

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

Similar a Pensando en Accesibilidad - Shift7 - Córdoba, Argentina

Similar a Pensando en Accesibilidad - Shift7 - Córdoba, Argentina (20)

Último

Último (19)

Pensando en Accesibilidad - Shift7 - Córdoba, Argentina