EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            jquery
            jQuery, integración de contenido interactivo
            07/12/2019
            Ejercicios sobre accesibilidad web. Problemas comunes y soluciones
            Ejercicios sobre accesibilidad web. Problemas comunes y soluciones
            10/12/2019

            Diseño y desarrollo de webs accesibles, accesibilidad web

            diseno y desarrollo de webs accesibles accesibilidad web

            Tabla de contenidos

            • 1. Concepto de accesibilidad web 
            • 1.1. Barreras derivadas del entorno 
            • 1.2. Barreras por tipo de perfil
              • 1.2.1. Ceguera:
              • 1.2.2. Baja visión:
              • 1.2.3. Daltonismo:
              • 1.2.4. Auditivas: 
              • 1.2.5. Motrices:
              • 1.2.6. Neurológicas o cognitivas (dislexia, trastornos de atención, falta de memoria…):
            • 1.3. Ayudas técnicas y productos de apoyo
              • 1.3.1. Línea y teclado braille
              • 1.3.2. Lectores de pantalla
              • 1.3.3. Licornio
              • 1.3.4. Ratones especiales
              • 1.3.5. Navegadores de voz
              • 1.3.6. Webcams para seguimiento de ojos o cara
            • 2. El Consorcio World Wide Web (W3C) 
            • 3. Pautas de Accesibilidad para el Contenido en la Web (WCAG) 
              • 3.1. WCAG 1.0
              • 3.2. WCAG 2.0
            • 4. Niveles de orientación
            • 4.1. Principios generales
              • 4.1.1. Perceptible
              • 4.1.2. Operable
              • 4.1.3. Comprensible
              • 4.1.4. Robusto
            • 4.2. Pautas generales
            • 4.3. Criterios de conformidad
              • 4.3.1. Niveles de conformidad
            • 4.4. Técnicas para satisfacer los requisitos definidos en las WCAG 
              • 4.4.1. Técnicas fundamentales
              • 4.4.2. Técnicas HTML
              • 4.4.3. Técnicas CSS
              • 4.4.4. Javascript
              • 4.4.5. Técnicas para servidor
              • 4.4.6. Técnicas WAI-ARIA
              • 4.4.7. Otras técnicas
            • 5. Niveles de prioridad  y puntos de verificación 
            • 6. Tabla de puntos de verificación
            • 7. Niveles de adecuación
            • 8. Herramientas de evaluación, análisis y testeo de accesibilidad web
            • 9. Referencias

            1. Concepto de accesibilidad web 

            La accesibilidad web consiste en desarrollar aplicaciones web que puedan ser utilizadas por el mayor número de usuarios con necesidades específicas. Estas necesidades pueden ser debidas a limitaciones derivadas del entorno o derivadas de problemas visuales, auditivos, motrices y neurológicos (dislexia, trastornos de atención, falta de memoria…).

            1.1. Barreras derivadas del entorno 

            • Navegadores antiguos: Proporcionar alternativas cuando se utilizan elementos que no tienen soporte en tecnologías antiguas. Si usamos Javascript para mostrar un menú, este debe funcionar igualmente aunque la tecnología no esté disponible. 
            • Navegadores de texto: Incluir un equivalente textual para todos los elementos no textuales(imágenes, vídeos o sonidos)
            • Conexiones lentas: minimizar el tiempo de carga de los elementos de la web.
            • Pantallas pequeñas o muy grandes: diseño web responsive.
            • Monitores monocromos: evitar funcionalidades que se interpretan por su color, etc.

            1.2. Barreras por tipo de perfil

            1.2.1. Ceguera:

            • Las imágenes sin texto alternativo no pueden ser leídas por los lectores de pantalla.
            • Las imágenes que incluyen gráficos que representan datos o textos insertados mediante imágenes tampoco son leídos por los lectores de pantalla.
            • Elementos multimedia sin descripción textual.
            • Tablas en las que el contenido es incomprensible cuando se lee de forma secuencial.
            • Falta de independencia de dispositivo, la web debe ser funcional cuando no se utilice ratón.
            • Formatos no accesibles de documentos que pueden dar problemas a los lectores de pantalla si no cumplen las normas de accesibilidad (por ejemplo en documentos pdf que no cumplen las normas).

            1.2.2. Baja visión:

            • Tamaño de letra con medidas absolutas que no permiten su cambio.
            • Maquetación desajustada al modificar los tamaños de la fuente y que complican la navegabilidad.
            • Poco contraste entre textos, fondos e imágenes.
            • Texto insertado mediante imágenes.

            1.2.3. Daltonismo:

            • Color para el resaltado de los textos sin utilizar otro formato adicional como la cursiva, la negrita o el subrayado.
            • Poco contraste entre textos, fondos e imágenes.

            1.2.4. Auditivas: 

            • Falta de subtítulos o transcripciones de los contenidos.
            • Obligatoriedad del uso de micrófono sin posibilidad de desactivación.

            1.2.5. Motrices:

            • Elementos de interacción muy pequeños: botones, enlaces, etc.
            • Falta de independencia de dispositivo, la web debe ser funcional cuando no se utilice ratón.

            1.2.6. Neurológicas o cognitivas (dislexia, trastornos de atención, falta de memoria…):

            • Tamaño de letra fijo que no se puede cambiar.
            • Elementos sonoros o visuales que no se pueden desactivar.
            • Falta de estructuración y organización del contenido que impide entenderlo correctamente.
            • Lenguaje muy enrevesado y frases muy complejas.
            • Destellos o parpadeos frecuentes que pueden provocar ataques de epilepsia.
            Víctimas de epilepsia televisiva: «Más de 700 niños tienen que ser hospitalizados en Japón tras ver una serie de dibujos animados.» Ver noticia en el Diario Información

            Qué es la epilepsia fotosensitiva

            La epilepsia fotosensitiva es un problema causado por una respuesta anormal del cerebro a las luces intermitentes (tipo flash). Se debe a que el mecanismo cerebral que controla la reacción a la información visual «es defectuosa o está ausente».

            Además de las luces parpadeantes o relampagueantes rápidas, especialmente si son rojas, los ataques pueden ser causados, a veces, por ciertas formas y patrones geométricos. La frecuencia del parpadeo de luz que provoca estos ataques varía de persona a persona. Generalmente se da en frecuencias que oscilan entre los 5 y los 30 parpadeos por segundo (hertz). 

            Ver más ejemplos sobre ataques fotosensibles

            Comprueba tu aprendizaje

            Indica las barreras derivadas del entorno:

            Selecciona 2 respuestas

            ¡Bien! ¡Has fallado!

            Indica las barreras que puede encontrar una persona daltónica:

            ¡Bien! ¡Has fallado!

            Indica las barreras que puede encontrar una persona con barreras motrices:

            Selecciona 2 respuestas

            ¡Bien! ¡Has fallado!

            Ejercicios

            Actividad 1.1.

            Indica qué tipo de perfil no podría entender las siguientes instrucciones:

            • Pulsa el botón amarillo para acceder.
            • El menú está en la derecha.
            • Los errores se indicarán mediante un sonido.

            Actividad 1.2

            Propón una solución a cada uno de los siguientes desafíos:

            • Usuarios que no pueden ver vídeos.
            • Usuarios que no pueden escuchar vídeos.
            • Los daltónicos no pueden representar bien los colores.
            • Usuarios que no pueden utilizar el ratón.
            • Usuarios con dificultades de concentración o comprensión cuando hay párrafos largos.
            Ver más desafíos y soluciones de diseño web accesible

            1.3. Ayudas técnicas y productos de apoyo

            Gracias a la combinación de herramientas hardware y software, muchos usuarios disponen de herramientas para acceder de una manera eficaz a los contenidos de una web. Veamos algunos de los dispositivos utilizados.

            1.3.1. Línea y teclado braille

            La línea braille es un periférico que dispone de unas celdas que permiten representar caracteres braille y ser leídos por personas ciegas mediante los dedos.

            Una línea y teclado braille es un dispositivo de entrada y salida que combina en un solo dispositivo una línea braille y un teclado braille.

            1.3.2. Lectores de pantalla

            Son aplicaciones software que leen el texto de la pantalla en voz alta mediante un sintetizador de voz. También pueden enviar el texto a una línea braille para que el usuario lo lea con los dedos.

            La aplicación software más famosa es JAWS y se maneja con las teclas del teclado. Estos son algunos de sus comandos:

            • INSERT+FLECHA ABAJO: leer todo.
            • ESC: detener la lectura.
            • FLECHA IZQUIERDA: carácter anterior.
            • TAB: se mueve al siguiente enlace.
            • SHIFT+TAB: se mueve al enlace anterior.
            • V: se mueve al siguiente enlace visitado, etc.
            Ver cómo funcionan los lectores de pantalla JAWS y NVDA

            1.3.3. Licornio

            Casco con varilla incorporada que permite utilizar un teclado tradicional mediante los movimientos de la cabeza.

            1.3.4. Ratones especiales

            Ratones especiales: ratones de cabeza, ratones de pie o apuntadores de boca, ratón de mirada, ratón de palanca, etc.

            1.3.5. Navegadores de voz

            Permiten, mediante un sintetizador de sonido de voz incorporado, leer en voz alta el contenido de la pantalla.

            1.3.6. Webcams para seguimiento de ojos o cara

            Transforman el movimiento de los ojos o la cara en movimientos del puntero del ratón en la pantalla simulando las pulsaciones del ratón con un parpadeo o con un gesto concreto de la cara. Estos dispositivos son adecuados para aquellas personas que tienen una discapacidad motriz severa de las extremidades y además tienen dificultad en el habla.

            Ver más productos de apoyo y ayudas técnicas

            Comprueba tu aprendizaje

            ¿Para qué tipo de discapacidad está especialmente indicado el dispositivo de entrada apuntador de boca?

            ¡Bien! ¡Has fallado!

            Un teclado virtual en pantalla es una ayuda técnica que ayuda principalmente a las personas.

            ¡Bien! ¡Has fallado!

            Ejercicios

            Actividad 1.3

            Instala la extensión Screen Reader (anteriormente llamada ChromeVox). Realiza una puesta en común sobre las opciones de la extensión que figuran en el apartado “configuración”.

            Extensión para Chrome: Screen Reader
            • ¿Para trabajar con Screen Reader es preciso disponer de altavoces?
            • ¿Un usuario ciego puede instalar Screen Reader?
            • ¿Permite cambio de idioma?
            • ¿Permite cambio de voz?
            • ¿Se pueden modificar los comandos para desplazarte por una página cómodamente?

            Actividad 1.4

            Utiliza Screen Reader para leer la página inicial de Eniun y saca tus propias conclusiones en cuanto al uso de la herramienta. Exponlas en común en clase.

            • ¿La herramienta se dedica a leer el contenido o también lo “explica”?
            • Cuando utilizas el tabulado para acceder a los enlaces ¿has entendido bien dónde te lleva cada enlace? ¿Qué cambiarías?

            2. El Consorcio World Wide Web (W3C) 

            En las primeras unidades vimos que el World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento futuro de la web y vela por conseguir webs disponibles para todo el mundo y desde cualquier dispositivo.

            El poder de la web está en su universalidad. El acceso de todos, independientemente de la discapacidad, es un aspecto esencial.

            Tim Beerners-Lee, director del W3C e inventor de la World Wide Web.

            Además, desde W3C se establecen ciertas recomendaciones, normas, estándares y pautas para contribuir en el desarrollo de un estándar sobre accesibilidad web. Estas recomendaciones o pautas son lo que llamamos WCAG (Web Content Accessibility Guidelines o Pautas de Accesibilidad para el contenido Web).

            W3C cuenta con un grupo de trabajo llamado WAI (Web Accessibility Initiative) que, en coordinación con otras organizaciones, persigue la accesibilidad de la Web a través de diferentes áreas de trabajo: tecnología, directrices, herramientas, formación y difusión, investigación y desarrollo.

            3. Pautas de Accesibilidad para el Contenido en la Web (WCAG) 

            Las Pautas de Accesibilidad para el Contenido Web (WCAG) cubren un amplio rango de recomendaciones para crear contenido Web más accesible. Tal y como hemos visto en los apartados anteriores, seguir estas pautas permite crear un contenido más accesible para un mayor número de personas con barreras visuales, auditivas, motrices, etc.. Además, seguir estas pautas puede, a menudo, ayudar a que el contenido web sea más usable.

            • Las pautas de las WCAG se pueden consultar en esta web: w3.org/TR/WCAG20/
            • La versión en castellano se puede consultar en esta web: sidar.org/traducciones/wcag20/es/

            3.1. WCAG 1.0

            Las guías WCAG proporcionan unas pautas de diseño que ayudan a que un sitio web sea accesible. En la primera versión de las guías WCAG (WCAG 1.0) se identificaron catorce pautas de diseño:

            1. Proporcionar alternativas equivalentes para contenido visual y auditivo.
            2. No basarse solo en el color.
            3. Usar marcadores y hojas de estilo y hacerlo de forma correcta.
            4. Especificar el lenguaje utilizado.
            5. Crear tablas que se transformen correctamente.
            6. Asegurarse de que las páginas que usen nuevas tecnologías se transformen
              correctamente.
            7. Asegurar al usuario el control de los contenidos que cambian con el tiempo.
            8. Asegurar la accesibilidad directa de las interfaces incrustadas.
            9. Diseñar para la independencia del dispositivo.
            10. Usar soluciones provisionales.
            11. Usar las tecnologías y pautas de la W3C.
            12. Proporcionar información de contexto y orientación.
            13. Proporcionar mecanismos claros de navegación.
            14. Asegurar documentos claros y simples.

            3.2. WCAG 2.0

            Posteriormente, en el año 2009, estas catorce pautas fueron revisadas en la versión
            2.0 de las Guías de Accesibilidad de los Contenidos para la Web (WCAG 2.0). En esta
            revisión, las catorce pautas se redujeron a cuatro principios fundamentales:

            • Perceptibilidad.
            • Operatividad.
            • Comprensibilidad.
            • Robustez.

            Comprueba tu aprendizaje

            Los cuatro principios de las Pautas de Accesibilidad al Contenido en la Web 2.0 (WCAG 2.0) son:

            ¡Bien! ¡Has fallado!

            Indica las opciones verdaderas:

            Selecciona 3 respuestas

            ¡Bien! ¡Has fallado!

            Ejercicio

            Actividad 3.1

            Comprueba si la combinación de colores de la web que has ido creando a lo largo del curso es accesible. Utiliza la herramienta Contrast Checker, o cualquier otra, y adjunta una captura de pantalla del resultado obtenido. Si el test no sale satisfactorio, realiza las modificaciones oportunas.

            Herramienta online Contrast Checker

            4. Niveles de orientación

            Los niveles de orientación nos orientan sobre cómo crear un contenido más accesible y están destinados a una audiencia muy variada: diseñadores de sitios web, organizaciones que quieren verificar la accesibilidad de las webs existentes, profesionales interesados en que las webs sean accesibles por personas con discapacidades, etc.

            Dentro de los niveles de orientación encontramos: principios generales, pautas generales, criterios de conformidad verificables y una amplia colección de técnicas suficientes, técnicas recomendables y fallos comunes documentados con ejemplos, enlaces a recursos adicionales y código.

            • Principios generales: En el nivel más alto se sitúan los cuatro principios que proporcionan los fundamentos de la accesibilidad web: perceptible, operable, comprensible y robusto. 
            • Pautas generales: Por debajo de los principios están las pautas. Las doce pautas proporcionan los objetivos básicos que los autores deben lograr con el fin de crear un contenido más accesible para los usuarios con distintas discapacidades. 
            • Criterios de Conformidad: Para cada pauta se proporcionan los criterios de conformidad verificables. Se definen tres niveles de conformidad: A (el más bajo), AA y AAA (el más alto).
            • Técnicas suficientes y recomendables: Para cada una de las pautas y criterios de conformidad se proporcionan técnicas que nos permiten hacer una evaluación correcta.

            Todos estos niveles de orientación (principios, pautas, criterios de conformidad y técnicas suficientes y recomendables) actúan en conjunto para proporcionar una orientación sobre cómo crear un contenido más accesible. 

            4.1. Principios generales

            Como se ha dicho anteriormente, los principios generales que debe cumplir una web para que su contenido sea accesible son: Perceptible, Operable, Comprensible, Robusto.

            4.1.1. Perceptible

            • 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.
            • Alternativas para el contenido multimedia.
            • Contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.
            • Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

            4.1.2. Operable

            • Acceso a toda la funcionalidad mediante el teclado.
            • Tiempo suficiente para leer y usar el contenido.
            • No diseñar contenido de un modo que pueda provocar ataques, espasmos o convulsiones.
            • Medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

            4.1.3. Comprensible

            • Contenidos textuales legibles y comprensibles.
            • Páginas web que aparezcan y operen de manera predecible.
            • Ayudar a los usuarios a evitar y corregir los errores.

            4.1.4. Robusto

            • Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

            4.2. Pautas generales

            Las pautas generales se pueden ver en detalle en el siguiente apartado: 

            sidar.org/traducciones/wcag20/es/#guidelines

            Ejercicios

            Actividad 4.1

            Utiliza la herramienta Textise para visualizar en modo texto la web que has ido creando a lo largo del curso y comprueba si los textos alternativos son correctos. Realiza los cambios oportunos.

            Herramienta Textise para visualizar en modo texto una web.

            Actividad 4.2

            Utiliza la herramienta Taw para analizar la accesibilidad de la página web que has creado a lo largo del curso (inicio, servicios, formulario y blog). Explica los errores encontrados (indica su categoría: perceptible, operable, comprensible y robusto), su posible solución y adjunta capturas de pantalla, si fuese necesario.

            Herramienta Taw para analizar la accesibilidad de una web.

            4.3. Criterios de conformidad

            Para atender a las necesidades de los distintos grupos de usuarios y sus circunstancias, cada una de las pautas anteriores están asociadas a un nivel de conformidad que define el nivel de exigencia del criterio. 

            4.3.1. Niveles de conformidad

            Junto a cada pauta general del punto 4.2 se indica su nivel de conformidad: Nivel A, Nivel AA y Nivel AAA, siendo el A el menos exigente y el AAA el más exigente. Estos niveles de conformidad también van asociados a unos niveles de prioridades que veremos con más detalle en el punto 5.

            4.4. Técnicas para satisfacer los requisitos definidos en las WCAG 

            Las técnicas para satisfacer los requisitos definidos en las WCAG están recogidas en la siguiente web: w3.org/WAI/GL/WCAG20-TECHS/

            Como puedes ver, hay más de 400 técnicas para satisfacer todos los requisitos definidos en las WCAG, a continuación se mencionan las más destacadas:

            4.4.1. Técnicas fundamentales

            • Incluir alternativas de texto al contenido multimedia.
            • Permitir pausar el contenido multimedia.
            • Incluir alternativas legibles cuando la lectura dependa del contraste de colores.
            • Ordenación coherente del contenido.
            • Incluir glosarios, mapa del sitio, tabla de contenidos.
            • Incluir títulos descriptivos.
            • Añadir enlaces para ir al principio de la página.
            • Identificar la localización del usuario dentro de la web (breadcrumbs).
            • Evitar parpadeos.
            • Alinear los textos de manera similar.
            • Ofrecer feedback de confirmación o negación al realizar una operación, etc.

            4.4.2. Técnicas HTML

            • Utilizar elemento title para dar un título coherente a la página.
            • Incluir la etiqueta meta description.
            • Incluir el botón de submit en los formularios.
            • Definir el idioma correspondiente con el atributo lang.
            • Incluir el atributo alt en las imágenes.
            • Utilizar el atributo caption y summary en las tablas.
            • Maquetación sin tablas.
            • Utilizar los encabezados h1-h6.
            • Crear un orden de tabulación coherente en formularios y enlaces.
            • Utilizar etiquetas estructurales o elementos semánticos.

            4.4.3. Técnicas CSS

            • Facilitar mecanismos para que se pueda modificar la hoja de estilos CSS: colores, fuentes, etc.
            • Separar la estructura de los estilos y no utilizar estilos en línea.
            • Utilizar tamaño de letra con medidas relativas: unidades em.
            • Incluir el foco en los elementos mediante la clase :focus.
            • Utilizar CSS para presentar el texto, controlar el espaciado, etc.

            4.4.4. Javascript

            • Aumentar los tiempos de acción.
            • Soporte para utilizar tanto ratón como teclado.
            • Validación de datos con alertas.
            • Usar el DOM para manipular la página.
            • Utilizar scripts para modificar el aspecto de la página, como el fondo.
            • Utilizar scripts para hacer scroll por la página y que se pueda controlar.

            4.4.5. Técnicas para servidor

            • Aplicar redirecciones en lado del servidor (.htaccess)  y no en el cliente.

            4.4.6. Técnicas WAI-ARIA

            Las técnicas WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) proporcionan semántica, de tal forma que se pueden transmitir comportamientos de la interfaz de usuario e información estructural a las tecnologías de apoyo (por ejemplo, lectores de pantalla). La especificación de ARIA establece componentes que definen roles, estados y propiedades de los elementos de la interfaz de usuario.

            Algunas de las técnicas que se especifican consisten en utilizar los atributos que definen los componentes:

            • aria-label: etiquetar objetos.
            • aria-describedly: controles de la interfaz de usuario.
            • aria-required: campos requeridos.
            • aria-role: indicar el rol de un control y agrupar los controles de grupos.
            • state y property para mostrar los estados de los componentes.
            • aria landmarks para establecer las regiones de una página.
            Ver ejemplos de ARIA en HTML
            Ver ejemplos atributo semántico «role»

            4.4.7. Otras técnicas

            Puedes ver más técnicas relacionadas con el uso de PDF, Flash, Silverlight, etc. en la web oficial: w3.org/WAI/GL/WCAG20-TECHS/

            Ver guía breve y consejos de accesibilidad web
            Ver más técnicas y ejemplos de accesibilidad

            Ejercicios

            Actividad 4.3

            Analiza la accesibilidad de tu sitio web mediante la herramienta accessibilitychecker.org. Explica los errores encontrados, su posible solución y adjunta capturas de pantalla, si fuese necesario. 

            Actividad 4.4

            Como hemos visto, Bootstrap nos ayuda a que nuestros sitios web sean accesibles incluyendo en los ejemplos de código los elementos y atributos HTML recomendados para conseguir aplicaciones accesibles. Analiza la página web que creaste en la práctica de Bootstrap y encuentra los atributos WAI-ARIA utilizados. Fíjate, por ejemplo, en los atributos role y aria-hidden. Explica por qué se han utilizado esos atributos.

            5. Niveles de prioridad  y puntos de verificación 

            La WCAG ofrece varios niveles de prioridades a la hora de aplicar las pautas de accesibilidad. De esta forma podemos saber cuáles son las acciones más importantes que debemos realizar. Son tres niveles de prioridades:

            • Prioridad 1: Nivel mínimo exigible y requisito esencial que se debe satisfacer. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información. 
            • Prioridad 2: Satisfacer este punto de verificación eliminará importantes barreras de acceso a la información Web.
            • Prioridad 3: Satisfacer este punto de verificación mejorará la accesibilidad a la información web a usuarios que tengan dificultades para utilizar la interfaz.

            Si se cumplen los niveles de prioridades se establecen varios niveles de conformidad que sirven de sello de accesibilidad.

            • Nivel A: Prioridad 1.
            • Nivel AA: Prioridades 1 y 2.
            • Nivel AAA: Prioridades 1, 2 y 3.

            Logos de conformidad 

            nivel A Doble-A Triple-A
            Icono del  Nivel A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI Icono del Nivel Doble-A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI Icono del Nivel Triple-A de conformidad con las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI

            Cómo usar los logos de conformidad

            Ejercicios

            Actividad 5.1

            Corrige los errores de accesibilidad encontrados en los puntos 4.2 y 4.3. Añade el símbolo correspondiente de accesibilidad según el nivel de conformidad alcanzado.
            Puedes guiarte según las pautas de accesibilidad del siguiente enlace: sidar.org/traducciones/wcag20/es/#guidelines

            6. Tabla de puntos de verificación

            La Tabla de Puntos de Verificación es una lista de todos los puntos de verificación de la Accesibilidad al Contenido en la Web, organizados por conceptos y por nivel de prioridad.

            Esta lista se puede utilizar para revisar la accesibilidad de una página o un sitio en la Web. Para cada punto de verificación, el desarrollador web tiene que indicar si ha sido o no satisfecho, y si es o no aplicable.

            Tabla de puntos de verificación

            7. Niveles de adecuación

            Para que una página web cumpla con los niveles de adecuación de la WCAG 2.0 se deben satisfacerse los requisitos siguientes:

            1. Nivel de conformidad: Uno de los siguientes niveles de conformidad vistos anteriormente se satisface por completo.

            • 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 se 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.

            2. Páginas completas: La conformidad (y el nivel de conformidad) se aplica a páginas web completas, y no se puede alcanzar si se excluye una parte de la página.

            3. 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. 

            4. Uso de tecnologías exclusivamente según métodos que sean compatibles con la accesibilidad: Para satisfacer los criterios de conformidad sólo se depende de aquellos usos de las tecnologías que sean compatibles con la accesibilidad.

            5. Sin interferencia: Si las tecnologías se usan de una forma que no es compatible con la accesibilidad, o está usada de una forma que no cumple los requisitos de conformidad, no debe impedir a los usuarios acceder al contenido del resto de la página. 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:

            • Control del audio.
            • Sin trampas para el foco del teclado.
            • Umbral de tres destellos o menos.
            • Poner en pausa, detener, ocultar.

            8. Herramientas de evaluación, análisis y testeo de accesibilidad web

            Herramientas de evaluación, análisis y testeo de accesibilidad web:

            • Taw: Aplicación web que permite hacer un análisis de accesibilidad de forma gratuita tan solo introduciendo la URL.
            • Accessibilitychecker.org: Informe bastante completo sobre accesibilidad.
            • Color Contrast Checker: aplicación para comprobar el contraste entre fondo y texto.
            • Wave: Informe muy visual sobre la página a evaluar. Prestaciones parecidas a la extensión para Chrome creada por la misma empresa.
            • Tenon.io: nos permite analizar un sitio web o un trozo de código.
            • Textise: simulador online para ver una página web en modo «Sólo texto».
            • Colour Constrast Analyser: aplicación para comprobar el contraste entre fondos y textos.
            • WAI HTML Table Linearizar Entry Form: aplicación para evaluar tablas.
            • W3C Markup Validator: Validador HTML.
            • CSS Validator: Validador CSS.
            • JAWS: lector de pantalla

            Extensiones para instalar:

            • Web Developer, extensión para Chrome.
            • Helperbird Toolbar, extensión para Chrome y Firefox.
            • WAVE Evaluation Tool, extensión para Chrome y Firefox.
            • Screen Reader, extensión para Chrome.

            Plugins de WordPress que ayudan a crear sitios web accesibles:

            • WP Accesibility: Ayuda con una variedad de problemas comunes de accesibilidad que ocurren en los temas de WordPress.
            • Accessibility widget: Aumentar el tamaño de los contenidos de la web.
            • Zoom widget: Widget para hacer zoom.
            • Accessibility Access Keys: Permite asignar a las teclas funciones de acceso directo a contenidos.
            • Dropdown Menus: Permite navegar por los menús de una página con el teclado.
            • Accessible tag cloud: Versión accesible del widget que crea una nube de etiquetas.
            • GSpeech plugin : Plugin que convierte a audio cualquier texto seleccionado en la Web.

            Aunque dispongamos de herramientas que nos ayudan a evaluar la accesibilidad de un sitio web de forma automática, siempre hay que revisar los resultados.

            Evalúa manualmente los datos obtenidos.

            9. Referencias

            Cursos de interés:

            • Aprende Accesibilidad paso a paso: plataforma Udemy.
            • Curso Universidad de Alicante: accesibilidadweb.dlsi.ua.es.

            Bibliografía:

            • Aplicación de técnicas de usabilidad y accesibilidad en el entorno cliente, IC editorial. Joaquín Pintos Fernández. ISBN: 978-84-16433-05-6

            Otros enlaces de interés:

            • Información sobre imágenes accesibles: codexempla.
            • Preguntas y respuestas sobre accesibilidad: ver preguntas y respuestas.
            • Guía para crear contenidos digitales accesibles: esvi-al.
            • Diseño de páginas web accesibles: sid.usal.es.
            • Ver detalle sobre accesibilidad de la página de red.es.
            • Análisis de sistemas de navegación en sitios web: análisis en pdf.
            • Ayuda Screen reader: compartolid.es/chromevox/.
            • Software libre y gratuito relacionado con la accesibilidad: tecnoaccesible.net/software-libre
            • Mapa de decisión para crear webs accesibles: usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php
            Ver ejercicios sobre accesibilidad
            Compartir

            UD9. Accesibilidad web

            • 1. Concepto de accesibilidad web
            • 2. El Consorcio W3C
            • 3. Pautas WCAG
            • 4. Niveles de orientación
            • 4.1. Principios generales
            • 4.2. Pautas generales
            • 4.3. Criterios de conformidad
            • 4.4. Técnicas WCAG
            • 5. Niveles de prioridad y puntos de verificación
            • 6. Tabla de puntos de verificación
            • 7. Niveles de actuación
            • 8. Herramientas de análisis y testeo
            • 9. Referencias
            • 10. Ejercicios sobre accesibilidad web

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results