El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Conceptes bàsics d'accessibilitat web

Següent ►
►

L'accessibilitat web és un aspecte crucial del desenvolupament web que assegura que les pàgines web siguin utilitzables per tothom, incloent-hi persones amb discapacitats. En aquesta secció, explorarem els conceptes bàsics de l'accessibilitat web, les seves normes i com implementar pràctiques accessibles en els teus projectes HTML.

  1. Què és l'accessibilitat web?

L'accessibilitat web es refereix a la pràctica de fer que els llocs web siguin accessibles per a tothom, independentment de les seves capacitats físiques, cognitives o tècniques. Això inclou persones amb discapacitats visuals, auditives, motores o cognitives.

Objectius de l'accessibilitat web:

  • Inclusió: Assegurar que tothom pugui accedir i utilitzar la informació i els serveis disponibles en línia.
  • Compliment legal: Molts països tenen lleis que requereixen que els llocs web siguin accessibles.
  • Millora de l'experiència d'usuari: Un lloc web accessible sovint proporciona una millor experiència per a tots els usuaris.

  1. Normes i directrius d'accessibilitat

WCAG (Web Content Accessibility Guidelines)

Les WCAG són un conjunt de directrius desenvolupades pel W3C (World Wide Web Consortium) per ajudar a fer el contingut web més accessible. Les WCAG es divideixen en quatre principis fonamentals:

  1. Perceptible: La informació i els components de la interfície d'usuari han de ser presentats de manera que els usuaris puguin percebre'ls.
  2. Operable: Els components de la interfície d'usuari i la navegació han de ser operables.
  3. Comprensible: La informació i el funcionament de la interfície d'usuari han de ser comprensibles.
  4. Robust: El contingut ha de ser robust perquè pugui ser interpretat de manera fiable per una àmplia varietat d'agents d'usuari, incloent-hi tecnologies assistives.

  1. Pràctiques bàsiques d'accessibilitat en HTML

3.1. Utilitzar etiquetes semàntiques

Les etiquetes semàntiques proporcionen informació sobre l'estructura i el significat del contingut, cosa que ajuda les tecnologies assistives a interpretar correctament la pàgina.

<header>
  <h1>Benvingut al meu lloc web</h1>
  <nav>
    <ul>
      <li><a href="#home">Inici</a></li>
      <li><a href="#about">Sobre nosaltres</a></li>
      <li><a href="#contact">Contacte</a></li>
    </ul>
  </nav>
</header>

3.2. Proporcionar textos alternatius per a imatges

Els textos alternatius (atribut alt) són essencials per a les persones que utilitzen lectors de pantalla.

<img src="imatge.jpg" alt="Descripció de la imatge">

3.3. Assegurar-se que els enllaços són descriptius

Els enllaços han de tenir textos descriptius que expliquin clarament la seva destinació.

<a href="document.pdf">Descarrega el document PDF</a>

3.4. Utilitzar etiquetes de formulari correctes

Les etiquetes de formulari han de ser associades correctament amb els seus camps per facilitar la navegació amb tecnologies assistives.

<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom">

3.5. Assegurar el contrast de colors

El contrast adequat entre el text i el fons és crucial per a la llegibilitat.

body {
  background-color: #ffffff;
  color: #000000;
}

  1. Eines per a provar l'accessibilitat

4.1. Lectors de pantalla

Els lectors de pantalla són eines que converteixen el text en veu. Alguns exemples inclouen:

  • NVDA (Windows)
  • VoiceOver (MacOS)
  • JAWS (Windows)

4.2. Validadors d'accessibilitat

Hi ha diverses eines en línia que poden ajudar a validar l'accessibilitat del teu lloc web:

  • WAVE (Web Accessibility Evaluation Tool)
  • AXE (Accessibility Engine)
  • Lighthouse (Eina integrada en Chrome DevTools)

Exercici pràctic

Exercici 1: Millorar l'accessibilitat d'una pàgina HTML

Tasca:

Millora l'accessibilitat de la següent pàgina HTML afegint etiquetes semàntiques, textos alternatius per a imatges, etiquetes de formulari correctes i assegurant un contrast adequat.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Pàgina d'exemple</title>
</head>
<body>
  <div>
    <h1>Benvingut</h1>
    <img src="imatge.jpg">
    <a href="document.pdf">Clica aquí</a>
  </div>
  <div>
    <form>
      <input type="text" placeholder="Nom">
      <input type="submit" value="Enviar">
    </form>
  </div>
</body>
</html>

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Pàgina d'exemple</title>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
    }
  </style>
</head>
<body>
  <header>
    <h1>Benvingut</h1>
  </header>
  <main>
    <img src="imatge.jpg" alt="Descripció de la imatge">
    <a href="document.pdf">Descarrega el document PDF</a>
  </main>
  <footer>
    <form>
      <label for="nom">Nom:</label>
      <input type="text" id="nom" name="nom" placeholder="Nom">
      <input type="submit" value="Enviar">
    </form>
  </footer>
</body>
</html>

Conclusió

L'accessibilitat web és essencial per crear llocs web inclusius i fàcils d'utilitzar per a tothom. Implementar etiquetes semàntiques, proporcionar textos alternatius per a imatges, assegurar-se que els enllaços són descriptius, utilitzar etiquetes de formulari correctes i assegurar un contrast adequat són pràctiques bàsiques que poden millorar significativament l'accessibilitat del teu lloc web. Utilitza eines de validació i lectors de pantalla per provar i assegurar-te que el teu lloc web compleix amb les normes d'accessibilitat.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats