4.7: Roles de Aplicación y Presentación
- Page ID
- 152646
\( \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}\)Los roles de aplicación y presentación en WAI-ARIA cambian la forma en que las tecnologías de asistencia interactúan con el contenido web. Ambos tienen advertencias de “usar con precaución”. Aquí se describe su uso y dónde y cuándo usarlos.
Rol de aplicación
El rol de aplicación se utiliza cuando no hay un patrón de interacción de widget correspondiente disponible para proporcionar semántica para un widget personalizado.
Imagine, por ejemplo, una aplicación de administrador de archivos incrustada en una página web, que no tiene roles de widget específicamente definidos. Puede tener muchas de las funciones que un administrador de archivos típico podría tener en un sistema Windows, Mac o Linux. Podría tener los menús típicos Archivo, Editar y Ver que tienen la mayoría de las aplicaciones, incluidos los navegadores. Esos menús en el administrador de archivos deberían funcionar como estos mismos menús en otras aplicaciones. Cuando el rol de aplicación se usa en un contenedor que contiene el administrador de archivos incrustado, las pulsaciones de teclas son interceptadas y reutilizadas para operar el administrador de archivos, en lugar del navegador y la tecnología de asistencia.
Cuando está en la aplicación de administrador de archivos, este comportamiento puede ser deseable. Pero, definido con el rol de la aplicación, todas las teclas de método abreviado estándar del lector de pantalla también están deshabilitadas, por lo que el usuario ya no puede navegar por las páginas por encabezados, o puntos de referencia, por ejemplo, mientras está dentro de la aplicación. Esto puede estar bien en tal caso porque el usuario del lector de pantalla probablemente querrá temporalmente teclas de método abreviado para las funciones del administrador de archivos, y no las del navegador o lector de pantalla.
Sin embargo, si el rol de la aplicación se usa para contener un widget de carrusel, por ejemplo, entonces la funcionalidad del navegador y la tecnología de asistencia pueden estar innecesariamente deshabilitadas, creando potencialmente barreras. Un widget de carrusel suele tener una funcionalidad limitada. Por ejemplo, los carruseles pueden contener teclas de flecha con guión para moverse hacia adelante y hacia atrás entre diapositivas, entre encabezados dentro de cada diapositiva para agregar estructura, o enlazar a otra sección del sitio presentado en una diapositiva. En tales casos, los usuarios de lectores de pantalla no podrían navegar por las diapositivas enumerando encabezados o enlaces, usando la funcionalidad predeterminada de encabezado y lista de enlaces de su lector de pantalla. Al eliminar el rol de la aplicación, el enlace siguiente/anterior con guión, así como el encabezado y los enlaces podrían usarse para navegar por el carrusel.
El resultado final es usar la función de aplicación con cuidado. Asegúrate de que no esté creando más barreras de las que se pretende prevenir.
Rol de presentación
Al igual que el rol de la aplicación deshabilita la funcionalidad predeterminada del teclado, el rol de presentación (y su sinónimo role="none”
), teóricamente, elimina la semántica predeterminada de los hijos del elemento al que se aplica.
Entonces, por ejemplo, si tienes una lista con role="presentation”
, no debe anunciarse como lista, y sus elementos de lista no deben anunciarse como elementos de lista. Sin embargo, las listas anidadas dentro de esos elementos de lista suprimidos se anunciarán como de costumbre.
Hay un par de excepciones previstas en las que el rol de presentación no eliminará la semántica predeterminada:
- Cuando
role="presentation”
no se aplica a elementos que tienen enfoque de tabulación, como enlaces, elementos de formulario y elementos que tienen tabindex definido, o - Donde un elemento ha sido modificado con cualquiera de los 21 estados o propiedades globales
Donde role="presentation”
se aplica a un elemento padre, todos sus elementos secundarios deben heredar ese rol, pero no todos sus nietos. Por ejemplo, si <ul role="presentation">se usa entonces se <li>ignorará la semántica para cada uno de sus
elementos. Pero, si un
<li>contiene una sublista, esa lista se anunciaría como de costumbre.
Cabe señalar que el soporte actual para el rol de presentación es manchado en todos los navegadores y tecnologías de asistencia, y es probable que no lo encuentre tan útil si está tratando de desarrollar con compatibilidad entre navegadores. Por lo general, las tablas, las imágenes y los encabezados se ven afectados por el rol de presentación, mientras que otros elementos como listas, formularios y enlaces no se ven afectados, o solo parcialmente, se ven afectados. Si está tratando de ocultar elementos completamente de los lectores de pantalla, podría considerar usar aria-hidden
o CSS display:none
.
Tres usos comunes para role="presentation”
incluyen:
- Ocultar una imagen decorativa. Es equivalente a dar a la imagen un texto alt nulo.
- Suprimir la semántica de tablas para tablas utilizadas para el diseño en circunstancias en las que la semántica de tablas no transmita relaciones significativas.
- Eliminar la semántica de elementos huérfanos intermedios en la estructura de un widget compuesto, como un tablista, menú o árbol como se demuestra en el ejemplo anterior.
Fuente: Mejores prácticas de autoría de WAI-ARIA
También hay una serie de roles WAI-ARIA que actúan como el rol de presentación, y estos suprimen la semántica predeterminada para los elementos a los que se aplican. Por ejemplo, si se crea un tablist
a partir de a<ul>, y
role="tab”
se aplica a cada uno de los elementos de la lista dentro de ese<ul>, su rol de
listitem
predeterminado será reemplazado por el rol de tabulación
, sin necesidad de establecerlos como presentacional.
Los siguientes ejemplos de JSFiddle han sido creados para probar el rol de presentación entre navegadores. Navega por cada ejemplo con ChromeVox + Chrome. Si los tienes disponibles, navega también con JAWS + IE y NVDA + FF para entender el variado soporte para el rol de presentación. A continuación, el fiddle es una lista de soporte para las versiones actuales de estos lectores de pantalla.
Saltar JSFiddle
Salida del lector de pantalla de la demostración anterior
NVDA (2018.1.1) + Borde (41.16299.248.0)
Por teclado, solo se anuncia el enlace. Mouseover, sin embargo, y se anuncian todos los elementos.
- Enlace: no anunciado
- Lista: no anunciada o enfoable por teclado
- Encabezados: no anunciados o enfocados por teclado
- Tabla: no anunciada o enfocable por teclado
- Imagen: no anunciada o enfoable por teclado
- Forma: “Cuadro combinado opt tres colapsado”
NVDA (2018.1.1) + FireFox (59.0.2)
- Enlace: anuncia como de costumbre
- Lista: valores anunciados pero no balas o la lista en sí
- Encabezados: anunciar como de costumbre
- Tabla: no anunciada.
- Imagen: no anunciada
- Formulario: anuncia opta pero no el combobox
JAWS (18) + Borde (41.16299.248.0)
- Enlace: enfocable, pero no anunciado
- Lista: no enfocable, no anunciada
- Encabezados: no anuncia el primer rubro, pero sí anuncia el segundo encabezado
- Tabla: no anunciada
- Imagen: no anunciada
- Forma: no enfocable, no anunciada
ChromeVox (53.0.2784.5)
- Enlace: enfoable, pero no leído (usando la tecla Tab) Anuncia como de costumbre al usar CVOX + Flechas
- Lista: salta sobre la lista (usando la tecla de flecha) excepto cuando el enlace recibe el foco primero, luego la tecla de flecha anuncia los números en la lista. Anuncia números pero no como lista al usar CVOX + Flechas
- Encabezados: No anuncia el primer encabezado, pero sí anuncia el segundo (Flechas y CVOX+flechas)
- Tabla: no anunciada.
- Imagen: lee texto alt “Ryerson Chang School” tanto Flecha como CVOX + Flecha
- Formulario: enfosable, no anunciado (usando la tecla Tab), las teclas de flecha anuncia “Combobox. Opt 3, 3 de 3.”
Lectura sugerida:
- Papel de presentación WAI-ARIA
- PowerMapper: Compatibilidad con lectores de pantalla (actualizado en diciembre de 2017)
- Mozilla: Casos de prueba ARIA