Accesibilidad: Herramientas de evaluación WCAG 2.2

Complementando las clases, tanto presenciales como grabadas, proponemos a continuación un compendio de lecturas breves sobre los temas tratados en el curso.

La inclusión de un material no implica una valoración del mismo como “bueno”, sino la convicción de que los conceptos y propuestas que maneja disparará ideas e intercambios interesantes, que contribuirán a un aprovechamiento mejor del curso.

Introducción a la Accesibilidad

Módulo 1

Marcado HTML

Módulo 2

• Pautas para texto alternativo (especificación HTML5)
• Tutoriales de la WAI sobre imágenes
• Ejemplos de uso del <figcaption> y otras técnicas para maquetar epígrafes
• Ejemplos cotidianos en Twitter
• Todo sobre insertar SVG en forma accesible
• SVG accesible más allá de lo técnico
• Guía de Accesibilidad de la Font Awesome
• Adrian Roselli – My priority of methods for labeling a control
• La importancia de encabezados en Accesibilidad (video)
• ¿Por qué encabezados y puntos de referencia? (Video)
• A heading used only for visual effect
• Using WAI-ARIA Landmarks
• Accesible Landmarks
• Receta para hacer un bizcocho de vainilla
• Introducción al uso de tabindex
• Developing a Keyboard interface
• Adrian Roselli – Orden de HTML vs. orden de visualización dada a través de CSS
• Pautas de Accesibilidad para el contenido Web versión 2.0 en español
• Pautas de Accesibilidad para el contenido Web versión 2.1 en inglés
• Essential components of Web Accessibility
  

Diseño Accesible

Módulo 3

• Sobre Daltonismo
  • ¿Qué es el daltonismo y cómo funciona?
  • Test Ishihara online
  • Jakob Nielsen – End of Web Design
  • Yannis Abelas – ¿Carrito, bolsa o canasto?
  • El desafío del color de X-Rite y la prueba Hue
  • Use of color – Understanding SC 1.4.1
  • BBC Online Football Tables
  • European Championship Table
  • Trello colorblind friendly mode
  • Geri Coady – A pocket guide to colour accessibility
  • ColorBrewer: Color advice for cartography
  • Cómo hacer figuras y presentaciones que sean amigables para personas daltónicas
  • Silktide: Disability simulator for the web
  • Stark: plugin para Figma, Sketch y Adobe XD que permite simular daltonismo
• Sobre Contraste
  • Contrast – W3C: Understanding Success Criterion 1.4.3.
  • G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
  • Contrast checker
  • Tanaguru contrast finder
  • Material Design: Color tool
  • Contrast ratio
  • Contrast ratio in the Color Picker
  • WCAG Contrast checker by Rumoroso
  • Controlador de contraste de enlaces WebAIM
  • Colour contrast analyzer para Chrome (plugin)
  • Modo Alto Contraste (Windows)
• Human Interface Guidelines (by Apple)
• Material Design System – Accessibility
• Accessibility Inspector (Video)
• iOS Accessibility: Getting started
• Visual Design Accessibility
• Tutorial para descargar UIAutomatorViewer
• Deque Attest (solo Mac)
• Instalar y activar Test de Accesibilidad
• What media queries can my device see right now?
• Soporte de multiple inputs
• Introducción al atributo inputmode en CSS Tricks
• Apple / Android / WCAG / Actual physical size. Bookmarklet
• Lineamientos para soportar navegación con teclado en Android
• Evitar recursos que destellen más de tres veces en un segundo para no provocar convulsiones.
• Episodio 38 de Pokemón: Dennō Senshi
• Photosensitive Epilepsy Analysis Tool (PEAT)
• Requisitos para publicidad en Google
• Políticas para publicidad en video de Facebook
• Diseño de animaciones web más seguras para la sensibilidad al movimiento.
• Cómo usar el media query de reduced motion en CSS
• Accessible animated GIFs are pointless

Contenidos Accesibles

Módulo 4

