Atributo alt imagenes

Texto alt del div

Pruebe role=”listitem” o role=”group” y aria-labelledby=”shopping cart items”. Véase el ejemplo 1. El 2 es un contenido de texto que debería ser leído por el lector de pantalla ya con el atributo read como contexto al contenido. Consulte esta sección.
Añada aria-readonly=true role=textbox si utiliza una entrada. Si tiene dudas sobre si utilizar aria-label o aria-labelledby, lea este artículo. En la documentación de JAWS y probándolo yo mismo se apoya el hecho de que aria-label se ignora. Además, la semántica es muy importante cuando la accesibilidad es su preocupación. Usar un div cuando se podría usar un input no es semántico y como dije antes, JAWS aceptaría un elemento de formulario más fácilmente que un div. Supongo que este “carrito de la compra” es un formulario o parte de un formulario, y si no te gustan sus bordes, introduce {border: 0 none transparent} o usa <output>* que sería A+ en cuanto a la semántica.
Lo siento, @RadekPech me lo ha recordado; se me olvidó añadir que el uso de aria-labelledby necesita texto visible y que el texto necesita un id que también figura como valor(es) de aria-labelledby. Si no quieres texto por estética, usa color: transparente, altura de línea: 0, o color:<igual que el fondo>. Eso debería satisfacer la visibilidad en lo que respecta al DOM* y seguir siendo invisible a simple vista. Tenga en cuenta que estas medidas se deben a que JAWS ignora el aria-label.

Input type=número

Vue.use(BootstrapVueIcons)El SCSS/CSS de los iconos de BootstrapVue no depende de ninguna variable, mixin, función o clase CSS de Bootstrap SASS (aparte de las clases de utilidad del color del texto de Bootstrap text-{variant}, si se utiliza la prop variante). Tenga en cuenta que el CSS de los iconos también se incluye en los archivos SCSS/CSS principales de BootstrapVue. Los efectos de las animaciones requieren el SCSS/CSS personalizado de BootstrapVue. Los iconos del navegador no están instalados por defecto en la compilación del navegador UMD, por lo que debes incluir explícitamente la biblioteca de iconos: <head>
</head>Componentes de iconos Puedes utilizar componentes de iconos individuales, o utilizar el componente de ayuda de iconos <b-icon>, para colocar iconos en tus plantillas de proyecto. Todos los componentes de iconos individuales llevan como prefijo el nombre <b-icon-{nombre}>, donde {nombre} es uno de los nombres de iconos enumerados en la sección Iconos anterior. Uso de componentes de iconos individuales: <plantilla>
<!– icons-helper-usage.vue –>Nota: al usar <b-icon>, también debes importar los componentes de iconos individuales requeridos, a menos que estés usando el plugin IconsPlugin o BootstrapVueIcons. Variantes Por defecto, los iconos heredan el color del texto actual de su elemento padre. Todos los componentes de los iconos proporcionan una proposición de variante para aplicar uno de los colores de variante de texto contextual de Bootstrap:

Marca de verificación html

Algunas versiones de las tecnologías de asistencia anunciarán el contenido generado por CSS, así como fuentes de iconos específicas. El anuncio puede ser redundante, inexacto y/o sin sentido. Por eso se utiliza aria-hidden=”true”.
“Las fuentes de iconos son vectores, representados al tamaño establecido por el CSS. Se escalan como lo haría un gráfico vectorial, generando una imagen clara sin importar el tamaño de la pantalla o la resolución. Aunque al principio los desarrolladores se mostraron un poco reacios a subirse al carro de esta tendencia, rápidamente se están dando cuenta del valor que ofrecen las fuentes de iconos a la hora de crear sitios que cumplan los estándares cada vez más exigentes de la industria del diseño. Su mayor flexibilidad en el diseño y el ajuste permite a los diseñadores ilustrar plenamente los puntos del sitio sin interrumpir las funciones de las que los equipos de desarrollo y SEO tendrán que ocuparse más tarde”. – Cosette Jarrett
“Las fuentes de iconos son simplemente fuentes. Sin embargo, en lugar de contener letras o números, contienen símbolos y glifos. Se pueden estilizar con CSS de la misma manera que se estiliza el texto normal, lo que las ha convertido en una opción popular en la web.” – George Martsoukos

Svg role=presentación

La cuestión de si ayuda o no es más difícil. Los navegadores suelen mostrar el valor del atributo title como “tooltip” al pasar el ratón por encima, pero ¿por qué iba a pasar el usuario por encima del icono? Además, este tipo de información sobre herramientas es de escasa utilidad; la llamada información sobre herramientas CSS suele funcionar mejor.
Tenga en cuenta que los atributos aria-label y title deben describir el contenido del elemento. No el siguiente elemento hermano. Así que me parece que la siguiente solución no está de acuerdo con las especificaciones (aunque la mayoría de las herramientas de accesibilidad tendrían realmente el mismo comportamiento observable que si el número de teléfono estuviera realmente dentro del elemento span) :
Deberías usar <span> o algo parecido en su lugar. Puedes usar el atributo title=”” para dar algo de texto al pasar por encima, si es lo que buscas. En cuanto a proporcionar accesibilidad a los lectores de pantalla, o el valor de SEO, usted podría añadir el siguiente CSS:
Creo que el rol para las fuentes que actúan como imágenes debería reservarse a role=”img”. Esto se puede utilizar con aria-label=”alt-text”. Funciona gracias al algoritmo de nombres accesibles de ARIA. Ver: Técnicas Aria utilizando el rol img.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad