Accesibilidad para todos

Accesibilidad para todos.
Consejos y buenas prácticas.

QUIEN SOY
Luiz Celso
Chapter Lead and Techlead
Brasileño, apasionado por la tecnología (principalmente
por javascript), con más de 10 años de experiencia, viajes,
me gusta conocer nuevas culturas y mucho lorem ipsum
para la vida.
@_eucelsolcelso luizcelso

ACCESIBILIDAD EN TODO
EL MUNDO
Datos actuales

Un billón de personas, o
el 15% de la población
mundial, sufre algún tipo
de discapacidad.
Las personas con discapacidades, en promedio como grupo, tienen más
probabilidades de experimentar resultados socioeconómicos adversos que las
personas sin discapacidades.
Fuente: Worldbank,
Última actualización: 04 de abril de 2019

Una aplicación
más asequible.
Creando un
sitio en
paralelo
migración
de fluxo de
usuários
Reemplaz
o del sitio
antiguo
por el
nuevo.
Incremento
de 13
millones
de libras
de ventas
en 2005.

ACCESIBILIDAD
EN CHILE
Datos actuales (2015)

"En las instituciones a que se refiere el inciso anterior, que tengan
una dotación anual de 100 o más funcionarios o trabajadores, a lo
menos el 1% de la dotación anual deberán ser personas con
discapacidad o asignatarias de una pensión de invalidez de
cualquier régimen previsional. Las personas con discapacidad
deberán contar con la calificación y certificación que establece esta
ley."
Ley 21015
INCENTIVA LA INCLUSIÓN DE PERSONAS CON
DISCAPACIDAD AL MUNDO LABORAL
15/06/2017

En Chile, más de 800 mil
personas tienen discapacidad
visual.
En el mundo la cifra alcanza los
285 millones de personas
Fuentes: Censo 2012 y OMS

DESARROLLADORES
¿CÓMO NOSOTROS
podemos cambiar esto?

Consejo 1 - Usar la propiedad lang
Puede sonar tonto, pero muchas personas lo olvidan.
¿Y en qué ayuda?
Las personas con discapacidad visual utilizan el software de lectura de pantalla. La forma en que el lector
de pantalla hará que la pronunciación de la frase se vea afectada directamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
</head>
<body>
…
</body>
</html>

Consejo 2 - Formulários
<form>
<fieldset>
Nombre
<input type="text" name="fname" />
<label for="lastName">Apelido:</label>
<input type="text" id="lastName" name="lname" />
<label>
Fecha de nacimiento:
<input type="date" name="fNascimento" aria-describedby="comp" />
</label>
<div id="comp">
Te enviaremos un regalo, pon la fecha real.
</div>
<input type="submit" value="Enviar" />
</fieldset>
</form>

Consejo 3 - Outline (CSS)
.button {
outline: none
}
EVITA HACER ESTO.

Consejo 4 - :hover (CSS)
.button:focus,
.button:hover {
...
}
Siempre tienen el mismo
comportamiento para el focus.

Consejo 5 - TEXTO EN CAJA CAPITALIZADA Y ALTA
// HTML
<h2 class="title-contact">contactar</h2>
...
<h3 class="title-description">primero
cooder on beer javascript!!!</h3>
// CSS
.title-contact {
text-transform: uppercase;
font-weight: bold;
}
.title-description {
font-weight: italic;
text-transform: capitalize;
}
Resultado:
CONTACTAR
…
Primero Cooder On Beer Javascript

Consejo 6 - ALT en las imágenes
// HTML
<img src="meetup-angular-saopaulo.jpg"
alt="Personas reunidas al final del evento Angular São Paulo
- Brazil" />
Si una imagen
decorativa lo pone en
el css como
background-image.

Hablemos de daltonismo
¿Ves lo que veo?

Daltonismo
Simulación de frutas en el supermercado vistos por personas sin ceguera al color (izquierda) y con ceguera al
color (derecha). Mientras que las persianas que no son de color ven colores vívidos y distintos, las persianas
de color ven colores neutros y bajo contraste.

Accessible Rich Internet
Applications (WAI-ARIA)
Y sus Pautas

¿Qué es WAI-ARIA?
WAI (Web Accessibility Initiative) creada en 2008, una especificación para
ampliar las funciones de acceso web, especialmente HTML5.
WAI-ARIA existe para transmitir la semántica cuando el HTML nativo no
es suficiente.

DIFERENCIA ENTRE WCAG Y ARIA
WCAG
Utilizam a semântica do HTML
WAI-ARIA
Atributos
Adicionam semântica

TIPOS DE ATRIBUTOS
WAI-ARIA
Role / State / Properties

Role, Propiedades y Estados
ARIA le permite agregar semántica que invalida aquellos que los
elementos HTML y sus atributos proporcionan de forma nativa. Te
permite agregar un significado semántico al desarrollar algo de una
manera no estándar. Por ejemplo, utilizando un div o span para crear un
botón.
● Los Roles - Definen el propósito del componente en la interfaz.
● Las Propiedades - Definen las características del componente.
● Los Estados - Definen las condiciones actuales del componente

ROLE
● menu
● alert
● dialog
● footer
● button
● checkbox

PROPERTIES
● aria-labelledby
● aria-describedby
● aria-controls
● aria-label
● aria-atomic
● aria-autocomplete
● aria-haspopup

State
● aria-busy
● aria-disabled
● aria-hidden
● aria-invalid
● aria-checked
● aria-expanded
● aria-pressed

¿Cuándo hacer esto?
¡¡¡Desde el principio!!!

Centro
Av. Presidente Wilson,
231 - 29º andar
(21) 2240-2030
Cidade Monções
Av. Nações Unidas,
11.541 - 3º andar
(11) 4119-0449
Savassi
Av. Getúlio Vargas, 671
Sala 800 - 8º andar
(31) 3360-8900
www.concrete.com.b
r

Accesibilidad para todos

Recomendados

Recomendados

Más contenido relacionado

Similar a Accesibilidad para todos

Similar a Accesibilidad para todos (20)

Último

Último (20)

Accesibilidad para todos