1. Pautes WCAG 2.1 (Nivell AA)

Perceptible: La informació i els components de la interfície han de ser presentats de manera que siguin perceptibles per tots els usuaris.

• 1 - Text Alternatiu per a Imatges: Proporciona text alternatiu (atribut "alt") per a totes les imatges per facilitar la comprensió amb lectors de pantalla.

Exemple:

<img src="reunio.jpg" alt="Persones en una reunió de la fundació parlant i somrient">

• 2 - Multimèdia: Subtítols i Transcripcions: Els vídeos han de tenir subtítols per a persones amb discapacitats auditives.

Exemple:

<video controls>
  <source src="xerrada.mp4" type="video/mp4">
  <track src="subtitols.vtt" kind="subtitles" srclang="ca" label="Català">
</video>

• 3 - Adaptabilitat: Crear contingut que pugui ser presentat de diferents maneres sense perdre informació ni estructura.

• 4 - Distinguible: Contrastos Adequats: Assegura't que hi hagi un contrast suficient entre el text i el fons.

Exemple:

body {
  background-color: #003366; /* blau fosc */
  color: #FFFFFF; /* text blanc */
}

Operable: El contingut ha de ser fàcil de manejar i navegar.

• 5 - Accessible per Teclat: Tot el contingut ha de ser accessible només usant el teclat.

Exemple:

<button>Enviar</button>

Codi utilitzat a la plana de faqs per tal que es pugui obrir cada pregunta amb el tabulador i "Enter"
< style >
.faq h3:focus {
outline: 2px solid #333;
}
.faq-answer {
display: none;
padding: 15px;
background-color: #e7f3ec;
border-left: 4px solid #a8d5ba;
margin-bottom: 10px;
border-radius: 0 0 5px 5px;
}
.faq-answer p {
margin: 0;
}
.faq-question[aria-expanded="true"] + .faq-answer {
display: block;
}

.faq-question:after {
content: "+";
font-size: 24px;
}
.faq-question[aria-expanded="true"]:after {
content: "-";
font-size: 24px;
}
< /style >
Codi que genera les preguntes i respostes amb la class
< div class="faq">
< h3 class="faq-question" tabindex="0" aria-expanded="true">
¿Qué es la Ley General de Discapacidad (LGD)?< /h3>
< div class="faq-answer">....
script necesari al final
< script >
document.querySelectorAll('.faq-question').forEach((question) => {
question.addEventListener('click', () => {
const isExpanded = question.getAttribute('aria-expanded') === 'true';
question.setAttribute('aria-expanded', !isExpanded);
});
question.addEventListener('keydown', (e) => { if (e.key === 'Enter') { question.click(); } }); });
< /script >

• 6 - Temps suficient: Donar temps addicional als usuaris per llegir i utilitzar el contingut.:
  

• 7 - Evitar Animacions que Causin Convulsions: Evita animacions que puguin causar reaccions adverses.

• 8 - Navegació: Proporcionar eines per navegar, trobar contingut i determinar on es troba un usuari dins del lloc web o aplicació.

Comprensible: La informació ha de ser fàcil d'entendre.

• 9 - Llenguatge Clar i Senzill: Utilitza un llenguatge senzill per facilitar la comprensió.

Exemple: En lloc de dir: "Si us plau, proporcioni la informació requerida per completar el procés de registre", usa: "Escriu la teva informació per registrar-te".

• 10 - Previsibilitat: Explicacions amb Pictogrames: Utilitza imatges per acompanyar textos i facilitar la comprensió.

Exemple:

<img src="pagament.jpg" alt="Icona de pagament mostrant targeta de crèdit">

• 11 - Mecanismes per Evitar Errors: Proporciona missatges d'error clars i senzills en els formularis.

Exemple:

<label for="email">Correu Electrònic:</label>
<input type="email" id="email" name="email" required>
<span class="error" id="error-email">Si us plau, introdueix un correu vàlid.</span>

Robust: El contingut ha de ser compatible amb tecnologies d'assistència.

• 12 - Compatibilitat amb Lectors de Pantalla: Assegura't que l'HTML estigui ben estructurat i utilitzi elements semàntics.

Exemple:

<header>
  <h1>Benvingut a la Fundació XYZ</h1>
</header>
<main>
  <section>
    <h2>Qui Som</h2>
    <p>La nostra missió és ajudar persones amb discapacitats intel·lectuals...</p>
  </section>
</main>

• 13 - Accessibilitat per a la funcionalitat addicional: Aquesta nova pauta (prevista com a pauta 2.5) inclou orientacions addicionals per millorar l'accessibilitat en aspectes com el control de desplaçaments en contingut interactiu, la comprensió de les funcionalitats de manera simplificada i altres millores que facin el contingut més accessible per a tothom.