test - jquery mobile tutorial

Cuál es la diferencia entre ARIA y data-*

Question

Para agregar más significado a la etiqueta HTML, estoy usando data - * . De hecho, he aprendido este enfoque de jquery mobile. Pero recientemente me encontré con WAI-ARIA . Parece que es casi similar a los datos - * . ¿Alguien puede explicarme cómo son diferentes y la dependencia de su navegador?

Enlaces útiles

sobre WAI-ARIA

sobre datos- *

ACTUALIZACIÓN: Finalmente ... ambos son diferentes. Tienen una sintaxis similar. Eso me confundió. Estoy aceptando la respuesta de @Gajotres. Y vea este video de you tube para ARIA en vivo. Haga coincidir este video con la respuesta de @Gajotres.

Answer 1

El atributo data- *

El borrador de trabajo del W3C HTML5 dice:

"Un atributo de datos personalizado es un atributo en ningún espacio de nombres cuyo nombre comienza con la cadena" data- ", y tiene al menos un carácter después del guión ..."

Estos atributos de datos personalizados le permiten crear atributos para compartir datos con scripts ejecutados en su propio sitio. No deben ser utilizados o cosechados por software genérico. No está limitado en cuántos atributos de datos personalizados puede especificar. De acuerdo con caniuse.com, "todos los navegadores ya pueden usar atributos data- * y acceder a ellos usando getAttribute".

Debido al buen soporte, existen muchos ejemplos de atributos de datos personalizados que ya existen en la naturaleza. Si tiene Dreamweaver CS5.5, puede crear una aplicación jQuery Mobile (JQM). jQuery Mobile hace un uso extensivo de atributos de datos personalizados para identificar roles de elementos, temas y muchas otras cosas. Aquí hay un ejemplo de una página de JQM:

<div data-role="page" id="page" data-theme="b"> 
    <div data-role="header"> 
        <h1>Header</h1> 
    </div> 
    <div data-role="content">Content</div> 
    <div data-role="footer"> 
        <h4>Footer</h4> 
    </div> 
</div>

Los atributos de rol y aria- *

Si se esfuerza para hacer que su sitio web sea accesible para los usuarios con una variedad de hábitos de navegación y discapacidades físicas, probablemente reconocerá los atributos de rol y aria- *. WAI-ARIA (Aplicaciones de Internet enriquecidas accesibles) es un método para proporcionar formas de definir su contenido web dinámico y aplicaciones para que las personas con discapacidades puedan identificarlo e interactuar con él con éxito. Esto se hace a través de roles que definen la estructura del documento o aplicación, o mediante atributos aria- * que definen un widget-rol, relación, estado o propiedad.

Se recomienda el uso de ARIA en las especificaciones para hacer que las aplicaciones HTML5 sean más accesibles. Al usar elementos semánticos HTML5, debe establecer su función correspondiente. La estructura básica puede verse más o menos así:

<header id="banner" role="banner"> 
    ... 
</header> 
<nav role="navigation"> 
   ... 
</nav> 
<article id="post" role="main"> 
   ... 
</article> 
<footer role="contentinfo"> 
    ... 
</footer>

También hay una gran cantidad de atributos aria- * para que su contenido sea más navegable y comprensible. Cosas como aria-labelledby, aria-level, aria-describedby, y aria-orientation hacen que tu contenido sea más reconocible. Puede leer más sobre esto en la página de estados y propiedades de ARIA.

Conclusión:

Quédate con los atributos data- *. Actualmente están mejor respaldados. Y el debería ser utilizado como un reemplazo para un tipo más antiguo de atributos personalizados. También los atributos data- * se crean para ser titulares de datos, mientras que los atributos ARIA y ROLE se crean para una mejor legibilidad.

Answer 2

No hay nada en común entre ellos, excepto que sean atributos de HTML.

Los atributos de ARIA se definen en las especificaciones y se supone que deben ser observados por el software pertinente, como los navegadores y el software de ayuda.

Los atributos de data- son un mecanismo designado específicamente para uso en toda la página o en todo el sitio para cualquier propósito que se desee, sin una definición general para ellos. Es decir, son para "uso privado", básicamente para las secuencias de comandos del lado del cliente (y posiblemente para el estilo, y también podrían usarse en motores de búsqueda específicos del sitio y en herramientas de autoría). Un atributo data-foo en su sitio nunca chocará con ningún atributo definido en las especificaciones o con cualquier otra cosa, siempre y cuando usted (o el administrador del sitio) mantenga su uso constante y tenga su propia documentación interna de su uso de tales atributos.