Pautas de accesibilidad del contenido
Elemento del artículo | Pauta | Ejemplo |
---|---|---|
Contenido del cuerpo | Para crear contenido que todo el mundo pueda comprender fácilmente, recomendamos usar:
|
No es accesible
“Si desea ensamblar el widget, comience inspeccionando la caja. Si la caja está dañada, si tiene abolladuras o si está rota, por ejemplo, asegúrese de notificarnos. Luego, puede comenzar a realizar las siguientes tareas: Inserte los tornillos en la unidad y ajústelos. Encienda la unidad”. Es accesible Para ensamblar el widget
|
Encabezados | Usar encabezados de manera jerárquica, siendo <h1> el encabezado más importante y <h2>, <h3>, etc., los subencabezados subsiguientes.
Aumentar o disminuir los encabezados un nivel a la vez al ordenarlos en la página. Por ejemplo, use un <h4> después de un <h3>, en lugar de un <h5> o <h6>. Intente usar solo un <h1> para el texto más importante (como el título de la página). Organizar las páginas web por encabezados las hace más distinguibles visualmente para los usuarios que tienen discapacidades cognoscitivas y son más fáciles de navegar para los usuarios que utilizan lectores de pantalla. |
No es accesible (no tiene subencabezados) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat turpis ac ultrices pulvinar. Nullam pharetra neque ac eros fermentum, sed tempor lorem tristique. Aenean ut malesuada diam. No es accesible (los subencabezados no tienen niveles) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Encabezado 1 Quisque tempor semper metus eu venenatis. Encabezado 4 Etiam et vehicula ipsum. No es accesible (más de un <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Encabezado 1 Quisque tempor semper metus eu venenatis. Encabezado 1 Etiam et vehicula ipsum. Es accesible Lorem ipsum dolor sit amet, consectetur adipiscing elit. Encabezado 1Quisque tempor semper metus eu venenatis. Integer vehicula interdum velit, sit amet rutrum nisi sollicitudin ac. Encabezado 2 Etiam et vehicula ipsum. Aenean placerat semper leo et bibendum. |
Imágenes |
Proporcionar texto alternativo (alt) claro y conciso para las imágenes informativas que describa de qué se tratan. El software de lector de pantalla lee el texto alt en voz alta. Si las usa
alt="" ) para que las tecnologías de asistencia —como los lectores de pantalla— no las tomen en cuenta. |
No es accesible Es accesible
|
Color y estilo de vínculos |
Usar un color para los vínculos que contraste con la página y el texto aledaño y que incluya un indicador independiente del color (como subrayado o un icono). Esto permite que los vínculos sean accesibles para los usuarios que tienen dificultad para diferenciar el texto de poco contraste así como para las personas daltónicas. Evitar usar imágenes como vínculos. De ser necesario, use una imagen que incluya texto alternativo que describa la ubicación y el propósito del vínculo. |
No es accesible
Es accesible Consulte Creación de contenido accesible para el centro de ayuda |
Texto para vínculos |
Crear texto para vínculos que se pueda comprender sin necesidad del contenido que lo rodea. Por ejemplo, el texto “hacer clic aquí” o “más información” es ambiguo y debe evitarse. Los lectores de pantalla no pueden interpretar dónde va a llevar el vínculo a menos que el texto lo especifique. Evitar usar URL sin procesar en el texto para vínculos. Los lectores de pantalla leen el URL completo a los usuarios, sea cual sea su longitud. |
No es accesible Consulte www.website.com/linkedpage.htmlEs accesible |
Títulos | Usar títulos de página que describan el tema o propósito. |
No es accesible “Detalles de accesibilidad” Es accesible ”Creación de contenido accesible para el centro de ayuda” |
Video | Seleccionar un proveedor de video que apoye el uso de subtítulos. Los subtítulos hacen que los videos sean más accesibles para las personas sordas o que tienen problemas de audición.
Proporcionar una transcripción y una descripción auditiva para el video. |
Es accesible |
Recursos de accesibilidad del contenido
Consulte los siguientes recursos para profundizar en el tema de cómo crear contenido accesible para el centro de ayuda: