Accesibilidad Web y Drupal

Accesibilidad web y Drupal
Iván Mejía

Accesibilidad
Al hablar de accesibilidad Web se está haciendo referencia a un diseño Web, que va
a permitir que estas personas puedan percibir, entender, navegar e interactuar con la
Web aportando contenidos. La accesibilidad Web también beneficia a otras
personas, incluyendo adultos mayores que han visto mermadas sus capacidades a
consecuencia de la edad.
Un sitio Web accesible es aquel que puede ser utilizado correctamente por el mayor
número posible de usuarios, incluyendo a personas con diferentes tipos de
discapacidad e independientemente de los medios técnicos.
conapred.org.mx

Accesibilidad
La "accesibilidad web" se centra principalmente en hacer que la web sea
accesible para personas con discapacidades. La accesibilidad también hace
que la web sea más utilizable para:

• Usuarios mayores con necesidades de accesibilidad debido al
envejecimiento.

• Personas con conexiones de bajo ancho de banda.

• Personas que usan hardware y software antiguos

• Personas que son nuevos usuarios de internet.

• Personas que utilizan dispositivos móviles para acceder a la web.

• Personas que no dominan el idioma del sitio web.

https://www.w3.org/WAI/presentations/2008/2008-06June-MalaysiaUPS

Discapacidad
▪ Discapacidades sensoriales
▪ Pérdida de visión parcial o total.
▪ Incapacidad parcial o total de captar sonidos.
▪ Discapacidades motrices
▪ Falta de coordinación.
▪ Problemas nerviosos.
▪ Carencia de algún miembro.
▪ Discapacidad cognitiva
▪ Dificultad en la compresión.
▪ Problemas para la asimilación de información.
▪ Edad avanzada.
▪ Discapacidad tecnológica
▪ Desconocimiento de la tecnología (nuevos analfabetos).
▪ Falta de medios tecnológicos adecuados.

Accesibilidad Web
Código

Contenido

Diseño

¿Quién deﬁne la Accesibilidad?
https://www.w3.org/TR/WCAG21/
http://www.sidar.org/traducciones/wcag20/es/
https://www.w3.org/TR/?status=cr

Web Content Accessibility Guidelines
WCAG
WAI
Web Accessibility Initiative
https://www.w3.org/WAI/
https://www.w3.org/WAI/standards-guidelines/
https://www.w3.org/WAI/tutorials/page-structure/
Tutoriales

Los cuatro principios
1.Perceptibilidad - La información y los componentes de la
interfaz de usuario deben presentarse a los usuarios de la
manera en que puedan percibirlos. : 4 pautas y 29 criterios de
cumplimiento.
2.Operabilidad - Los componentes de la interfaz de usuario y la
navegación deben ser operables. : 5 pautas y 29 criterios de
cumplimiento.
3.Comprensibilidad - La información y el manejo de la interfaz de
usuario deben ser comprensibles. : 3 pautas y 17 criterios de
cumplimiento.
4.Robustez - El contenido debe ser lo suficientemente robusto
como para confiarse en su interpretación por parte de una
amplia variedad de agentes de usuario, incluidas las
tecnologías asistivas. : 1 pauta y 3 criterios de cumplimiento.

Nivel de conformidad
•Nivel A: Para lograr conformidad con el Nivel A (el
mínimo), la página web satisface todos los Criterios de
Conformidad del Nivel A, o proporciona una versión
alternativa conforme.

•Nivel AA: Para lograr conformidad con el Nivel AA, la
página web satisface todos los Criterios de Conformidad
de los Niveles A y AA, o proporciona una versión
alternativa conforme al Nivel AA.

•Nivel AAA: Para lograr conformidad con el Nivel AAA, la
página web satisface todos los Criterios de Conformidad
de los Niveles A, AA y AAA, o proporciona una versión
alternativa conforme al Nivel AAA.

Nivel de conformidad
• Páginas completas: La conformidad (y los niveles de conformidad) se
aplican a las páginas web completas, y no pueden ser alcanzadas si se
excluye una parte de la página.
• Procesos completos: Cuando una página web es parte de una serie de
páginas web que presentan un proceso (es decir, una secuencia de pasos
que es necesario completar para realizar una actividad), todas las páginas
en ese proceso deben ser conformes con el nivel especificado o uno
superior. (No es posible lograr conformidad con un nivel en particular si una
de las páginas del proceso no cumple con ese nivel o uno superior).
• Uso exclusivo de tecnologías de modo compatible con la
accesibilidad: Sólo se puede depender de las tecnologías usadas de forma
compatible con la accesibilidad para satisfacer los criterios de conformidad.
Toda información o funcionalidad que se proporcione de una forma que no
sea compatible con la accesibilidad debe estar disponible de una forma que
sí sea compatible con la accesibilidad.
• Además, los siguientes criterios de conformidad se aplican a todo el
contenido de la página, incluyendo el contenido del que, de todos modos, no
se depende para alcanzar la conformidad, ya que su incumplimiento puede
interferir con el uso de la página:
•1.4.2 - Control del audio,
•2.1.2 - Sin trampas para el foco del teclado,
•2.3.1 - Umbral de tres destellos o menos, y
•2.2.2 - Poner en pausa, detener, ocultar.

