Saltar al contenido principal

$$\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}$$

Dado el rango de soporte para WAI-ARIA en los lectores de pantalla y navegadores actuales, estrategias como la degradación elegante y la mejora progresiva son útiles para acomodar diferentes implementaciones y garantizar que las herramientas desarrolladas con WAI-ARIA sean accesibles independientemente del soporte.

Dependiendo de su situación, un método de desarrollo puede ser preferible sobre el otro, aunque en general se prefiere la mejora progresiva sobre la degradación agraciada. Es decir, se prefiere crear una funcionalidad base que funcione para todos, en lugar de proporcionar mejoras cuando son compatibles con el navegador y/o la tecnología de asistencia. La degradación agraciada, por otro lado, comienza con la mejora, luego proporciona alternativas donde las mejoras no son compatibles. Si bien pueden sonar equivalentes, estos últimos suelen requerir menos esfuerzo, a pesar de que es más una solución de tirita para corregir una incompatibilidad. El primero requiere un poco más de esfuerzo y se trata más de proporcionar mejoras cuando son compatibles mientras que siempre proporciona una funcionalidad base que funcione para todos.

## Definiciones

En su artículo, “Graceful degradation versus progressive enhancing”, Christian Heilman proporciona algunas definiciones útiles que ayudan a distinguir entre los dos métodos:

Degradación agraciada: proporcionar una versión alternativa de su funcionalidad o hacer que el usuario sea consciente de las deficiencias de un producto como medida de seguridad para garantizar que el producto sea utilizable”.
Mejora progresiva: comenzando con una línea base de funcionalidad utilizable, luego aumentando la riqueza de la experiencia del usuario paso a paso probando el soporte para mejoras antes de aplicarlas”.

“Degradar con gracia significa mirar hacia atrás, mientras que mejorar progresivamente significa mirar hacia adelante mientras mantiene los pies en un terreno firme”.

Lectura sugerida: Estas definiciones provienen de:[1] Graceful degradation versus progressive enhancing (Christian Heilman, CC-BY NC-SA).

## Cuándo usar qué método con WAI-ARIA

Aunque la mejora progresiva y la degradación agraciada son métodos de desarrollo que pueden seguirse en cualquier proyecto web, aquí hablamos de ellos en relación con el uso de WAI-ARIA.

El soporte para WAI-ARIA está mejorando constantemente, pero todavía hay muchas inconsistencias entre los navegadores y las tecnologías de asistencia. Y todavía habrá quienes utilicen tecnologías de asistencia más antiguas que existían antes de que se agregara el soporte de WAI-ARIA. Debido a que las tecnologías de asistencia suelen ser costosas, los usuarios tienden a actualizarse con menos frecuencia, por lo que es importante apoyar tecnologías que pueden tener cinco años o algo más antiguas.

Los navegadores, por otro lado, suelen ser gratuitos y fácilmente disponibles. Sin embargo, eso no significa necesariamente que los desarrolladores puedan confiar en que los usuarios tengan el último navegador o incluso un navegador actual. No es raro, particularmente en las grandes organizaciones, restringir la capacidad de los empleados para actualizar sus propios sistemas.

Un ejemplo simple de mejora progresiva (aunque también podría verse como una degradación elegante) está en la navegación interna de la página web para lectores de pantalla y usuarios solo de teclado. Antes de la llegada de los puntos de referencia WAI-ARIA, la forma de proporcionar esta navegación dentro de la página era proporcionar enlaces de derivación, que normalmente se ubicarían en la parte superior izquierda de la página. Estos enlaces de derivación conducen a anclajes estratégicamente ubicados, a menudo junto a elementos de navegación y en la parte superior del área de contenido principal. Estos enlaces son HTML estándar y funcionarán para todos. Los hitos WAI-ARIA son relativamente nuevos, aunque el soporte para ellos en los navegadores actuales y las tecnologías de asistencia es bueno. Pero, dado que algunos usuarios estarán utilizando tecnologías más antiguas, al menos a corto plazo, es recomendable proporcionar puntos de referencia como mejora y continuar usando enlaces de derivación para garantizar que siempre haya una manera de navegar de manera efectiva a través del contenido web.

Del mismo modo, cuando se utilizan los elementos HTML más nuevos que pueden no ser compatibles con las tecnologías de asistencia actuales, es una buena idea usar roles redundantes, al menos a corto plazo. Por ejemplo, <nav>y <main>son nuevos elementos HTML, que se supone que son equivalentes a la navegación y a los roles principales de WAI-ARIA. Sin embargo, no todos los AT admiten las nuevas etiquetas en la actualidad. Por lo tanto, es recomendable usar roles redundantes con estos elementos, como se ve en el marcado a continuación, aunque los validadores HTML los marcarán como advertencia.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

This page titled 3.6: Degradación agraciada vs. mejora progresiva is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.