Creación de una plataforma accesible con código personalizado – Docebo Help & Support

Presentación

Personalizar su plataforma con CSS, HTML y código externo puede ayudar a crear una experiencia más personalizada y atractiva para sus usuarios.

En este artículo se describen los procedimientos recomendados para garantizar que estas personalizaciones sigan siendo accesibles para todos, proporcionando pautas para las diferentes opciones de personalización.

Para más información sobre la accesibilidad en Docebo, incluyendo una lista de los recursos disponibles, consulte el artículo Accesibilidad en Docebo.

Normas generales

A continuación se muestra una lista de pautas generales, válidas para todos los métodos de personalización:

Visibilidad de los elementos estructurales: No oculte los elementos estructurales de la plataforma (como el título, la barra, las migas de pan o el encabezado) para no comprometer la experiencia de usuario de quienes utilizan tecnologías de asistencia. Si necesita ocultar elementos, asegúrese de que su personalización ofrezca una alternativa equivalente.
Utilice elementos HTML semánticos: Estructure su contenido con elementos HTML adecuados. De este modo, las tecnologías de asistencia comprenderán el contenido y los usuarios podrán navegar más fácilmente.
Proporcione texto alternativo: Incluya siempre texto alternativo descriptivo para las imágenes y los iconos. Para las imágenes decorativas, deje vacío el atributo alt. Para las imágenes utilizadas como botones o elementos interactivos, asegúrese de que se proporcione un nombre accesible.
Garantice la navegación por teclado: Debe ser posible navegar a todos los elementos interactivos (botones, enlaces, campos de formularios) únicamente con el teclado. Asegúrese de que haya un indicador de enfoque visible para ayudar a la navegación por teclado.
Utilice roles ARIA: Para los widgets personalizados o el contenido dinámico, utilice roles y propiedades ARIA con el fin de mejorar la accesibilidad.
Ofrezca una navegación coherente: Garantice un diseño y una estructura de navegación coherentes en toda la plataforma para ayudar a los usuarios a encontrar los contenidos más fácilmente.
Asegure una jerarquía de contenidos adecuada: Estructure su contenido con etiquetas de encabezado adecuadas para garantizar una organización lógica. Solo debe utilizarse un <h1> por página.
Mantenga el contraste de colores: Garantice un contraste suficiente entre el texto y los colores de fondo para facilitar la lectura, especialmente para los usuarios con baja visión o daltonismo.
Evite la reproducción automática de contenidos: La reproducción automática de contenidos puede resultar molesta. Si es necesario, permita a los usuarios pausar, detener o controlar el volumen del contenido.
Pruebe la accesibilidad: Compruebe periódicamente la accesibilidad de sus personalizaciones. Utilice herramientas como Lighthouse, Axe o WAVE para detectar posibles problemas. Realice también pruebas manuales, como de navegación con teclado y lectores de pantalla.

En los capítulos siguientes se proporcionan prácticas recomendadas ad hoc para personalizaciones de distintos orígenes.

CSS personalizado para el diseño de la plataforma

Cuando personalice el diseño de la plataforma mediante CSS, asegúrese de que los cambios visuales no dificulten la accesibilidad. Por ejemplo:

Mantenga una buena relación de contraste entre el texto y el fondo para mejorar la legibilidad para los usuarios con discapacidades visuales (contraste mínimo 4.5:1).
Evite que el color sea el único indicador de significado; utilice etiquetas de texto u otras indicaciones visuales.
Asegúrese de que las modificaciones del CSS no interfieran con la navegación mediante teclado o la visibilidad de los indicadores de enfoque.
Proporcione siempre indicadores de enfoque para los elementos operables de su contenido personalizado.

Widgets HTML personalizados

Al utilizar widgets HTML personalizados para añadir elementos específicos a las páginas, recuerde lo siguiente:

