Para vuejs, usando una etiqueta aria, un lector de pantalla en vivo NVDA lo leerá automáticamente
PROPÓSITO: Hacer accesible la página web creada por vue project.
Por ejemplo, considere este bloque de código:
<b-form-group label="This is a TEST form -- it's SOLE purpose is ONLY ARIA" label-for="myForm" aria-label="This is a form -- purpose: ONLY ARIA Aria version" aria-describedby="local-id-live-feedback" role="alertdialog" aria-busy="true" aria-live="assertive" > </b-form-group>El bloque de código anterior se compila. Sin embargo, cuando abro la página en el navegador (por ejemplo, Google Chrome), puedo ver algunas de las etiquetas, pero no las escucho automáticamente a menos que haga clic en algo.
Preguntas:
i) ¿ARIA se habilita automáticamente en Google Chrome o tengo que agregar una extensión o algún mecanismo similar para habilitarlo?
ii) Para el código específico anterior, ¿se requiere un código de script subyacente y/o un bloque de datos para que funcione?
iii) ¿Existen otros errores/adiciones evidentes al lenguaje de marcado de vue anterior que podrían ayudar a que aria funcione?
TAMBIÉN: Consulte mi pregunta anterior relacionada:
Probar en https://bootstrap-vue.org/docs/components/form-group , que le permite editar en vivo el código de muestra, agregar aria-label u otros atributos ARIA parece colocar los atributos en el contenedor <div> en lugar de en el campo de entrada.
<b-form-group id="fieldset-1" description="Let us know your name." label="Enter your name" label-for="input-1" aria-label="foo" aria-describedby="bar" valid-feedback="Thank you!" :invalid-feedback="invalidFeedback" :state="state" >código generado
<div id="fieldset-1" role="group" aria-invalid="true" class="form-group is-invalid" aria-label="foo" aria-describedby="bar"> <label id="fieldset-1__BV_label_" for="input-1" class="d-block">Enter your name</label> <div> <input id="input-1" type="text" aria-invalid="true" class="form-control is-invalid" aria-describedby="fieldset-1__BV_description_ fieldset-1__BV_feedback_invalid_"> <div tabindex="-1" id="fieldset-1__BV_feedback_invalid_" role="alert" aria-live="assertive" aria-atomic="true" class="d-block invalid-feedback">Please enter something.</div> <div tabindex="-1" id="fieldset-1__BV_feedback_valid_" role="alert" aria-live="assertive" aria-atomic="true" class="valid-feedback">Thank you!</div> <small tabindex="-1" id="fieldset-1__BV_description_" class="form-text text-muted">Let us know your name.</small> </div> </div> Eso parece un poco extraño, pero supongo que si especifica aria-label en <b-form-group> , lo está especificando para el formulario y no específicamente para el campo <input> , por lo que los atributos ARIA aparecen en el padre <div> es correcto.
También parece que el atributo de description en vuejs corresponde a tener un aria-describedby agregado a <input> .
Pero debe tener cuidado si está tratando de especificar varios tipos de etiquetas. Hay un orden de precedencia si un <input> tiene varias etiquetas, como un elemento <label> , un atributo aria-label y un atributo aria-labelledby . Solo se utilizará una de las etiquetas. Consulte " Cálculo de nombres y descripciones accesibles 1.1 ". (En este caso, aria-labelledby tiene la prioridad más alta).
No escucho automáticamente [la etiqueta]
¿A qué te refieres con "automático"? Cuando se carga la página, no se leerá la etiqueta. Sin embargo, si tabula hasta el campo de entrada , escuchará la lectura de la etiqueta.
No se necesitan complementos ni nada para los atributos ARIA. Son parte del lenguaje HTML.