¡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) , 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. aquí (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 y solo he tratado de aprenderlos para poder convertirlos en estos artículos. Incluso 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) Todo lo que lee durante estos pocos artículos es el resultado del esfuerzo y el tiempo del propio hablante, muchas de las oraciones escritas en estos artículos son exactamente lo que dijeron o lo que escribieron en Diapositivas. 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. Aquí ¡Widgets reutilizables que funcionan! - Jefa de Capacitación en Accesibilidad y Gerente Sénior de Ingeniería de Accesibilidad en CVS Health Maria Lamardo 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. W3C 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 diálogo establecido en verdadero. aria-modal 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. aria-label aria-labeled Opcionalmente, puede establecer en cualquier descripción. aria-describedby 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. este ejemplo aquí Botones de alternar Si desea la información completa, puede encontrarla en el sitio web del . W3C 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. botó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 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 . botón Asegúrese de que el botón tenga un nombre accesible. Puede establecer en cualquier descripción. aria-describedby Puede agregar el conjunto a verdadero si la acción no está disponible. deshabilitado de aria El botón . de alternar tiene un estado presionado por aria <button aria-pressed="false"> Mute </button> Aquí hay un buen que puede consultar y está el código. ejemplo aquí acordeones está la documentación completa. Echemos un vistazo a sus puntos principales. Aquí 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 controles aria establecido en verdadero si el contenido del panel correspondiente es visible aria-expanded establecido en verdadero si el acordeón colapsado no está permitido aria-disabled Cada contenido del panel tiene una y por el botón de encabezado correspondiente (Opcional) región de roles un aria etiquetado 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 . ejemplo 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. un conjunto de elementos de pestañas contenidos en un elemento de de pestañas Lista de pestañas: lista 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 Pestaña: El elemento que contiene el contenido asociado a una pestaña Panel de pestañas: 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 elemento que contiene un conjunto de pestañas debe tener o . Función de la lista de pestañas: el aria-labeledby aria-label 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. Rol de la pestaña: controles aria Y debería tener la propiedad aria-haspopup establecida en menu o true si un elemento de pestaña tiene un menú emergente. 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). Función del panel de pestañas: el 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 . ejemplo 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 Charla quinta 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í
