ACCESSIBILITAT EN LA WEB

L'accessibilitat en una pàgina web és crucial per assegurar-se que tothom pugui accedir i interactuar amb el contingut de manera efectiva...

Exemples d'Accessibilitat:

• Utilització correcta de les etiquetes HTML semàntiques.
• Imatges amb atributs "alt" descriptius.
• Ús de tabindex per gestionar l'ordre de focus.
• Fonts lliures de serifs i amb un contrast adequat.
• Compatibilitat amb lectors de pantalla.

Activar la Lectura en Veu Alta a Windows 10:

1. Premeu la tecla Windows + Control + Enter per activar la funció de Lectura en Veu Alta.

2. Ajusteu la configuració a través de les opcions d'accessibilitat a la configuració del sistema.

Activar la Lectura en Veu Alta a Google Chrome:

1. Premeu la tecla Alt + Shift + A per activar la funció de Lectura en Veu Alta a Chrome.

2. Utilitzeu la tecla TAB per navegar entre els elements de la pàgina mentre la Lectura en Veu Alta està activada.

Elements per Millorar l'Accessibilitat

L'accessibilitat en la web és crucial per a tots els usuaris, incloent aquells amb discapacitats. Aquí tens una llista d'elements importants per millorar l'accessibilitat:

1. Imatges amb l'atribut `alt`:
   <img src="imatge.jpg" alt="Descripció de la imatge">
   Proporciona una descripció de la imatge per als lectors de pantalla i en cas que la imatge no es pugui carregar.
2. Enllaços amb `aria-label`:
   <a href="#" aria-label="Anar a la pàgina d'inici">Inici</a>
   Descriu la funcionalitat de l'enllaç per als lectors de pantalla.
3. Botons amb `aria-label`:
   <button aria-label="Obre el menú">☰</button>
   Proporciona una etiqueta lletra per descriure la funcionalitat del botó.
4. Elements amb `aria-labelledby`:
   <div id="seccio1">Secció 1</div>
<div aria-labelledby="seccio1">Contingut de la Secció 1</div>
   Associa un element amb una etiqueta lletra identificada per un identificador específic.
5. Elements amb `aria-describedby`:
   <input type="text" aria-describedby="instruccions">
<div id="instruccions">Introdueix la teva informació aquí</div>
   Associa un element amb una descripció addicional.
6. Elements amb l'atribut `role`:
   <nav role="navigation"><ul><li>...</li></ul></nav>
   Especifica la funció d'un element, com ara `navigation`, `button`, `list`, etc.
7. Elements amb `aria-hidden`:
   <div aria-hidden="true">Aquest element no és visible per als lectors de pantalla</div>
   Oculta un element als lectors de pantalla, útil per elements purament visuals.
8. Elements amb `tabindex`:
   <input type="text" tabindex="0">
   Especifica l'ordre de focus quan es navega amb la tecla TAB.