Saltar al contenido principal
LibreTexts Español

1.4: Acerca de WCAG y WAI-ARIA

  • Page ID
    152614
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    Antes de entrar en detalles, algunos antecedentes sobre las especificaciones relevantes del W3C ayudarán a proporcionar un contexto de por qué los desarrolladores deben aprender a usar WAI-ARIA cuando están desarrollando interactividad personalizada para la Web.

    WCAG

    Las Directrices de Accesibilidad al Contenido Web (es decir, WCAG 2.0 y la reciente WCAG 2.1, pronunciada wuh-kag) es la especificación primaria adoptada en todo el mundo y describe cómo se debe crear el contenido web para que sea accesible para las personas con discapacidad. WAI-ARIA puede ayudar a los desarrolladores a crear contenido que se ajuste a las recomendaciones de WCAG. WCAG está cubierto con más detalle en Introducción a la Accesibilidad Web, por lo que solo proporcionaremos una introducción básica aquí. Para aquellos que aún no están familiarizados con WCAG, siga el enlace a la Especificación W3C WCAG para obtener más detalles.

    Lectura sugerida:

    WCAG gira en torno a cuatro principios que ayudan a agrupar pautas con características comunes. El acrónimo POUR se puede utilizar para recordar los principios, que se describen a continuación.

    El contenido debe ser:

    1. Percibible: Debe ser posible percibir el contenido web a través de múltiples sentidos para que quienes han perdido un sentido puedan percibir el contenido a través de otro sentido. Algunos buenos ejemplos de hacer que el contenido sea percibible son el texto alternativo con imágenes, por lo que las personas ciegas pueden percibir imágenes, y los subtítulos con audio o video, por lo que las personas sordas son capaces de percibir sonidos y habla.
    2. Operable: El contenido debe funcionar tanto con un mouse como con un teclado. Hay muchas personas que son incapaces de usar un ratón de manera efectiva o nada en absoluto. Cuando el contenido no es operable por teclado, la mayoría de las personas ciegas (entre otras) experimentarán barreras. Algunos buenos ejemplos incluyen usar OnKeyPress junto con OnClick para JavaScript, y usar tanto:hover y:focus en CSS para que los efectos sean posibles tanto con el mouse como con el teclado.
    3. Comprensible: El contenido debe ser entendido por una variedad de personas, lo que incluye personas con discapacidades cognitivas, discapacidades sensoriales, personas que leen en un segundo idioma e incluso usuarios típicamente capaces. Algunos buenos ejemplos incluyen hacer que el texto del enlace sea significativo (“haga clic aquí” no dice nada sobre el destino del enlace) y elementos de navegación consistentes (por lo que los usuarios solo tienen que aprender la estructura de navegación de un sitio web una vez).
    4. Robusto: El contenido debe funcionar en múltiples plataformas y debe continuar trabajando en el futuro a medida que la tecnología evoluciona. Esto generalmente significa desarrollar contenido basado en estándares. Y, cuando se proporcionan usos no estándar de HTML, etc., una versión estándar está disponible como copia de seguridad. Algunos usos de WAI-ARIA entran dentro de esta categoría de lineamientos.

    WCAG también introduce niveles de conformidad. Los niveles de conformidad pueden pensarse en términos de su importancia para eliminar barreras, siendo el Nivel A el más importante. Es útil pensar en los niveles como cosas que debes hacer, debes hacer y podrías hacer.

    • Nivel A: Estos problemas deben resolverse o algún grupo no podrá acceder al contenido. Los temas a este nivel representan barreras significativas que tal vez no se superen con soluciones alternativas. Un ejemplo de una barrera de Nivel A es que falta texto alternativo para describir una imagen. Hay poco que una persona ciega pueda hacer por su cuenta para entender el contenido de una imagen sin una descripción de texto.
    • Nivel AA: Estos problemas deben resolverse o algún grupo tendrá dificultades para acceder o usar el contenido. Estos problemas a menudo se pueden eludir con un poco de esfuerzo, pero harán que usar o comprender el contenido web sea más fácil. Un ejemplo de una barrera de nivel AA es no poder seguir el enfoque del cursor al navegar por el contenido con un teclado. Para una persona con baja visión que navega con un teclado, o un usuario de teclado totalmente capaz para el caso, navegar por el contenido puede ser muy difícil si no puede ver dónde se encuentra el cursor y no puede decir cuándo presionar la tecla Enter para activar un enlace o botón.
    • Nivel AAA: Estos problemas podrían resolverse para mejorar la usabilidad para todos los grupos. El contenido web puede ser técnicamente accesible, pero la usabilidad puede mejorarse resolviendo estos problemas. Un ejemplo de barrera Nivel AAA sería presentar acrónimos o abreviaturas sin proporcionar su redacción completa. Para una persona ciega, un acrónimo pronunciado por un lector de pantalla puede sonar como galimatías. Para un usuario plenamente capaz que no esté familiarizado con una forma corta, un acrónimo o abreviatura puede no tener un significado útil, al menos no sin tener que buscar el significado en otra parte.

    El nivel AA es el nivel generalmente aceptado de conformidad al que la mayoría de los sitios web deben aspirar, con quizás algunos ítems de Nivel AAA abordados. Muy pocos sitios web cumplirán en el Nivel AAA, aparte del más básico de los sitios. El cumplimiento de nivel AAA es generalmente inalcanzable, y en algunos casos indeseable.

    Las siguientes lecturas sugeridas proporcionan enlaces a recursos adicionales relacionados con WCAG.

    Lectura sugerida:

    WAI-ARIA

    La instrucción aquí se enfoca en la especificación WAI-ARIA y cómo se usa para garantizar que el contenido web interactivo sea accesible para personas con discapacidad. Las siglas significan Iniciativa de Accesibilidad Web, el subgrupo del W3C que desarrolló la especificación, y Aplicaciones de Internet Rico Accesible, la especificación en sí misma. Normalmente se le conoce como WAI-ARIA, en lugar de ARIA, para distinguirlo de otros usos del acrónimo. WAI-ARIA se puede utilizar para ayudar a los desarrolladores a crear widgets, aplicaciones e interactividad web en general que cumplan con las recomendaciones de WCAG.

    La especificación WAI-ARIA se publicó inicialmente como recomendación en marzo de 2014 (WAI-ARIA 1.0). WAI-ARIA 1.1 fue lanzado en diciembre de 2017 y es la versión estable actual, con WAI-ARIA 1.2 en las obras, disponible como borrador del editor.

    WAI-ARIA en sí no es una solución por sí sola para hacer accesible el contenido web interactivo. Generalmente se usa con JavaScript, que inyecta dinámicamente atributos WAI-ARIA en HTML para proporcionar semántica que son reconocidas por las tecnologías de asistencia y comprensibles por los usuarios finales. Por ejemplo, si una serie de listas anidadas se ensamblan como un menú, se pueden agregar atributos de menú WAI-ARIA para reemplazar la semántica de lista con semántica de menú.

    Por ahora preséntate a WAI-ARIA, si aún no estás familiarizado, escaneando la especificación para desarrollar una comprensión general de por qué es necesaria, cómo se usa y cuándo usarla. Entraremos en mucho más detalle a medida que avancemos por las actividades.

    Lectura sugerida:


    This page titled 1.4: Acerca de WCAG y WAI-ARIA is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.