¡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.

puede encontrar el programa de la conferencia.

---

¡Widgets reutilizables que funcionan!

- 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 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

Pestaña	Mueve el foco al siguiente elemento que se puede tabular en modalRecorriendo el primer elemento
Mayús + Tabulador	Mueve el foco al elemento anterior que se puede tabular en modal Recorriendo hasta el último elemento
Escapar	Cierra el cuadro de diálogo

Consideraciones técnicas modales

El contenedor de diálogo debe tener:

• Papel del
• establecido en verdadero.
• o 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 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 y verificarlo, y está el código.

Botones de alternar

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

Botones

Un 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 .

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

Ingresar	Activa el botón
Espacio	Activa el botón

Botones de alternancia Consideraciones técnicas

• El botón Alternar debe tener la función de .
• Asegúrese de que el botón tenga un nombre accesible.
• Puede establecer en cualquier descripción.
• Puede agregar el conjunto a verdadero si la acción no está disponible.
• El botón .

  
  

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

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

acordeones

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

Entrar o Espacio	Expande el panel contraído asociado, opcionalmente contrae otro panel abiertoContrae el panel expandido asociado; si la implementación lo permite.
Pestaña	Mueve el foco al siguiente elemento enfocable
Mayús + Tabulador	Mueve el foco al elemento enfocable anterior
Flecha hacia abajo (opcional)	Mueve el foco del encabezado de acordeón al siguiente encabezado de acordeón. Opcionalmente, regresa al primer encabezado de acordeón.
Flecha arriba (opcional)	Mueve el foco del encabezado de acordeón al encabezado de acordeón anterior Opcionalmente vuelve al último encabezado de acordeón
Inicio (Opcional)	Mueve el foco de un encabezado de acordeón al primer encabezado de acordeón
Fin (Opcional)	Mueve el foco de un encabezado de acordeón al último encabezado de acordeón

Consideraciones técnicas de los acordeones

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

• envuelto en un encabezado
• establecidos en el ID del contenido del panel de acordeón correspondiente
• establecido en verdadero si el contenido del panel correspondiente es visible
• establecido en verdadero si el acordeón colapsado no está permitido
• Cada contenido del panel tiene una y 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 y su .

Pestañas

Puede ver la documentación completa de Tabs en .

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 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ña	Coloca el foco en el elemento de pestaña activo cuando el usuario se mueve a la lista de pestañas
Flecha izquierda (pestañas horizontales)
Flecha arriba (pestañas verticales)	Mueve el foco a la pestaña anterior; bucle a la última pestaña Opcionalmente, activa la pestaña recién enfocada
Flecha derecha (pestañas horizontales)
Flecha hacia abajo (pestañas verticales)	Mueve el foco a la siguiente pestaña; bucle a la primera pestaña Opcionalmente, activa la pestaña recién enfocada
Espacio o Entrar	Activa la pestaña si no se activó automáticamente al enfocar
Mayús + F10	Cuando el foco está en una pestaña que tiene un menú emergente asociado, abre el menú

Pestañas Interacción de teclado opcional

Inicio (opcional)	Mueve el foco a la primera pestaña Opcionalmente, activa la pestaña recién enfocada
Fin (opcional)	Mueve el foco a la última pestaña Opcionalmente, activa la pestaña recién enfocada
Eliminar (opcional)	Si se permite la eliminación, elimina (cierra) el elemento de pestaña actual y su panel de pestañas asociado, establece el foco en la pestaña que sigue a la pestaña que se cerró y, opcionalmente, activa la pestaña recién enfocada

Pestañas Consideraciones técnicas

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

Rol de la pestaña: el elemento que sirve como pestaña debe tener 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 y su .

Recursos

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

---

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 .