HTML y accesibilidad:

- Determinar el lenguaje al principio de la página; para que el screen reader y los

traductores identifiquen el lenguaje de la página.

- (1)HTML semántico: Ej: Usar <button> en vez de <div>, tiene más accesibilidad
incorporada en el teclado, se puede tabular entre ellos y activar retorno/entrar.

- más fácil de entender,

- más ligero,

- bueno para los motores de búsqueda.

- Las imágenes deben incluir el atributo 'alt' con una descripción de a imágen.

- Contenido del texto: Buena estructura de contenido de encabezados, párrafos

para el lector de pantalla.

- Lenguaje claro, sin jerga beneficia no solo en discapacidades cognitivas sino en

lectores extranjeros.

- no usar guiones,

- no abreviaturas,

- no acrónimos

- No usar tablas HTML para el diseño. El lector de pantalla lo reconoce como una
tabla de datos. (3, 4)

- Usar un heading para cada sección para que el screen reader lo lea. Tienen que
seguir un orden.

- Using landmarks: Usar las etiquetas correctas o específicas y no abusar del

<div>

- (5)

- Controles de interfaz: que de forma predeterminada se pueda navegar con el

teclado. (6)

- Etiquetas de texto significativas: No usar simplemente "Haga clic aquí",

ejemplo: (7)

- Links: (8)

- <img>:

src="dinosaur.png"

alt="A red Tyrannosaurus Rex: A two legged dinosaur standing"

title="The Mozilla red dinosaur">

- …

Recursos extra:

- CSS y JS accesibles: https://developer.mozilla.org/en-US/docs/Learn/

Accessibility/CSS_and_JavaScript

(1)Good semantic: https://mdn.github.io/learning-area/accessibility/html/good-

semantics.html

(2)Bad semantic: https://mdn.github.io/learning-area/accessibility/html/bad-

semantics.html

(3)Bad Design, Table Layout: https://mdn.github.io/learning-area/accessibility/html/

table-layout.html

(4)Good Design: https://mdn.github.io/learning-area/html/introduction-to-html/

document_and_website_structure/

(5)Seccionamiento de contenido: https://developer.mozilla.org/en-US/docs/Web/

HTML/Element#Content_sectioning

(6) https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/
accessibility/native-keyboard-accessibility.html

(7):

(8): https://mdn.github.io/learning-area/accessibility/html/good-links.html

https://mdn.github.io/learning-area/accessibility/html/bad-links.html