¡Bienvenidos! Feliz de verlos en la quinta parte de mi serie de resúmenes de Vuejs Amsterdam Conference 2022, en la que comparto un resumen de todas las charlas con ustedes.

Puede leer mi serie de resúmenes de la JSWorld Conference 2022 (en cuatro partes) aquí , donde resumí todas las charlas del primer día. También puede encontrar las charlas anteriores de la conferencia Vue Amsterdam 2022 en mi blog.

(Recurrente) Introducción

Después de dos años y medio, JSWorld y Vue Amsterdam Conference volvieron al Theatre Amsterdam entre el 1 y el 3 de junio, y tuve la oportunidad de asistir a esta conferencia por primera vez. Aprendí muchas cosas, conocí a mucha gente maravillosa, hablé con grandes desarrolladores y la pasé muy bien. El primer día se llevó a cabo la JSWorld Conference, y el segundo y tercer día, la Vue Amsterdam.

La conferencia estuvo llena de información con grandes oradores, cada uno de los cuales me enseñó algo valioso. Todos querían compartir sus conocimientos e información con otros desarrolladores. Entonces pensé que sería genial si pudiera continuar compartiéndolo y ayudar a otros a usarlo.

Al principio, traté de compartir algunas notas o diapositivas, pero sentí que no era lo suficientemente bueno, al menos no tan bueno como lo que el orador compartió conmigo. Así que decidí volver a ver cada discurso, profundizar en ellos, buscar, tomar notas y combinarlos con sus diapositivas e incluso con sus palabras exactas en su discurso y luego compartirlo con ustedes para que lo que les comparto sea al menos al mismo nivel que lo que aprendí de ellos.

Un punto muy importante

Todo lo que lee durante estos pocos artículos es el resultado del esfuerzo y el tiempo del propio hablante, y solo he tratado de aprenderlos para poder convertirlos en estos artículos. Incluso muchas de las oraciones escritas en estos artículos son exactamente lo que dijeron o lo que escribieron en Diapositivas. Esto significa que si aprendes algo nuevo, es gracias a sus esfuerzos. (Entonces, si ven alguna información errónea, culpen a ellos, no a mí, ¿no? xD)

Por último, pero no menos importante, es posible que no profundice en todos los detalles técnicos o codificaciones en vivo en algunos de los discursos. Pero si está interesado y necesita más información, hágamelo saber e intentaré escribir un artículo más detallado por separado. Además, no olvide consultar su Twitter/Linkedin.

Aquí puede encontrar el programa de la conferencia.

¡Widgets reutilizables que funcionan!

Maria Lamardo - Jefa de Capacitación en Accesibilidad y Gerente Sénior de Ingeniería de Accesibilidad en CVS Health

Vue.js es un marco increíble que le permite construir rápidamente componentes reutilizables. Podemos aprovechar esto para crear widgets reutilizables accesibles con la ayuda de ARIA (aplicación de Internet enriquecida accesible). Usando los roles y atributos de ARIA, podemos mejorar la accesibilidad de ciertos elementos proporcionando semántica adicional. En esta charla, repasaremos cómo seguir las especificaciones y crear pestañas, acordeones, botones de alternar y cuadros de diálogo modales accesibles y reutilizables que funcionen para todos.

Modal

Todo lo que necesita saber sobre ARIA está bien documentado en W3C y se recomienda leerlo, pero aquí hay una versión resumida.

Consideraciones de diseño modales

• Debe tener un botón que cierre el diálogo.
• El contenido fuera del cuadro de diálogo debe oscurecerse con un estilo visual como un fondo gris.
• Asegúrese de evitar que los usuarios interactúen con el contenido fuera del cuadro de diálogo.

Interacción de enfoque de apertura de modales

Cuando se abre un cuadro de diálogo, el foco se puede establecer en el primer elemento enfocable o en un elemento estático en la parte superior del cuadro de diálogo para que el contenido sea más fácil de leer y garantizar que todo el contenido permanezca a la vista, o el elemento más utilizado si hay interacciones. se limitan a facilitar información o continuar con el tratamiento.

No desea enfocarse en algo que será destructivo para el usuario, por ejemplo, imaginemos que tiene una interacción en la que abre un modal para eliminar su cuenta. No desea establecer el primer enfoque en "Sí, eliminar mi cuenta".

Interacción de enfoque de cierre de modales

Cuando se cierra un cuadro de diálogo, el enfoque se establece en el elemento que invocó el cuadro de diálogo, o cuando no tiene sentido, puede establecer el enfoque en un elemento diferente, como un elemento que proporciona un flujo de trabajo lógico si el elemento que invoca ya no existe, o en el siguiente elemento si hay un paso posterior en el flujo de trabajo después de la finalización de la tarea de diálogo, especialmente si es muy poco probable que se vuelva a abrir inmediatamente el diálogo.

Interacción de teclado modales

Consideraciones técnicas modales

El contenedor de diálogo debe tener:

• Papel del diálogo
• aria-modal establecido en verdadero.
• aria-label o aria-labeled al referirse al título del cuadro de diálogo, esto ayudará a las tecnologías de asistencia a determinar cuál será el nombre de este elemento.
• Opcionalmente, puede establecer aria-describedby en cualquier descripción.

Todos los elementos necesarios para operar el diálogo deben ser descendientes del elemento que tiene un rol de diálogo.

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

En Mac, puede activar Voice Over, que es el lector de pantalla predeterminado de Mac, haciendo clic en Comando + F5, y luego puede revisar su página y probarlo.

