Las extensiones permiten a los usuarios crear su experiencia de navegación ideal, adaptada a las capacidades y preferencias individuales. Las extensiones deben incluir componentes de accesibilidad que fomenten una base de usuarios inclusiva, ya que permiten que las personas con discapacidades visuales, pérdida auditiva, destreza limitada y otras discapacidades accedan a la extensión.
Todos, no solo los usuarios con necesidades especiales, pueden beneficiarse de las funciones de accesibilidad. Las combinaciones de teclas son útiles para los usuarios con discapacidad visual, los que tienen poca destreza y los usuarios avanzados. Los subtítulos y las transcripciones son esenciales para los usuarios sordos, pero también ayudan a quienes están aprendiendo un idioma.
Las personas pueden interactuar con una extensión de diversas maneras. Algunos usuarios tienen un monitor, un teclado y un mouse estándar, o bien pueden depender de una lupa de pantalla y, posiblemente, de un lector de pantalla. Si bien es imposible predecir qué herramientas usarán las personas para acceder a una extensión, hay medidas que cualquier desarrollador puede tomar para que una extensión sea lo más accesible posible.
Integra controles de la IU accesibles
Si los usuarios no pueden acceder a los controles de la interfaz de usuario, no podrán usar una extensión. La forma más sencilla de crear una IU accesible es usar un control HTML estándar.
Controles estándar
Siempre que sea posible, usa controles de IU HTML estándar. Los controles HTML estándar son accesibles con el teclado, se adaptan fácilmente y, en general, los lectores de pantalla los comprenden.
WAI-ARIA en controles personalizados
La Iniciativa de accesibilidad web: Aplicaciones de Internet enriquecidas y accesibles, WAI-ARIA, es una especificación para hacer que los controles de la IU sean accesibles para los lectores de pantalla a través de un conjunto estándar de atributos del DOM. Estos atributos proporcionan información al lector de pantalla sobre la función y el estado actual de los controles en una página web.
Para agregar compatibilidad con WAI-ARIA a los controles personalizados, se deberán modificar los elementos DOM de una extensión para incluir los atributos que Chrome usa para generar eventos durante la interacción del usuario. Los lectores de pantalla responden a estos eventos y describen la función del control. Los atributos del DOM especificados por WAI-ARIA se clasifican en roles, estados y propiedades.
<div role="toolbar">
La propiedad aria-activedescendant especifica qué elemento secundario de una barra de herramientas recibe el foco cuando la barra de herramientas lo recibe. El código tabindex="0" especifica que la barra de herramientas recibe el enfoque en el orden del documento.
Considera la especificación completa de una barra de herramientas de ejemplo a continuación:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Una vez que se agregan los roles, los estados y las propiedades de WAI-ARIA al DOM de un control, Google Chrome genera los eventos adecuados para el lector de pantalla. Dado que la compatibilidad con WAI-ARIA aún está en desarrollo, es posible que Google Chrome no genere un evento para cada propiedad de WAI-ARIA, y que los lectores de pantalla no reconozcan todos los eventos que se generan.
Para obtener un instructivo rápido sobre cómo agregar controles de WAI-ARIA a los controles personalizados, consulta la presentación de Dave Raggett en WWW2010.
Enfoque en los controles personalizados
El enfoque del teclado es fundamental para los usuarios que navegan por la Web sin un mouse. Asegúrate de que los controles de operación y navegación, como los botones, los cuadros de lista y las barras de menú, puedan recibir el enfoque del teclado.
De forma predeterminada, los únicos elementos del DOM de HTML que pueden recibir el foco del teclado son los anclajes, los botones y los controles de formulario. Sin embargo, establecer el atributo HTML tabIndex en 0 coloca los elementos DOM en la secuencia de tabulación predeterminada, lo que les permite recibir el enfoque del teclado.
element.tabIndex = 0
element.focus();
Configurar tabIndex = -1 quita el elemento de la secuencia de tabulación, pero permite que el elemento reciba el enfoque del teclado de forma programática.
Compatibilidad con el acceso al teclado
Las extensiones deben poder usarse solo con un teclado, lo que permite que los usuarios que no pueden usar un mouse y los usuarios avanzados que simplemente no lo usan puedan acceder a ellas.
Navegación
Verifica que un usuario pueda navegar entre las diferentes partes de una extensión sin usar el mouse. Verifica que cualquier uso de una ventana emergente se pueda navegar con el teclado. Usa las combinaciones de teclas de Chrome para determinar si se puede navegar por una extensión.
Asegúrate de que sea fácil ver qué partes de la interfaz tienen el enfoque del teclado. Por lo general, el contorno de enfoque se mueve por la interfaz. Sin embargo, si se usa demasiado CSS, es posible que se suprima el contorno o se reduzca el contraste.
Accesos directos
Si bien la estrategia de navegación con el teclado más común implica usar la tecla Tab para rotar el enfoque a través de la interfaz de una extensión, no siempre es la opción más fácil o eficiente.
Un controlador de teclado simple de JavaScript podría verse de la siguiente manera. Observa cómo se actualiza la propiedad aria-activedescendant de WAI-ARIA en respuesta a la entrada del usuario para reflejar el botón de la barra de herramientas activo actual.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Las extensiones pueden crear combinaciones de teclas explícitas para elementos importantes de la IU de la extensión. Para implementar estas combinaciones, conecta objetos de escucha de eventos de teclado a los controles. Informa a los usuarios sobre los atajos disponibles en la página de opciones.
Proporciona contenido accesible
Proporcionar contenido accesible es importante para todos los usuarios. Es posible que muchos de los siguientes lineamientos te resulten familiares, ya que reflejan las prácticas recomendadas para todo el contenido web.
Texto
Las opciones de fuente y el tamaño del texto influyen en la legibilidad del contenido de una extensión. Es posible que los usuarios con problemas de visión deban aumentar el tamaño del texto de una extensión. Si usas combinaciones de teclas, asegúrate de que no interfieran con las combinaciones de teclas de zoom integradas en Chrome.
Como indicador de la flexibilidad de la IU de una extensión, aplica la prueba del 200%. Si el tamaño del texto o el zoom de la página aumentan en un 200%, ¿sigue siendo utilizable?
Evita incluir texto en las imágenes. Los usuarios no pueden modificar el tamaño, y los lectores de pantalla no pueden interpretar las imágenes. En cambio, opta por una fuente web con estilo, como una de las fuentes que se encuentran en la API de Google Fonts. Las fuentes web se pueden ajustar a diferentes tamaños y las personas que usan lectores de pantalla pueden acceder a ellas.
Colores
Debe haber suficiente contraste entre el color de fondo y el color del texto en una extensión. Usa una herramienta de verificación de contraste para probar si los colores de fondo y de primer plano proporcionan un contraste adecuado.
Cuando evalúes el contraste, verifica que cada parte de la extensión que se basa en gráficos para transmitir información sea claramente visible. En el caso de imágenes específicas, se pueden usar herramientas como Coblis, Color Blindness Simulator para ver cómo se ve una imagen en varias formas de deficiencia de color.
Considera ofrecer diferentes temas de color o permitir que el usuario personalice el esquema de colores para crear un mejor contraste.
Sonido
Si una extensión se basa en el sonido o el video para transmitir información, asegúrate de que haya subtítulos o una transcripción disponibles. Consulta los lineamientos del Programa de medios con descripción y subtítulos para obtener más información sobre los subtítulos.
Imágenes
Proporciona texto alternativo informativo para las imágenes.
<img src="img.jpg" alt="The logo for the extension">
Usa el texto alternativo para indicar el propósito de la imagen en lugar de una descripción literal de su contenido. Las imágenes de relleno o las imágenes puramente decorativas deben tener un texto alternativo "" en blanco o quitarse por completo del código HTML y colocarse en el CSS.
Si la extensión debe usar texto en una imagen, incluye el texto de la imagen en el texto alternativo. Un buen recurso para consultar es el artículo de WebAIM sobre el texto alternativo adecuado.
Más información
Obtén más información sobre la accesibilidad en Chrome en el canal de A11ycasts y lee la Documentación técnica sobre accesibilidad de Chromium.