Accesibilidad
Código

Contenido

Diseño

Puntos a cubrir
Perceptibilidad -

4 pautas y 29 criterios de cumplimiento.

Operabilidad -


Comprensibilidad -


Robustez -

1 pauta y 3 criterios de cumplimiento.
• 12 pautas que funcionan
como objetivos para ser
cumplidos.
• Cada pauta tiene criterios
que permiten cumplirla.
• No todos los sitios
requieren cumplir todas
las pautas, pero muchos
sitios requieren cumplir
con la mayoría.

Puntos a cubrir
1 Perceptible
1.1 Proporcionar alternativas textuales para todo contenido no textual de modo
que se pueda convertir a otros formatos que las personas necesiten, tales como
textos ampliados, braille, voz, símbolos o en un lenguaje más simple.

1.2 Medios tempodependientes: proporcionar alternativas para los medios
tempodependientes.

1.3 Crear contenido que pueda presentarse de diferentes formas (por ejemplo,
con una disposición más simple) sin perder información o estructura.

1.4 Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el
primer plano y el fondo.

Ejemplos nivel A
Las imágenes con contenidos deberán
tener un texto alternativo. 
 
Código de ejemplo:
<img src="teatrodegollado.jpg"
alt=“Teatro Degollado en
Guadalajara.” />
1.1.1 Contenido no textual: Todo contenido no
textual que se presenta al usuario tiene una alternativa
textual que cumple el mismo propósito, excepto en las
situaciones enumeradas a continuación. (Nivel A)

Ejemplos nivel A
1.1.1 Contenido no textual: Todo contenido no
textual que se presenta al usuario tiene una alternativa
textual que cumple el mismo propósito, excepto en las
situaciones enumeradas a continuación. (Nivel A)

https://webdesign.tutsplus.com/es/articles/accessibility-basics-designing-for-visual-impairment--cms-27634

Ejemplos nivel A y NivelAA
Video y audio
Requiere transcripción
En nivel doble AA
Se requiere subtítulos (caption)
https://www.w3.org/WAI/perspective-videos/keyboard/
Pauta 1.2 Medios tempodependientes:
Proporcionar alternativas para los medios
tempodependientes.

1.4.1 Uso del color: El color no se usa como único medio
visual para transmitir la información, indicar una acción,
solicitar una respuesta o distinguir un elemento visual.
(Nivel A)

Ejemplo ligas

https://www.accessibilityoz.com/2014/02/links-and-accessibility/

1.4.1 Uso del color: El color no se usa como único medio
visual para transmitir la información, indicar una acción,
solicitar una respuesta o distinguir un elemento visual.
(Nivel A)

Ejemplo ligas

<a href="http://www.google.com/"
target="_blank">Google
<span class="sr-only">Opens in new window</span>
<i aria-hidden="true" class="fa fa-edit fa-
external-link"></i>
</a>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
HTML CSS

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
https://webaim.org/resources/contrastchecker/
1.4.3 Contraste (mínimo): La presentación visual
de texto e imágenes de texto tiene una relación de contraste de, al
menos, 4.5:1, excepto en los siguientes casos: (Nivel AA)
• Textos grandes: Los textos de gran tamaño y las imágenes de
texto de gran tamaño tienen una relación de contraste de, al menos,
3:1. 
• Incidental: Los textos o imágenes de texto que forman parte de
un componente inactivo de la interfaz de usuario, que son simple
decoración, que no resultan visibles para nadie o forman parte de
una imagen que contiene otros elementos visuales signiﬁcativos, no
tienen requisitos de contraste. 
• Logotipos: El texto que forma parte de un logo o nombre de marca
no tiene requisitos de contraste mínimo.

Puntos a cubrir
2 Operable
2.1 Proporcionar acceso a toda la funcionalidad mediante el teclado.

2.2 Proporcionar a los usuarios el tiempo suﬁciente para leer y usar el contenido.

2.3 No diseñar contenido de un modo que se sepa podría provocar ataques,
espasmos o convulsiones.

2.4 Proporcionar medios para ayudar a los usuarios a navegar, encontrar
contenido y determinar dónde se encuentran.

Pauta 2.1.1. Todas las opciones del contenido serán controlables
mediante teclado y serán independientes del tiempo, excepto
cuando las tareas requieran una interacción secuencia temporal

Headings
El anidado de encabezado debe ser por su rango (o nivel). El
encabezado más importante tiene el rango 1 (<h1>), el encabezado
menos importante rango 6 (<h6>). Los encabezados con un rango
igual o superior inician una nueva sección, los encabezados con un
rango inferior inician nuevas subsecciones que forman parte de la
sección de mayor clasiﬁcación.
https://www.w3.org/WAI/tutorials/page-structure/headings/
http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms
Pauta 2.4 Navegable: Proporcionar medios para ayudar
a los usuarios a navegar, encontrar contenido y
determinar dónde se encuentran.

