Data-tabellens fallback
Tilbyd de underliggende tal i en tilgængelig tabel.
Data-tabellens fallback er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Når ord ikke er nok
En opsummering på én linje fortæller historien, men nogle brugere vil have tallene. En datatabel giver dem de rå værdier bag diagrammet.
Tabellen er sandhedskilden
Tænk på diagrammet som en visualisering af en tabel. Tilbyd den samme tabel med korrekt markup, så alle hjælpemidler kan læse den uden problemer.
Brug et ægte table-element
Skærmlæsere forstår det indbyggede table-element grundigt: rækker, kolonner og overskrifter bliver alle annonceret korrekt uden ekstra ARIA.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Giv tabellen en caption
En caption navngiver tabellen, så den, der lytter, ved, hvilke data den indeholder. Den bliver læst op, når fokus lander på tabellen.
<table><caption>Monthly sales in 2024</caption> ... </table>Overskriftsceller med th og scope
Markér etiketter som th med en scope, så hver værdi bliver annonceret sammen med sin kolonne og række. Den kontekst er afgørende i en tabel.
<th scope="col">Sales</th>
<th scope="row">January</th>Placér den lige ved diagrammet
Placér reservetabellen ved siden af diagrammet, ikke på en separat side. Brugerne skal kunne nå dataene uden at lede efter dem.
Skjul den eventuelt visuelt
Hvis tabellen forstyrrer designet, kan du skjule den visuelt, men stadig beholde den for skærmlæsere ved hjælp af klassen visually-hidden, aldrig display none.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Skjul aldrig dataene med display none
Pas på: display: none fjerner indholdet helt fra tilgængelighedstræet. Når det skjules sådan, hjælper din reservetabel ingen.
Et details-skifte virker også
Pak tabellen ind i et details-element, så seende brugere kan folde tallene ud efter behov, mens indholdet stadig er fuldt tilgængeligt.
<details><summary>View data table</summary>
<table>...</table>
</details>Hold tabel og diagram synkroniseret
Hvis diagrammet opdateres, skal tabellen også opdateres. Forældede tal bag et nyt diagram vildleder i stilhed de mennesker, der er afhængige af dem.
Én kilde, to visninger
Ideelt set gengives både diagrammet og tabellen fra de samme data. Det holder dem korrekte og sparer dig for at vedligeholde to sandheder. 🔗
Hurtigt tjek
Hvordan bør du skjule en datatabel, som du stadig vil have skærmlæsere til at læse?
Opsummering: Tallene bag billedet
Du har lært at understøtte alle diagrammer med en ægte tabel: med caption, kolonne- og rækkeangivne overskrifter, synkroniseret og sikkert skjult efter behov, aldrig med display none. 📋
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Data-tabellens fallback” gratis?
Ja — hele teksten til “Data-tabellens fallback” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Data-tabellens fallback”?
Tilbyd de underliggende tal i en tilgængelig tabel. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Data-tabellens fallback”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Alle diagrammer har brug for et tekstalternativ
- Data-tabellens fallback
- Farve, mønster og direkte etiketter
- Interaktive diagrammer, der kan navigeres med tastaturet