Tilgængelighed i datovælgere: Opbygning af inkluderende kalender-widgets

Korrekt:

            
<table>
  <caption>Kalender for oktober 2024</caption>
  <thead>
    <tr>
      <th scope="col">Søn</th>
      <th scope="col">Man</th>
      <th scope="col">Tir</th>
      <th scope="col">Ons</th>
      <th scope="col">Tor</th>
      <th scope="col">Fre</th>
      <th scope="col">Lør</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- Flere rækker -->
  </tbody>
</table>

            

              
                Copy
              
            
          

2. ARIA-attributter

ARIA (Accessible Rich Internet Applications)-attributter giver yderligere semantisk information til hjælpeteknologier, hvilket forbedrer deres forståelse af interaktive elementer. Brug ARIA-attributter til at:

• Definere roller: Angiv formålet med elementer, såsom `role="grid"` for kalendergitteret og `role="gridcell"` for hver datocelle.
• Angive etiketter: Brug `aria-label` eller `aria-labelledby` til at give beskrivende etiketter til elementer, især når den visuelle etiket er utilstrækkelig.
• Angive tilstand: Brug attributter som `aria-selected` til at angive den valgte dato og `aria-disabled` til at angive deaktiverede datoer.
• Give beskrivelser: Brug `aria-describedby` til at knytte yderligere information til et element, såsom en beskrivelse af datoformatet.

Eksempel:

            
<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Vælg en dato</caption>
  <thead>
    <tr>
      <th scope="col">Søn</th>
      <th scope="col">Man</th>
      <th scope="col">Tir</th>
      <th scope="col">Ons</th>
      <th scope="col">Tor</th>
      <th scope="col">Fre</th>
      <th scope="col">Lør</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="1. oktober 2024">1</button></td>
      <td role="gridcell"><button aria-label="2. oktober 2024">2</button></td>
      <td role="gridcell"><button aria-label="3. oktober 2024">3</button></td>
      <td role="gridcell"><button aria-label="4. oktober 2024">4</button></td>
      <td role="gridcell"><button aria-label="5. oktober 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6. oktober 2024">6</button></td>
      <td role="gridcell"><button aria-label="7. oktober 2024">7</button></td>
      <td role="gridcell"><button aria-label="8. oktober 2024">8</button></td>
      <td role="gridcell"><button aria-label="9. oktober 2024">9</button></td>
      <td role="gridcell"><button aria-label="10. oktober 2024">10</button></td>
      <td role="gridcell"><button aria-label="11. oktober 2024">11</button></td>
      <td role="gridcell"><button aria-label="12. oktober 2024">12</button></td>
    </tr>
    <!-- Flere rækker -->
  </tbody>
</table>

            

              
                Copy
              
            
          

Bemærk: Test altid med rigtige skærmlæsere for at sikre, at ARIA-attributterne fortolkes korrekt.

3. Tastaturnavigation

Tastaturnavigation er afgørende for brugere, der ikke kan bruge en mus eller anden pegeredskab. Sørg for, at alle interaktive elementer i datovælgeren er tilgængelige via tastaturet.

• Fokusstyring: Brug `tabindex`-attributten til at styre fokusrækkefølgen. Sørg for, at fokus bevæger sig logisk gennem datovælgeren. Brug JavaScript til at styre fokus, når brugeren interagerer med widgetten.
• Piletaster: Implementer tastaturnavigation ved hjælp af piletasterne for at flytte mellem datoer. Venstre og højre piletast skal flytte til henholdsvis forrige og næste dag. Op og ned piletaster skal flytte til samme dag i henholdsvis forrige og næste uge.
• Home- og End-taster: Home-tasten skal flytte til den første dag i den aktuelle uge, og End-tasten skal flytte til den sidste dag i den aktuelle uge.
• Page Up- og Page Down-taster: Page Up-tasten skal flytte til forrige måned, og Page Down-tasten skal flytte til næste måned.
• Enter-tast: Enter-tasten skal vælge den fokuserede dato.
• Escape-tast: Escape-tasten skal lukke datovælgeren og returnere fokus til det inputfelt eller den knap, der udløste den.

