Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
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.
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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
88
Screen readers
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript