En esta página sobre las funciones de accesibilidad en las guías Anthology Adopt, obtendrá más información sobre cómo las guías pueden llegar a todos los usuarios.
Información general
Estas sugerencias son recomendaciones de accesibilidad de Pendo en función del conjunto actual de funciones. Este documento no pretende demostrar o indicar el cumplimiento de las normas de accesibilidad WCAG 2.1 AA u otras normas similares. Las funciones de accesibilidad de las guías de Pendo están diseñadas para que pueda crear guías accesibles, pero Pendo no garantiza que el contenido cumpla ninguna norma de accesibilidad.
La accesibilidad de los contenidos web garantiza un acceso igualitario a Internet. Las guías Pendo proporcionan información y comunicaciones importantes sobre su aplicación para los usuarios. Las funciones de accesibilidad de la guía ayudan a todos los usuarios a encontrar sus guías Pendo e interactuar con ellas.
Todas las guías aplican algunas funciones de accesibilidad de manera automática, como el enfoque y los atributos de entrada para las insignias y la navegación con el teclado. Otras funciones requieren la configuración de activación durante la creación de la guía. Las funciones como el enfoque automático, las etiquetas ARIA, el texto alternativo, el título y los roles ARIA se pueden configurar en Visual Design Studio cuando se crea una guía. Algunos requisitos de las pautas de accesibilidad, como el contraste de colores, los subtítulos para videos o audios incrustados y el tamaño de los elementos sobre los que se puede hacer clic, los debe implementar el diseñador de la guía.
Recomendaciones
Activación de la guía
- Las guías activadas por insignias son más accesibles. Estas guías son más accesibles que las guías automáticas o de elementos de destino porque ofrecen al usuario la opción de activarlas.
- Siempre debe establecer la posición de la insignia en "alinear a la derecha" o "alinear a la izquierda". Esto limita la ubicación de la insignia en la interfaz de usuario, pero garantiza que se pueda navegar hasta ella en un orden lógico con el teclado.
Creación de guías
- Agregue texto alternativo descriptivo o etiquetas ARIA siempre que sea posible. Las tecnologías de asistencia las leen y proporcionan el contexto necesario para los usuarios.
- Los roles ARIA Diálogo, Banner y Complementario son los más comunes y útiles para las guías Anthology Adopt.
- Siempre se debe seleccionar el enfoque automático para obtener la mejor experiencia de guía.
- Compruebe que la relación de contraste de color de los elementos de la guía cumple la norma WCAG AA en el tema de la guía.
- Ajuste el tamaño de las insignias a 24 píxeles, que es el requisito WCAG 2.2 AA para el tamaño mínimo de destino.
Configurar la accesibilidad de la guía
Configure las funciones de accesibilidad en los ajustes del contenedor y del Building Block de una guía en Visual Design Studio. Si un elemento tiene ajustes de accesibilidad disponibles, estos se encuentran en la pestaña Accesibilidad del modal Editar.
El comprobador de contraste de color está disponible cuando se crea o edita un tema en Configuración de temas en Visual Design Studio.
Atributos configurables
A continuación, se indican los atributos que puede editar en la configuración del contenedor y del Building Block para que pueda acceder mejor a sus guías. Cada atributo enumerado incluye dónde se pueden editar.
- Contraste de color. Color de fondo y de fuente de los elementos que contienen texto.
- alt (Texto alternativo de la imagen). Building Block de la imagen.
- aria-label. Contenedor, botón de cierre, botón, insignia, Building Block de texto.
- aria-modal. Contenedor cuando el fondo está habilitado.
- rol. Contenedor para cada paso de la guía.
- título. Building Block de video
- Enfoque automático en este paso. Contenedor para cada paso de la guía.
Atributos no configurables (aplicados automáticamente)
- h2, h3, p (encabezados semánticos). Los bloques de texto de título, subtítulo y párrafo se asignan automáticamente al elemento de encabezado o párrafo apropiado.
- aria-labelledby. Crea una relación entre dos elementos, usados por texto abierto, sí/no, preguntas de opción múltiple, escala numérica y encuestas NPS.
- aria-descritapor. Crea una relación entre dos elementos, usados por las encuestas de escala numérica y las encuestas NPS para conectar el primer y el último número de la escala con sus descripciones de texto.
- aria-expandido. Se aplica automáticamente a las insignias para guías y para el centro de recursos.
- role - role="group". Se aplica automáticamente a los botones Sí/No y a los botones de opción múltiple de los Building Blocks de encuestas.
Acceso a la configuración del tema
1. Seleccione Guías en el panel lateral y, a continuación, Administrar tema.
2. En las áreas Tipografía o Botón, seleccione el ícono de lápiz para editar.
3. El Comprobador de contraste de color aparece cuando está editando. De este modo, se verifica que las opciones de color aplicadas a las guías cumplan con los requisitos de relación de contraste WCAG AA 4.5:1 o WCAG AAA 7:1. Se actualiza en tiempo real a medida que cambia los colores de los fondos y las fuentes. Si no se cumple el requisito de relación de contraste, las etiquetas WCAG se marcan en rojo. Si se cumple el requisito, las etiquetas WCAG se marcan en verde.
Editar la configuración de accesibilidad del contenedor
Seleccione el borde de un paso individual de una guía para abrir Configuración de contenedor en Visual Design Studio.
Cada paso de guía tiene ajustes únicos para controlar el aspecto y el comportamiento de ese paso. Si está creando guías accesibles de varios pasos, se debe configurar la pestaña Accesibilidad para cada paso de la guía.
Configuración de accesibilidad de contenedores
- Etiqueta ARIA: nombre accesible. Coloque la etiqueta ARIA para todo el contenedor de la guía.
- Rol. Seleccione el rol ARIA de un menú desplegable de roles disponibles (sin rol, artículo, banner, complementario, información de contenido, diálogo, formulario, principal, navegación, presentación y región).
- Enfoque automático en este paso. La tecnología de asistencia para trampas se centra en la guía.
- Etiqueta ARIA: botón Cerrar. Establezca las etiquetas ARIA para el botón de cierre predeterminado, que también puede activarse en la configuración del contenedor.
Editar la configuración del texto o del botón
En Visual Design Studio, seleccione el botón más del elemento que desea editar. Se abrirá el panel de configuración de Building Blocks.
Se puede configurar la etiqueta ARIA para Building Blocks de texto y botón.
HTML semántico para Building Blocks de texto
Los Building Blocks de texto asignan automáticamente encabezados semánticos en el código HTML de acuerdo con el estilo de tema seleccionado en la configuración de los Building Blocks de texto.
- El título es un elemento h2
- El subtítulo es un elemento h3
- El párrafo es un elemento p
- Personalizado mantiene el encabezado semántico del último estilo asignado (por ejemplo, un bloque de texto con el estilo de párrafo cambiado al estilo personalizado seguirá siendo un elemento p)
Editar configuración de imagen
Seleccione el Building Block de imagen para abrir los ajustes del Building Block de imagen. El texto alternativo de imagen se puede configurar para Building Blocks de imágenes. El texto alternativo es el método preferido para agregar texto accesible a las imágenes. Por lo general, las etiquetas ARIA no se usan con imágenes.
Editar configuración de video
Seleccione Building Block de video para abrir la configuración del Building Block de video. El título se puede configurar para los Building Blocks de video. El título es el método preferido para agregar texto accesible a los videos.
Editar configuración de encuestas
Los diversos Building Blocks de encuestas tienen una combinación de ajustes configurables y no configurables para que se pueda acceder a ellos.
Seleccione los campos de respuesta de encuesta para abrir Ajustes de encuesta. Los elementos de texto y botones en la encuesta tienen campos de etiqueta ARIA.
Los roles ARIA-describedby, ARIA-labelledby y grupo se aplican automáticamente para conectar las respuestas de la encuesta con el texto de sus respectivas preguntas.
Editar tamaño de insignia
Una insignia es una de las formas en que los usuarios pueden activar una guía de adopción en Blackboard. El tamaño predeterminado de las insignias de Anthology Adopt es de 14 píxeles. El requisito de WCAG 2.2 AA para el tamaño mínimo de destino es de 24 píxeles.
Para cambiar el tamaño de una insignia, seleccione Activación para abrir los Ajustes de activación. En Insignias, seleccione Editar configuración.
En la pestaña Estilo, en el campo Tamaño, puede ajustar el tamaño del píxel de la insignia dentro de un rango de 8 a 300 píxeles. Cuando cambia el número en el campo, el tamaño de la insignia cambia en tiempo real.
Escala de imagen
Las pautas WCAG establecen que el contenido debe "presentarse sin pérdida de información o funcionalidad, y sin necesidad de desplazarse en dos dimensiones". Los contenedores de la guía escalan los Building Blocks de imágenes automáticamente para cumplir con este requisito. Si un usuario amplía una guía, la imagen se escala automáticamente de forma proporcional al ancho del contenedor, y la imagen no se corta ni se agregan barras de desplazamiento horizontales.
Práctica recomendada para imágenes que ocupan todo el ancho
Los contenedores de la guía Pendo tienen un relleno de 40 píxeles alrededor del borde exterior de forma predeterminada para dejar espacio entre el contenido de la guía y facilitar el diseño de la misma. Las imágenes con relleno al 100 % se mantienen dentro del relleno predeterminado de 40 píxeles. Se pueden utilizar márgenes negativos para extender la imagen a todo el ancho del contenedor. La escala de imagen ajusta automáticamente la imagen para que coincida con el ancho del contenedor si el usuario acerca o aleja la imagen.
Configuración del margen de ancho completo
Todos los valores son números negativos
- Margen izquierdo -40 píxeles
- Margen derecho -40 píxeles
- Si cambió la configuración del relleno del contenedor de la guía, ajuste el margen negativo a los valores de relleno del contenedor.
Si se utilizan márgenes y rellenos personalizados para ajustar de forma creativa los Building Blocks de imágenes en posiciones que no son compatibles con la disposición de los Building Blocks estándar, el escalado de imágenes puede distorsionar la presentación y la disposición de estas imágenes. Revise sus guías con diferentes niveles de zoom para ver si sus ajustes personalizados interfieren con el escalado automático de la imagen.
Enfoque
Los estados de enfoque ayudan a los usuarios a utilizar aplicaciones sin necesidad de un ratón o panel táctil. Un estado de enfoque puede aparecer como un anillo alrededor de un elemento, según el estilo CSS. Las versiones de Chrome 83 y posteriores permiten aplicar estilos a los elementos de enfoque de la aplicación. Es posible que observe que los navegadores agregan un estado de enfoque, como un contorno alrededor del elemento, al hacer clic en estos elementos o al desplazarse por una página.
Etiqueta HTML: Entrada
Las insignias usan la etiqueta input en el código HTML. Es probable que hereden las propiedades asignadas en input su estilo CSS. Antes de agregar funciones de accesibilidad, las insignias usaban la etiqueta img. Este es un ejemplo de la Insignia del Centro de recursos inspeccionada con las Herramientas de desarrollo del navegador Chrome:
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
Enfoque automático
Enfoque automático en este paso. El enfoque de la tecnología de asistencia se bloquea en el paso de la guía hasta que se descarta. Este ajuste se configura en Ajustes del contenedor para cada paso de la guía.
Etiqueta ARIA, texto alternativo y título
Las etiquetas ARIA, el texto alternativo y el título se usan para identificar elementos que no se describen en la interfaz de usuario de forma accesible. Las herramientas de accesibilidad utilizan estas propiedades de diferentes maneras. Por ejemplo, un lector de pantalla puede leer la etiqueta ARIA en voz alta al usuario. La etiqueta ARIA se refiere a los Building Blocks de texto y botones, el Texto alternativo se aplica a los Building Blocks de imágenes y el Título se usa para los Building Blocks de video. Aquí se muestra una etiqueta ARIA inspeccionada con las herramientas de desarrollo del navegador Chrome:
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Se agregaron las etiquetas ARIA, Texto alternativo y Título en cada Building Block.
Para obtener más información, consulte las definiciones del W3C para etiquetas ARIA y texto alternativo para imágenes.
Navegación con el teclado
Es posible que algunos usuarios no puedan utilizar un cursor o una pantalla táctil para interactuar con la página. La navegación mediante teclado es una entrada importante para la accesibilidad del contenido. Los usuarios pueden navegar por el contenido de la guía con entradas del teclado.
- Seleccione Esc para descartar la guía activa actual
- Seleccione la tecla Tab para avanzar por el elemento en un paso de la guía
Guiar el rol de ARIA
Los roles ARIA se utilizan para identificar elementos para que las tecnologías de asistencia proporcionen la ayuda adecuada al usuario. Los roles se definen en el modelo de roles de ARIA y tienen propósitos específicos. Por ejemplo, hay diferentes roles para los widgets que identifican elementos interactivos y documentan la estructura que organiza el contenido en la página, que generalmente no son interactivos.
El rol se establece para cada paso de guía individual.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Roles disponibles
- Sin rol
- Artículo
- Encabezado
- Complementario
- Información de contenido
- Diálogo
- Formulario
- Principal
- Navegación
- Presentación
- Región
El W3C recomienda que los roles no se cambien por el comportamiento del usuario o con el tiempo después de que el contenido se haya publicado a los usuarios. Por lo general, las plataformas y los dispositivos de asistencia no disponen de API que permitan la actualización progresiva de roles. El primer rol que ve la tecnología de asistencia generalmente se almacena en caché y no se actualiza. Si necesita cambiar el rol ARIA de una guía publicada, clone la guía, cambie el rol, publique la guía actualizada y desactive la versión anterior. Si se clona la guía, se generan nuevos ID y el contenido de la nueva guía se almacenará en la caché de los dispositivos de asistencia.
