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

La semántica descrita anteriormente se crea agregando roles, estados y propiedades a los elementos HTML.

## Roles

Definición de roles del W3C

“Indicador principal de tipo. Esta asociación semántica permite que las herramientas presenten y apoyen la interacción con el objeto de una manera que sea consistente con las expectativas del usuario sobre otros objetos de ese tipo”.

Fuente: W3C

Los ejemplos de roles incluyen menu, alert, banner, tree, tabpanel, textbox, etc. Una vez asignado a un elemento, los roles no deben cambiar con el tiempo o con la entrada del usuario. Si, por ejemplo, quisieras cambiar de una “barra de menú” mientras se ve en modo de pantalla completa a un “menú” de alternancia cuando se ve en un dispositivo móvil, todo el bloque de marcado cambiaría, en lugar de cambiar la barra de menú por menú.

Los roles se categorizan en seis agrupaciones. Aquí están los grupos con algunos ejemplos de cada tipo:

• Papel abstracto (no debe ser utilizado por los autores en el contenido, la base de la ontología WAI-ARIA)
• Funciones de widget (por ejemplo, botón, enlace, elemento de menú)
• Funciones de estructura de documentos (por ejemplo, artículo, feed, lista, tabla)
• Roles emblemáticos (por ejemplo, banner, navegación, principal, complementario)
• Funciones de ventana (por ejemplo, alertdialog, dialog)

Los roles generalmente se agregan a los elementos HTML usando el atributo role de la siguiente manera. En el siguiente ejemplo, a una lista desordenada se le da un papel de barra de menú. Normalmente, esto se usa al crear una barra de navegación horizontal en la parte superior de una interfaz de usuario. A cada elemento de la lista se le da un papel de menuitem.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.
Lectura sugerida: Aquí está la lista completa de roles en WAI-ARIA 1.1.

“Un estado es una propiedad dinámica que expresa características de un objeto que puede cambiar en respuesta a la acción del usuario o procesos automatizados. Los estados no afectan la naturaleza esencial del objeto, sino que representan datos asociados con las posibilidades de interacción del objeto o usuario. Ver: aclaración de estados versus propiedades.”

Fuente: W3C

Los estados se utilizan junto con los roles, típicamente, para definir su estado funcional. Los estados son muy parecidos a las propiedades, aunque normalmente cambian mientras se usa una aplicación o widget (por ejemplo, cambios verificados por aria entre true y false). Las propiedades normalmente no cambian (por ejemplo, aria-labelledby mantiene el mismo valor). Los estados y las propiedades tienen el prefijo “aria-”, a diferencia de los roles.

Aquí hay algunos ejemplos de estados:

• aria-expandido
• aria-oculto

Fuente: W3C

Las propiedades, como se mencionó anteriormente, son muy parecidas a los estados en la forma en que se usan junto con los roles. Sin embargo, a diferencia de los estados que cambian, las propiedades tienden a seguir siendo las mismas (aunque esto no es una regla). Intuitivamente, puede notar la naturaleza cambiante de los estados enumerados anteriormente, y la naturaleza estática de las propiedades enumeradas a continuación.

Aquí hay algunos ejemplos de propiedades:

• aria-describedby
• aria-atómica
• aria-autocompletar
• aria-colcount
• aria-colspan
• aria-controles
Lectura sugerida: Consulte la Especificación WAI-ARIA para obtener una lista completa de estados y propiedades.

This page titled 3.3: Roles, estados y propiedades is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.