4.2: Hitos WAI-ARIA
- Page ID
- 152635
\( \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 hitos WAI-ARIA se utilizan para definir regiones en una página web. Proporcionan un medio para que los usuarios de tecnología asistencial naveguen de manera efectiva por las diversas áreas de una página. Los puntos de referencia WAI-ARIA deben usarse con otros medios de navegación dentro de la página, como enlaces de derivación y encabezados de página. Estos dos últimos medios de navegación han existido por mucho más tiempo, y muchos seguirán utilizando estos elementos como su método principal de moverse dentro de una página web.
Hay ocho roles históricos.
Siga los enlaces a continuación para leer sobre cada tipo de hito:
En el siguiente video corto, verás cómo ChromeVox interactúa con regiones marcadas para la próxima actividad que viene en esta unidad. Utilízalo como modelo para implementar tus propios puntos de referencia. Apunta a que el envío de tu actividad opere igual que en el video.
Video: Demostración de hitos de WAI-ARIA (1:07)
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=303
Para ayudar a visualizar regiones marcadas, la siguiente figura presenta áreas bien definidas en la página, cada una de las cuales tiene un propósito diferente. A las áreas de banner, el elemento que contiene el contenido de cada región de banner, se les asignaría role="banner”. Al menú de la izquierda se le asignaría su contenedor role="navigation”, al igual que otras barras de navegación o menús si estuvieran presentes. El área de contenido principal, asignada role="main”, es donde aparece el contenido principal de la página. Sólo debe haber una región principal. La región de la derecha que contiene información secundaria, asignado role="complementary”, es donde puede encontrar publicidad o recursos relacionados. Y, finalmente, al contenedor alrededor del área del pie de página se le asignaría role="contentinfo”. Aquí es donde se ubicarían detalles como derechos de autor, una declaración de privacidad, información de contacto, etc.
Los sitios web se pueden diseñar de muchas maneras; este diseño en particular es solo un ejemplo. Los hitos asignados a una región determinada deben reflejar la función de esa región en particular, independientemente de dónde pueda aparecer en la página. Si la publicidad se distribuyera por una región en la parte inferior de la página, por ejemplo, entonces a esa región se le asignaría role="complementary”.
Ejemplo de regiones marcadas de una página web:
Regiones Personalizadas
Si bien la mayoría de los hitos son relativamente autoexplicativos en términos de lo que deben contener, role="region” necesita alguna explicación. Este rol de hito se puede usar para contener información específica que no es descrita de manera efectiva por uno de los otros roles de hito y es lo suficientemente importante como para que un usuario quiera navegar directamente a esa área de la página. Cuando se usa, debe ir acompañado de aria-label o aria-labelledby si existe un elemento existente en la página que describa la región (como un encabezado).
Por ejemplo, es posible que desee definir un área específica en cada página donde se encuentre la información de contacto o un formulario de contacto. El siguiente marcado podría usarse para definir una “región de contacto”.
Otras consideraciones al usar puntos de referencia
- Toda la página definida en regiones: Cuando se utilizan hitos, se considera la mejor práctica contener toda la información presentada en una página dentro de una región, por lo que ninguna información queda huérfana fuera de las regiones definidas.
- Roles duplicados: Para puntos de referencia que pueden usarse para múltiples regiones, como
role="navigation”, estas regiones deben distinguirse entre sí. Por ejemplo, usearia-labeloaria-labelledbypara describir una barra de “navegación principal” y un “menú de contenido”. Ambas son consideradas características de navegación, a pesar de que sirven para diferentes propósitos.