Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Screen readers

Agreguemos un encabezado para nuestra última columna, pero agreguemos una clase al texto para que no sea visible, pero esté disponible para lectores de pantalla.

Ajustes finales en ShoppingCart

Anteriormente escribíamos "cantidad" en los items. Ahora, en cambio, no vamos a poner "cantidad" aquí porque ya lo dice la columna.

En nuestro ShoppingCartItem, vamos a quitar la palabra "cantidad" y dejar simplemente el valor correspondiente.

Completar la línea en la tabla

La línea no llega hasta el final porque no hemos definido una cabecera para la última celda.

En nuestro ShoppingCart, específicamente en la tabla, vamos a agregar un table header que dirá "eliminar". De esa manera, la línea se completa.

Ocultar el encabezado "eliminar"

No queremos que se muestre "eliminar" porque ya se sobreentiende. Para ello, podemos usar una utility class de Veautify: d-sr-only.

d-sr-only significa que el elemento estará oculto visualmente, pero los screen readers podrán leerlo. Esto es útil para herramientas de accesibilidad.

Ajustamos el código:

Encerramos "eliminar" dentro de un <span>.
Aplicamos la clase d-sr-only a este <span>.

Verificación del resultado

Guardamos los cambios y verificamos.

El texto "eliminar" ya no se muestra visualmente, pero sigue presente para los dispositivos que leen las páginas para personas con necesidades de accesibilidad.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Para finalizar vamos a ajustar algunos detalles. Por ejemplo anteriormente escribíamos cantidad en los items. Ahora en cambio no vamos a poner cantidad aquí porque ya lo dice la columna. Entonces en nuestro ShoppingCartItem vamos a quitar la palabra cantidad y dejar simplemente la cantidad. Luego vamos a completar esta línea porque no llega hasta el final. Lo que pasa es que no hemos definido una cabecera para la última celda. En nuestro ShoppingCart, específicamente en nuestra tabla, vamos a agregar un table header que dirá eliminar. De esa manera la línea se completa. Sin embargo nosotros no queremos que diga eliminar porque ya se sobre entiende. Para eso podemos hacer uso de una utility class que nos ofrece a Veautify, d-sr-only significa que solo se mostrará para screen readers. O sea que el elemento estará oculto pero cuando se use alguna herramienta que lee para personas que lo necesitan a través de herramientas de accessibility, pues en esos casos los screen readers serán capaz de leer el contenido. Entonces a este eliminar lo vamos a encerrar dentro de un span y a este span le vamos a poner la clase d-sr-only o sea mostrar solo para screen readers. Guardamos y ahí está. No se muestra, pero el texto está presente para dispositivos que se encargan de leer las páginas.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code