También en Chrome Dev-Tools, hay una pestaña de accesibilidad que tiene información interesante sobre accesibilidad.

Con eso, puede abrir este ejemplo y verificarlo, y aquí está el código.

Botones de alternar

Si desea la información completa, puede encontrarla en el sitio web del W3C .

Botones

Un botón es un widget que permite a los usuarios activar una acción o un evento, como enviar un formulario, abrir un cuadro de diálogo, cancelar una acción o realizar una operación de eliminación.

Además del widget de botón ordinario, WAI-ARIA admite otros 2 tipos de botones:

• Botones de alternar
• Botones de menú

Consideraciones de diseño de los botones de alternar

Un botón de dos estados que puede estar apagado (no presionado) o encendido (presionado).

Para decirle a las tecnologías de asistencia que un botón es un botón de alternancia, especifique un valor para el atributo aria-pressed .

La etiqueta de un conmutador no debe cambiar cuando cambia su estado; si la etiqueta cambia en el diseño, no hay necesidad del atributo aria-pressed.

Control de enfoque de botones de alternancia

• Si al activar el botón no se descarta el contexto actual, el foco permanece en el botón después de la activación.
• Si al activar el botón se abre o cierra un cuadro de diálogo, siga el patrón del cuadro de diálogo.
• Si la acción del botón indica un cambio de contexto, puede mover el foco al punto de inicio de esa acción
• Si el botón se activa con una tecla de método abreviado, el enfoque generalmente permanece en el contexto desde el que se activó la tecla de método abreviado

Interacción del teclado de los botones de alternar

Botones de alternancia Consideraciones técnicas

• El botón Alternar debe tener la función de botón .

• Asegúrese de que el botón tenga un nombre accesible.

• Puede establecer aria-describedby en cualquier descripción.

• Puede agregar el conjunto deshabilitado de aria a verdadero si la acción no está disponible.

• El botón de alternar tiene un estado presionado por aria .

  
  

 <button aria-pressed="false"> Mute </button>

Aquí hay un buen ejemplo que puede consultar y aquí está el código.

acordeones

Aquí está la documentación completa. Echemos un vistazo a sus puntos principales.

Consideraciones de diseño de acordeones

Conjunto de encabezados interactivos apilados verticalmente, cada uno de los cuales contiene un título, un fragmento de contenido o una miniatura que representa una sección de contenido

Encabezado de acordeón:

Etiqueta o miniatura que representa una sección de contenido que también sirve como control para mostrar y, en algunas implementaciones, ocultar la sección de contenido.

Panel acordeón:

Sección de contenido asociado a un encabezado de acordeón.

Interacción de teclado de acordeones

Consideraciones técnicas de los acordeones

Asegúrese de que cada botón de encabezado de acordeón tenga:

• envuelto en un encabezado
• controles aria establecidos en el ID del contenido del panel de acordeón correspondiente
• aria-expanded establecido en verdadero si el contenido del panel correspondiente es visible
• aria-disabled establecido en verdadero si el acordeón colapsado no está permitido
• Cada contenido del panel tiene una región de roles y un aria etiquetado por el botón de encabezado correspondiente (Opcional)
• Evite usar el rol de región en circunstancias que creen demasiadas regiones emblemáticas

Ejemplo de código de acordeones

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

Aquí hay un buen ejemplo y su código .

Pestañas

Puede ver la documentación completa de Tabs en W3C .

Consideraciones de diseño de pestañas

Las pestañas son un conjunto de secciones de contenido en capas, conocidas como paneles de pestañas, que muestran un panel de contenido a la vez.

Lista de pestañas: un conjunto de elementos de pestañas contenidos en un elemento de lista de pestañas

Pestaña: un elemento en la lista de pestañas que sirve como etiqueta para uno de los paneles de pestañas y se puede activar para mostrar ese panel

Panel de pestañas: El elemento que contiene el contenido asociado a una pestaña

Se recomienda que las pestañas se activen automáticamente cuando reciban el foco, siempre que sus paneles de pestañas asociados se muestren sin latencia notable.

Pestañas Interacción del teclado

Pestañas Interacción de teclado opcional

Pestañas Consideraciones técnicas

Función de la lista de pestañas: el elemento que contiene un conjunto de pestañas debe tener aria-labeledby o aria-label .

Rol de la pestaña: el elemento que sirve como pestaña debe tener controles aria emparejados con el panel de pestañas asociado, la pestaña activa debe tener el estado aria-selected establecido en verdadero; todas las demás pestañas se establecen en falso.

Y debería tener la propiedad aria-haspopup establecida en menu o true si un elemento de pestaña tiene un menú emergente.

Función del panel de pestañas: el elemento que contiene el panel de contenido para una pestaña debe tener aria-labeledby emparejado con la pestaña asociada y establecer la orientación de aria en vertical u horizontal (predeterminado).

Ejemplo de código de pestañas

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

Aquí hay un buen ejemplo y su código .

Recursos

Guía de prácticas de creación de ARIA

Pautas de accesibilidad al contenido web (WCAG) 2.1

Puede encontrar un ejemplo de código Vue completo con diferentes componentes aquí:

https://github.com/mlama007/Widgets

Fin de la quinta Charla

Espero que hayas disfrutado esta parte y que pueda ser tan valiosa para ti como lo fue para mí.

Durante los próximos días, compartiré con ustedes el resto de las charlas. Manténganse al tanto…

También publicado aquí .