Checklist de accesibilidad para el área de maquetación.
Actualización: 09/02/10
Con el fin de que nuestros Sitios sean perceptibles, comprensibles, compatibles y operables generamos este listado de verificación para maquetadores (para seguir revisando!).
- HTML Y CSS
- ¿Las etiquetas utilizadas son sintácticamente correctas?
- ¿Están íntegramente independizados los estilos a través de CSS?
- ¿El uso de tablas se restringe a la tabulación de datos y no para diagramar el contenido del Sitio Web?
- ¿Se puede navegar el Sitio íntegramente (incluyendo objetos incrustados) a través de un teclado?
- Compatibilidad con Navegadores
- ¿El Sitio es compatible con el navegador Internet Explorer 6?
- ¿El Sitio es compatible con el navegador Internet Explorer 7?
- ¿El Sitio es compatible con el navegador Internet Explorer 8?
- ¿El Sitio es compatible con el navegador Mozilla Firefox?
- ¿El Sitio es compatible con el navegador Safari?
- ¿El sitio es compatible con un lector de pantalla como JAWS o NVDA?
- Identificación del lenguaje:
- El lenguaje está identificado de esta forma: <HTML lang=”es”>
- Las abreviaturas se encuentran señaladas con el atributo <abbr>? (Ejemplo “Alte”: <abbr title=”Almirante”>Alte.</abbr>)
- Las abreviaturas se encuentran restringida a las definidas por la Real Academia Española (Evitando por ejemplo “ascend.” para decir “ascendente”)
- ¿Los acrónimos se encuentran señalados con el atributo <acronym>? Ejemplo: “GCBA”: <acronym title=”Gobierno de la Ciudad de Buenos Aires”> GCBA </acronym>)
- ¿Las etiquetas <abbr> y <acronym> han sido utilizadas exclusivamente para su función y no para mostrar como “tooltip” información adicional de otra naturaleza? (Ejemplo de mala práctica: <acronym title=”Founded in 2006″> Twitter </acronym>)
- Imágenes y animaciones:
- ¿Todas las imágenes y animaciones cuentan con un texto alternativo?
- ¿Los textos alternativos representan una alternativa válida para transmitir la misma información que comunica el formato no textual? (NOTA: Quien elabore el contenido debe proveer el texto alternativo para las imágenes informativas, de forma que el programador pueda incluirlas) Ejemplos: El texto alternativo de un banner debe incluir la descripción de los objetos y/o textos que figuren en la imagen. No debe decir “banner”.El texto alternativo de una flecha (botón) debe decir “siguiente” o “volver”. No debe decir “flecha”.
- ¿Todas las animaciones pueden ser controladas (pausadas) por el usuario?
- Multimedia:
- ¿Los audiovisuales o archivos de audio se encuentran subtitulados o incluyen el texto en un archivo tipo HTML u opciones Word o PDF accesible?
- ¿La voz principal se distingue con facilidad del sonido ambiente?
- PDF:
- ¿Los documentos PDF pueden ser interpretados por un lector de pantallas para no videntes? (Validar con un lector de pantallas Ejemplo NVDA )
- Las imágenes del PDF ¿cuentan con un texto alternativo?
- Si un documento PDF no fuera accesible, ¿existe una versión alternativa accesible en Word o HTML?
- ¿Todos los enlaces se encuentran acompañados con el ícono identificativo de Adobe PDF?
- ¿Todos los enlaces PDF abren en una nueva ventana?
- Formularios: Carteles de error:
- ¿Evitan el lenguaje técnico, utilizando un lenguaje claro y comprensible por los usuarios?
- ¿Señalan claramente el campo en cuestión (no basándose sólo en el color, sino, acompañándolo también de un icono)?
- Enlaces
- ¿El Sitio es navegable con JavaScript desactivado?
- ¿Se encuentran los menúes (horizontales y verticales) armados con listas OL o UL?
- ¿Se encuentran todas las rutas verificadas de tal modo que ninguna lleve a una ruta equivocada o inexistente?
- Validadores:
- W3C
- SIDAR
- Accesibilidad.com
- Lector de Pantallas NVDA
ver Checklist de accesibilidad para el área de diseño
Este checklist fue una idea que Santiago Bustelo propuso al GCBA para verificar los diseños antes de ser subidos a producción.
También fue debatido en los foros Acceso Web e IXDA.
[...] ver Checklist de accesibilidad para el área de maquetación [...]