Referencia gridOutput()

gridOutput()

gridOutput() genera una descripción de las formas presentes en el lienzo, la cual es accesible para lectores de pantalla, y otras tecnologías de asistencia

gridOutput() añade una descripción general del lienzo, una lista de formas, y una tabla de formas a la página web. La descripción general incluye el tamaño del lienzo, el color del lienzo y el número de formas en el lienzo. Por ejemplo: Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:

La descripción es seguida por una lista de formas. gridOutput establece el contenido del lienzo a través de una cuadrícula (tabla de html) que se basa en la posición espacial de cada forma. Cada forma se ubica en la celda correspondiente (fila y columna) según su posición en el lienzo. El lector de pantalla leerá las celdas de la cuadrícula y describirá el color y la forma que se encuentra en cada posición. Esto es diferente de textOutput() , que usa una lista para describir el contenido del lienzo.

Finalmente, gridOutput provee una lista de formas. Esta lista describe el color, la forma, la posición y el área de cada forma . Por ejemplo: red circle location = middle area = 3%.

El parámetro display es opcional. Este parámetro determina de qué manera se va a mostrar la descripción. Si LABEL se pasa como argumento, por ejemplo: gridOutput(LABEL), la descripción será visible en un elemento ‘div’ al lado del lienzo. Sin embargo, el uso de LABEL crea mensajes duplicados que son ineficientes para los usuarios de lectores de pantalla, por lo que recomendamos utilizar únicamente LABEL durante la fase de desarrollo. Por otro lado, si FALLBACK se pasa como argumento, por ejemplo: gridOutput(FALLBACK), la descripción será visible solo para los lectores de pantalla. Este es el modo predeterminado.

Lee ‘Escribiendo descripciones accesibles para lienzos’ para aprender más sobre cómo hacer que tus ‘sketches’ sean accesibles.

Ejemplos

Sintaxis

gridOutput([display])

Parámetros

display
Constant:

ya sea FALLBACK o LABEL.

Notice any errors or typos? Please let us know. Please feel free to edit src/accessibility/outputs.js and open a pull request!

Referencias Relacionadas