• Readability Test
• Analizador de legibilidad de texto, que incluye las fórmulas de INFLESZ y Legibilidad Mu entre otras.
• Lorca Editor de texto
• Language Tool
• Cómo hacer Lenguaje Claro
  • Guías de Lenguaje Claro del Gobierno de Aragón, España, del Ministerio de Justicia y Derechos Humanos argentino, y de la Comisión Europea. En inglés: Gobierno de Estados Unidos
  • Noticias fácil
  • Lengua Franca edita cuentos clásicos de la literatura argentina adaptados en Lectura Fácil.
  • Lectura Fácil: Métodos de redacción y evaluación, traducido por Óscar García Muñoz
  • Información para todos, las reglas europeas escritas usando su propio método, y con más detalle en Métodos de redacción y evaluación.
• Tabla resumen de los requisitos para medios tempodependientes según nivel de conformidad, por Olga Carreras.
• Para entender la evolución de la visualización de videos, el sonido y el impacto Verizon Media y Publicis Media realizaron una encuesta de los subtítulos.
• Ley de accesibilidad de video y comunicaciones del siglo XXI (CVAA) promulgada en EEUU en 2010.
• Añadir subtítulos en YouTube
• Premiere facilita el subtitulado mediante transcripción y sincronización automática de las pistas de audio.
• ¿Cómo agrego o elimino subtítulos en un video en Facebook?
• Cómo usar subtítulos en una videollamada de Google Meet
• Proporcionar un enlace a la transcripción: Ejemplo en un Podcast: Entrevista sobre WCAG 2.
• Transcripción con sincronización ida y vuelta: Videoplayer que soporta transcripciones.
• Audiodescripción en series o películas: The Audio Description Project
• The Video Embed element
• Algunas recomendaciones sobre los separadores en el title y notas sobre cómo los lectores de pantalla leen la puntuación en general.
• Contenidos ocultos con la clase sr-only.
• Usando aria-describedby para desambiguar enlaces.
• Sólo para enlaces redundantes: podemos usar aria-hidden teniendo en cuenta tabindex negativo.
• The pseudo-content trick
• La importancia de conservar el subrayado en los enlaces – Adrián Roselli
• Breve descripción de los varios estándares ISO para PDF.
  

Interacción

Módulo 5

• Elemento form en la especificación HTML
• ¿Cómo se construyen los formularios?
  • Probar este formulario
  • Demo de los diferentes tipos de input
  • Los diálogos para input de color, fecha y hora varían notablemente entre navegadores, y no todos son accesibles.
  • Elemento select en la especificación HTML.
  • Elemento textarea en la especificación HTML.
  • Elemento button en la especificación HTML.
• Etiquetando campos
  • Etiquetar controles de formularios.
  • Ubicación de las etiquetas de un campo de formulario.
  • Asociar etiquetas de un elemento de formulario de manera explícita.
  • Asociar etiquetas de un elemento de formulario de manera implícita. La otra forma (explícita) es preferida.
  • Se puede ocultar visiblemente la etiqueta de un campo sólo si este tiene un botón a continuación.
  • Vincular el input al botón con aria-label.
  • 14 motivos por los cuales los placeholders son problemáticos.
• Agrupar elementos
  • Agrupar controles de formularios con fieldset.
  • Agrupar elementos relacionados dentro de un select.
• Instrucciones
  • Instrucciones en un formulario para campos obligatorios.
  • Proporcionar instrucciones dentro de las etiquetas.
  • Relacionar las instrucciones con aria-labelledby.
  • Relacionar las instrucciones con aria-describedby.
  • Uso del atributo autocomplete en HTML y listado de valores soportados.
• Validación y feedback
  • Atributo required para indicar por código que un campo es obligatorio
• Interrupciones
  • Pop-Ups, Overlays, Modals, Interstitials, and How They Interact with SEO
• A brief history of browser accessibility support
• WCAG 2.1 parsing error bookmarklet

[/um_show_content]