2.4.6 Encabezados y etiquetas: Los encabezados y etiquetas describen el tema o propósito. (Nivel AA)

Headings
https://www.w3.org/WAI/tutorials/page-structure/headings/
http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms

2.4.7 Foco visible: Cualquier interfaz de usuario operable por teclado
tiene una forma de operar en la cuál el indicador del foco del teclado
resulta visible. (Nivel AA)

Principio y pautas
3 Comprensible
3.1 Hacer que los contenidos textuales resulten legibles y comprensibles.
3.2 Hacer que las páginas web aparezcan y operen de manera predecible.
3.3 Ayudar a los usuarios a evitar y corregir los errores.

3.1.5 Nivel de lectura: Cuando un texto requiere un
nivel de lectura más avanzado que el nivel mínimo
de educación secundaria una vez que se han
eliminado nombres propios y títulos, se proporciona
un contenido suplementario o una versión que no
requiere un nivel de lectura mayor a ese nivel
educativo. (Nivel AAA)

3.2.3 Navegación coherente: Los mecanismos de
navegación que se repiten en múltiples páginas
web dentro de un conjunto de páginas web aparecen
siempre en el mismo orden relativo cada vez que se
repiten, a menos que el cambio sea provocado por el
propio usuario. (Nivel AA)

Puntos a cubrir
4 Robusto
4.1 Maximizar la compatibilidad con las aplicaciones de
usuario actuales y futuras, incluyendo las ayudas técnicas.

Puntos a cubrir
4.1.1 Procesamiento: En los contenidos implementados mediante el uso de
lenguajes de marcas, los elementos tienen las etiquetas de apertura y cierre
completas; los elementos están anidados de acuerdo a sus especiﬁcaciones;
los elementos no contienen atributos duplicados y los ID son únicos, excepto
cuando las especiﬁcaciones permitan estas características. (Nivel A).
Nota: Las etiquetas de apertura y cierre a las que les falte un carácter crítico
para su formación, como un signo de "mayor qué", o en las que falten las
comillas de apertura o cierre en el valor de un atributo, no se consideran
completas.
https://validator.w3.org/

Accessible Rich Internet Applications
ARIA
https://developer.mozilla.org/es/docs/Web/
Accessibility/ARIA
Define cómo realizar contenido Web y
aplicaciones Web (especialmente las
desarrolladas con Ajax y JavaScript) más
accesibles a personas con discapacidades.
Por ejemplo, ARIA posibilita puntos de navegación
accesibles, widgets JavaScript, sugerencias en
formularios y mensajes de error, actualizaciones
en directo, y más.
https://www.youtube.com/watch?v=o4xHfi4t9S0&list=PLWjCJDeWfDdcEtSnqq_iGLKGA_H_3o3y7
https://www.w3.org/TR/wai-aria-practices-1.1/#intro

Ejemplo Aria
Landmarks Aria
https://w3c.github.io/aria-practices/examples/landmarks/index.html
Proporcionan una forma eficaz de
identificar la organización y la
estructura de una página web
• Banner

• Complementary

• Contentinfo

• Form

• Main

• Navigation

• Search

• Region
http://www.d.umn.edu/itss/training/online/structure/landmarks/

Accesibilidad en Drupal
1- Semántico (HTML 5 y Aria)
2- Alt text por default
3- Hidden elements
“hidden“: ocultar un elemento visualmente y de lectores de pantalla;
“hidden“visually-“: ocultar un elemento solo visualmente pero disponible para
lectores de pantalla;
“invisible“: Ocultar un elemento visualmente y de los lectores de pantalla sin
afectar el diseño.
4- Temas como boostrap con etiquetas Aria.
5- Facilidad para trabajar con twig y preprocess para agregar etiquetado.
https://www.drupal.org/docs/8/accessibility

Limitantes
Accesibilidad en Drupal
1- No todos los módulos contribuidos contemplan la
accesibilidad.
2- Formas requieren ajustes
3- Contenido creado con el editor requieren ser
revisado.
4- Cuidado con funcionalidad/módulos como carrusel

Herramientas
http://wave.webaim.org
https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
Wave, sitio web accesibilidad.
AXE, extensión de chrome
Herramientas de desarrollo
En Chrome.
https://validator.w3.org/
Validador HTML

Lectores
https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn
https://www.nvaccess.org/download/
Chromevox, extension de voz en chrome
NVDA, Lector windows
https://www.nvaccess.org/download/
ORCA, Linux
https://www.apple.com/accessibility/mac/vision/
Voiceover, MACOS

Ejemplos de sitio web accesibles
www.canada.ca
Gobierno de Canada
www.ssa.gov
Social security. USA
www.nsw.gov.au
New South Wales
Gobierno de New

Accesibilidad Web y Drupal

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Accesibilidad Web y Drupal

Ähnlich wie Accesibilidad Web y Drupal (20)

Mehr von Medio y forma

Mehr von Medio y forma (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (16)

Accesibilidad Web y Drupal