Explicar los beneficios de accesibilidad del uso de elementos HTML semánticos.

Esto es lo que encontrarás en la naturaleza:

<div class="btn" role="button">Custom Button</div>

este es uno de ellos el código huele Esto me hace reflexionar porque sabemos que hay una relación semántica. <button> elementos que podemos utilizar. Una cosa más sobre la fusión de anclajes (p. ej. <a class="btn">) y botones, pero eso no es exactamente de lo que estamos hablando aquí, y Tenemos una gran guía..

una semántica <button> Los elementos tienen más sentido que alcanzarlos <div> Porque, bueno, Semántica. Al menos eso es lo que me provoca el olor del código. Puedo resumir algunos de los beneficios semánticos que obtenemos de una <button> Fuera de mi cabeza:

• estado de interacción
• indicador de enfoque
• soporte de teclado

Pero me encuentro incapaz de definir claramente estos beneficios. Son más bien temas de conversación que mantengo en lugar de argumentos claros para usar. <button> Superar <div>. Pero cuando me pongo Sara Soueidan Funciones auxiliares útiles cursotengo una imagen más clara Por qué <button> es una mejor práctica.

Comparemos estos dos métodos:

¿Sabías que puedes comprobar esta semántica directamente en DevTools? Me avergüenza admitir que no hice esto antes de ver la clase de Sara.

Claramente hay una diferencia entre estos dos «botones», y no es sólo visual. Tenga en cuenta lo siguiente:

• este <button> expuesto como button papel, al mismo tiempo <div> es un generic Role. Eso ya lo sabemos.
• este <button> Obtiene la misma etiqueta de accesibilidad que su contenido.
• este <button> Sea enfocable y obtenga oyentes que hagan clic de inmediato.

No estoy seguro Por qué Alguien lo alcanzará <div> más de uno <button>. Pero si tuviera que apostar, probablemente sería por el estilo. <button> Más difícil que modelar <div>. Tienes que restablecer todos esos estilos de agente de usuario, lo que parece un paso adicional en el proceso, cuando <div> No hay ningún comentario de estilo, aparte de ser un elemento a nivel de bloque en lo que respecta al flujo de documentos.

No entiendo el razonamiento cuando el estilo del botón de reinicio solo requiere una línea de CSS:

Desde aquí, podemos usar exactamente la misma clase para obtener exactamente el mismo aspecto:

Parece que se requiere más trabajo para recrear los mismos beneficios integrados que obtenemos de la semántica. <button> Específicamente para uno <div>. El curso de Sara me dio el lenguaje preciso para expresar olores de código:

• div no Tab Enfocado por defecto. Incluso después de darle la función de botón, el navegador no lo reconoce como un elemento interactivo. Esta función no añade ningún comportamiento, sólo la forma en que se presenta a los lectores de pantalla. tenemos que darle un tabindex.
• Pero aun así, no podemos operar el botón. Space o Return. También necesitaremos agregar un comportamiento interactivo, posiblemente usando un oyente de JavaScript para activar una función al presionar un botón.
• Sabes Space y Return ¿Las teclas hacen cosas diferentes? Adrián Rosselli lo explica bieneste fue un gran momento para mí. Es posible que se necesiten audiencias diferentes para interpretar las dos interacciones.
• Por supuesto, debemos considerar disabled estado. Todo lo que requiere es un atributo HTML <button>pero uno <div> Es posible que también necesite otra función para encontrar algún tipo de atributo de datos y luego configurarlo. disabled encima de eso.

Oh, pero bueno, podemos abofetear <div role=button> Ahí, ¿verdad? Es muy tentador ir allí pero lo único que hace es exponer <div> Botones como tecnología de asistencia. Se declara como un botón pero no hace nada para recrear la interacción necesaria para una experiencia de usuario completa. <button> Hacer. Y ningún estilo puede arreglar esta semántica. podemos hacer uno <div> Parece un botón, pero aunque parece un botón, no es un botón.

De todos modos, eso es lo que quería compartir. Usar elementos semánticos siempre que sea posible es una de las declaraciones de «mejores prácticas» que aprendimos a lo largo del camino. Se lo enseño a mis alumnos, pero soy culpable de confiar en un razonamiento de alto nivel «ayuda con la accesibilidad» que es universal. <div>. Ahora tengo puntos de conversación específicos para explicar. Por qué Este es el caso, y una «nueva» arma en mi arsenal de DevTools para comprobar y confirmar estos puntos.

¡Gracias Sara! Esto es sólo la punta del iceberg en términos de lo que estoy aprendiendo (y seguiré aprendiendo) curso.