2.8: WAI-ARIA y HTML 5

Última actualización
Guardar como PDF

Page ID: 152673

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

WAI-ARIA fue lanzado como complemento a HTML5. Su propósito principal es dar a los desarrolladores más libertad para crear contenido web personalizado, aplicaciones web y controles de interfaz creados con HTML, JavaScript y Ajax. WAI-ARIA proporciona un marco para agregar semántica que hace posible que los usuarios de tecnología de asistencia comprendan y operen estos elementos personalizados.

La mayoría de HTML tiene semántica incorporada y generalmente no necesita WAI-ARIA. Sin embargo, cuando se está usando HTML de una manera no estándar, como hacer un botón de un<div>, entonces WAI-ARIA se puede agregar <div>a eso para que aparezca como un botón a un lector de pantalla agregando lo siguiente: Agregar el rol de “botón” (es decir, role="button”), agrega un nulo tabindex value (i.e., tabindex="0"), lo que lo hace enfocable, luego define su estado usando el atributo aria-pressed, que se actualiza con JavaScript cuando se presiona el botón. En el caso de un <button>elemento real, estas propiedades ya están definidas, por lo que no es necesario usar WAI-ARIA.

<div role="button" aria-pressed="false" tabindex="0">Press Me</div>

Aunque WAI-ARIA se usa normalmente con HTML5, también se puede usar con XHTML y HTML4. Puede encontrar, sin embargo, que los validadores HTML ven WAI-ARIA como marcado roto en versiones anteriores de HTML, pero no se preocupe por eso. Cualquier error relacionado con WAI-ARIA que un validador pueda identificar en HTML más antiguo generalmente se puede ignorar (suponiendo que se haya utilizado correctamente). A estas alturas, sin embargo, deberías estar usando HTML5. Si está actualizando código anterior, luego continúe y agregue WAI-ARIA a él. Si estás desarrollando algo nuevo, entonces ve con HTML5.