Utilice etiquetas HTML semánticas adecuadas (por ejemplo, <section>, <article>, <group>) para transmitir el significado y la estructura del contenido.
Asegúrese de utilizar los encabezados correctamente para establecer una jerarquía de contenidos.
Asegúrese de que todos los elementos interactivos (botones, enlaces) estén claramente descritos y sean navegables mediante teclado.
Evite las imágenes de texto, ya que esto puede ser inaccesible para los lectores de pantalla. En su lugar, utilice elementos de texto HTML adecuados que sean totalmente legibles y redimensionables.

HTML personalizado en áreas de texto

Al añadir contenido HTML personalizado a áreas de texto, como las descripciones:

Utilice elementos HTML accesibles, como listas, encabezados y enlaces, para estructurar el contenido de forma lógica.
Asegúrese de que cualquier contenido no textual, como imágenes o iconos, tenga un texto alternativo descriptivo o etiquetas aria para lectores de pantalla.
Evite utilizar imágenes de texto. Si debe incluir imágenes, proporcione un texto alternativo adecuado y utilice texto HTML para el contenido crítico.

Para conocer más prácticas recomendadas sobre cómo escribir contenido accesible, consulte el artículo Redactar contenido accesible y efectivo.

Enlaces personalizados

Evite abrir enlaces en nuevas pestañas o ventanas a menos que sea estrictamente necesario, ya que esto puede interrumpir la experiencia de navegación del usuario. Si no tiene más remedio, indique si un enlace se abre en una nueva ventana o pestaña, y asegúrese de indicarlo claramente:

Si utiliza el editor de la plataforma, utilice el atributo target="_blank" para los enlaces.
Si proporciona contenido HTML personalizado, incluya el atributo target="_blank" directamente en el código, y asegúrese de que el enlace incluya una indicación clara de que se abre en una nueva pestaña o ventana. Esto puede hacerse utilizando texto visible o haciendo referencia a un elemento visualmente oculto con aria-describedby.

Contenido externo

Cuando incruste contenido externo mediante iframes o enlaces a páginas externas, asegúrese de que:

El contenido incrustado también sea accesible. Verifique que cumpla con los estándares de las Pautas de accesibilidad para el contenido web (WCAG).
Al incrustar contenido que pueda requerir interacciones (como formularios o contenido multimedia), asegúrese de que se admita totalmente la accesibilidad mediante teclado y lectores de pantalla.
Añada siempre un atributo title. Esto proporciona una etiqueta clara y concisa para el contenido del iframe, crucial para que los usuarios de lectores de pantalla entiendan su propósito. Ejemplo: <iframe src="..." title="Mapa interactivo"></iframe>
Añada un atributo lang si el idioma del contenido es diferente. Si el contenido del iframe está en un idioma distinto al de la página principal, incluya un atributo lang para garantizar una pronunciación correcta por parte de las tecnologías de asistencia. Ejemplo: <iframe src="..." title="Artículo en francés" lang="fr"></iframe>;
Asegúrese de que los enlaces externos tengan un texto de enlace claro y descriptivo que indique el destino o el propósito del enlace.

Código externo

Cuando inyecte código externo (como JavaScript o HTML personalizado) en la plataforma, asegúrese de que sea accesible. Esto es en lo que debe centrarse:

Actualizaciones dinámicas de contenido: Si su código actualiza el contenido sin recargar la página completa, asegúrese de que los usuarios de lectores de pantalla puedan percibir dichos cambios. En casos concretos, puede usar regiones activas de ARIA para anunciar actualizaciones importantes, pero aplíquelas con precaución para evitar interrumpir demasiado a los usuarios.
Accesibilidad mediante teclado: Todos los elementos interactivos de su código inyectado deben ser totalmente accesibles y manejables utilizando únicamente un teclado. Los usuarios que no pueden utilizar el ratón dependen totalmente de la navegación por teclado.
Pruebas periódicas: Pruebe siempre con regularidad el código inyectado para confirmar la compatibilidad y garantizar una experiencia fluida a todos los usuarios.