3.3: Roles, estados y propiedades

Última actualización
Guardar como PDF

Page ID: 152554

\( \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}}\)

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)
Roles de región en vivo (por ejemplo, alerta, registro, temporizador)
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.

Estados

Definición W3C de estados

“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-ocupado
aria-comprobado
aria-expandido
aria-discapacitados
aria-oculto

Propiedades

Definición W3C de propiedades

“Atributos que son esenciales para la naturaleza de un objeto dado, o que representan un valor de datos asociado al objeto. Un cambio de una propiedad puede afectar significativamente el significado o la presentación de un objeto. Ciertas propiedades (por ejemplo, aria-multilínea) tienen menos probabilidades de cambiar que los estados, pero tenga en cuenta que la diferencia de frecuencia de cambio no es una regla. Se espera que algunas propiedades, como aria-activedescendant, aria-valuenow y aria-valuetext cambien a menudo. Ver aclaración de estados versus propiedades.”

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.