Eksempel (JavaScript):

            
// Eksempel på håndtering af tastaturnavigation
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Flyt fokus til forrige dag
      break;
    case 'ArrowRight':
      // Flyt fokus til næste dag
      break;
    case 'ArrowUp':
      // Flyt fokus til samme dag i forrige uge
      break;
    case 'ArrowDown':
      // Flyt fokus til samme dag i næste uge
      break;
    case 'Enter':
      // Vælg den fokuserede dato
      break;
    case 'Escape':
      // Luk datovælgeren
      break;
  }
});

            

              
                Copy
              
            
          

4. Skærmlæserkompatibilitet

Skærmlæsere er afhængige af semantisk HTML og ARIA-attributter for at give information til brugerne. Sørg for, at din datovælger er kompatibel med populære skærmlæsere som NVDA, JAWS og VoiceOver.

• Beskrivende etiketter: Sørg for klare og præcise etiketter for alle interaktive elementer. Brug `aria-label` eller `aria-labelledby` til at give yderligere kontekst.
• Tilstandsmeddelelser: Brug ARIA-attributter til at angive elementers tilstand, såsom `aria-selected` for den valgte dato og `aria-disabled` for deaktiverede datoer. Skærmlæsere vil annoncere disse tilstande for brugeren.
• Live Regions: Brug ARIA live regions (f.eks. `aria-live="polite"`) til at annoncere dynamiske ændringer i datovælgeren, f.eks. når brugeren navigerer til en anden måned. Dette giver skærmlæsere mulighed for at underrette brugeren om ændringen uden at afbryde deres arbejdsgang.
• Fejlhåndtering: Hvis der er fejl eller valideringsproblemer, skal du give klare og informative fejlmeddelelser, der er tilgængelige for skærmlæsere. Brug `aria-describedby` til at knytte fejlmeddelelsen til det relevante inputfelt.

Eksempel:

            
<div aria-live="polite">
  <!-- Dynamisk indhold, såsom månedsnavigation -->
</div>

            

              
                Copy
              
            
          

5. Visuelt design

Det visuelle design af datovælgeren skal også være tilgængeligt. Overvej følgende:

• Farvekontrast: Sørg for tilstrækkelig farvekontrast mellem tekst- og baggrundsfarver for at opfylde WCAG (Web Content Accessibility Guidelines) 2.1 Level AA-standarder. Brug et værktøj til at tjekke farvekontrast for at verificere kontrastforholdet.
• Fokusindikatorer: Sørg for en klar og synlig fokusindikator for alle interaktive elementer. Fokusindikatoren skal være tydeligt adskilt fra de omkringliggende elementer og må ikke skjules af andre elementer.
• Skriftstørrelse og afstand: Brug en læselig skriftstørrelse og tilstrækkelig afstand mellem elementerne for at forbedre læsbarheden og brugervenligheden.
• Undgå at stole udelukkende på farve: Stol ikke udelukkende på farve til at formidle information. Brug andre visuelle signaler, såsom ikoner eller tekst, til at supplere farvekodningen.

6. Lokalisering og internationalisering

Datoformater, kalendersystemer og sprogkonventioner varierer på tværs af forskellige kulturer og regioner. Sørg for, at din datovælger er korrekt lokaliseret og internationaliseret for at understøtte et globalt publikum.

• Datoformater: Brug et fleksibelt datoformateringsbibliotek, der understøtter forskellige datoformater, såsom DD/MM/YYYY (almindeligt i Europa og dele af Asien) og MM/DD/YYYY (almindeligt i Nordamerika). Tillad brugere at tilpasse datoformatet efter deres præferencer.
• Kalendersystemer: Understøt forskellige kalendersystemer, såsom den gregorianske kalender (den mest udbredte kalender) og Hijri-kalenderen (bruges i mange islamiske lande).
• Sprogunderstøttelse: Sørg for oversættelser af alle tekstelementer i datovælgeren, herunder månedsnavne, ugedagsnavne og etiketter.
• Højre-til-venstre (RTL) understøttelse: Sørg for, at datovælgeren vises korrekt i RTL-sprog, såsom arabisk og hebraisk. Dette kan kræve justering af widgettens layout og styling.
• Tidszoner: Overvej konsekvenserne af tidszoner, når du håndterer datoer. Gem datoer i en konsistent tidszone (f.eks. UTC) og konverter dem til brugerens lokale tidszone, når de vises.

Eksempel: Brug et JavaScript-bibliotek som `moment.js` eller `date-fns` til at håndtere datoformatering og lokalisering.

7. Mobil tilgængelighed

Med den stigende brug af mobile enheder er det vigtigt at sikre, at din datovælger er tilgængelig på mobile platforme. Overvej følgende:

• Berøringsflader: Sørg for, at alle interaktive elementer har tilstrækkeligt store berøringsflader til let at kunne trykkes på på mobile enheder. Apple anbefaler en minimumsstørrelse på 44x44 pixels for berøringsflader.
• Responsivt design: Brug responsive designteknikker til at sikre, at datovælgeren tilpasser sig forskellige skærmstørrelser og -orienteringer.
• Tastaturinput: Hvis datovælgeren kræver tastaturinput, skal du levere et mobilvenligt tastatur, der er optimeret til datoindtastning.
• Bevægelser: Undgå at stole udelukkende på bevægelser, der kan være vanskelige for brugere med motoriske funktionsnedsættelser. Sørg for alternative inputmetoder, såsom tastaturnavigation eller stemmestyring.

Test og validering

Grundig testning er afgørende for at sikre tilgængeligheden af din datovælger. Brug en kombination af automatiserede og manuelle testmetoder:

• Automatiseret testning: Brug værktøjer til tilgængelighedstest, såsom Axe eller WAVE, til at identificere almindelige tilgængelighedsproblemer.
• Manuel testning: Test datovælgeren manuelt ved hjælp af en skærmlæser og tastaturnavigation for at verificere, at den kan bruges af personer med handicap.
• Brugertestning: Gennemfør brugertestning med personer med handicap for at indsamle feedback og identificere områder til forbedring.
• WCAG-overholdelse: Sørg for, at din datovælger opfylder kravene i WCAG 2.1 Level AA.

Eksempler på tilgængelige datovælgere

Flere open source og kommercielle datovælgerbiblioteker giver god understøttelse af tilgængelighed. Nogle eksempler inkluderer:

• React Datepicker: En populær React-komponent med ARIA-understøttelse og tastaturnavigation.
• Air Datepicker: En let og tilpasselig datovælger med gode tilgængelighedsfunktioner.
• FullCalendar: En fuldt udstyret kalenderkomponent med omfattende understøttelse af tilgængelighed.

Når du vælger et datovælgerbibliotek, skal du omhyggeligt evaluere dets tilgængelighedsfunktioner og sikre, at det opfylder dine specifikke krav.

Bedste praksis for at bygge tilgængelige datovælgere

Her er en opsummering af bedste praksis for at bygge tilgængelige datovælgere:

• Brug semantisk HTML til at strukturere datovælgeren.
• Brug ARIA-attributter til at give yderligere semantisk information.
• Sørg for, at tastaturnavigation er fuldt implementeret.
• Test med skærmlæsere for at verificere kompatibilitet.
• Sørg for tilstrækkelig farvekontrast og klare fokusindikatorer.
• Lokaliser og internationaliser datovælgeren til globale brugere.
• Optimer datovælgeren til mobile enheder.
• Gennemfør grundig testning og validering.

Konklusion

At bygge tilgængelige datovælgere er en kompleks, men essentiel opgave. Ved at følge retningslinjerne og de bedste praksisser, der er beskrevet i denne guide, kan du skabe inkluderende kalender-widgets, der imødekommer brugere med alle evner på tværs af forskellige kulturelle og teknologiske landskaber. Husk, at tilgængelighed er en løbende proces, og kontinuerlig testning og forbedring er afgørende for at sikre, at dine datovælgere forbliver tilgængelige over tid. Ved at prioritere tilgængelighed kan du skabe en mere inkluderende og brugervenlig weboplevelse for alle.

Yderligere ressourcer

• WAI-ARIA Authoring Practices Guide (APG) - Calendar
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University