Dag 19: Bruke ekte tabelltitler

Hvis du har en kalender på nettstedet ditt, skulle den bli fremstilt som en HTML-tabell. Det har vært noen få forsøk på å lage rene CSS-kalendere. Dette er et villspor; kalendere er tabelldata, og skulle bli merket opp som sådan.

Den aller viktigste tingen om datatabellen er å merke opp titlene riktig. Når det dreier seg om en kalender, betyr det ukens dager langs toppen. Du skulle så absolutt inkludere titlene til ukens dager; hvis du ikke ønsker at de skal være synlige, kan du gjøre dem usynlige med CSS. (Jeg gjør dette i min egen weblogg.) Men ikke desto mindre så må titlene være der, fordi skjermlesere er avhengige av dem for å hjelpe blinde brukere til å navigere gjennom tabellen uten å gå seg vill.

Når det gjelder en kalender (og hvilke som helst datatabeller, faktisk, men vi snakker mest om kalendere i dag) er saken den at den er veldig enkel å bruke hvis du kan se alt sammen på én gang, men veldig vanskelig å bruke hvis du bare kan se én dag om gangen. Forestill deg at du har en dag-etter-dag kalender på skrivebordet ditt, men hver side lister kun opp månedens dag, ikke ukens dag. Side etter side: 1, 2, 3, 4, 5, 6, 7 ... I dag er 4, noe jeg tilfeldigvis vet er torsdag. Hopp nå over til 11, 12, 13. Vær rask: Hvilken av ukens dager er 13? Siden sier deg det ikke; du er nødt til å holde rede på det selv.

Slik er det for en blind bruker å navigere på en kalender uten noen skikkelige titler. Du får en masse tall, men ingen sammenheng til å holde styr på dem. Ved å legge skikkelige titler på kalenderen lar man skjermleser-programvare assosiere tabelltitlene (ukens dager) med tabelldataene (månedens dager), og de leser dem etter hverandre. «Torsdag 4, torsdag 11, fredag 12, lørdag 13.» Ah, det er en lørdag.

Merk deg at jeg sa skikkelige titler. Å legge ukens dager inn i <td>-tagger i den første raden er ikke nok. De må være <th>-tagger i stedet. De fleste weblogg-maler gjør dette feil, men det er enkelt nok å fikse, og kalenderen din vil se nøyaktig lik ut i visuelle nettlesere når du er ferdig.

Hvem har nytte av det?

  1. Anne har nytte av det. Når hun møter på kalenderen din, JAWS leser først overskriftene, deretter kunngjøres titlene, så kan Anne holde nede Control + ALT og flytte seg gjennom tabellen med piltastene. Etter som hun forflytter seg, kunngjør JAWS tittelen (ukens dag) og celledataen (månedens dag).

    Alle større skjermlesere tillater denne typen tabell-navigasjon. Home Page Reader lar brukere bytte til «Tabell-navigasjon»-modus (ALT+T), deretter å flytte seg gjennom kalenderen uten å måtte holde nede ytterligere modifiserte taster. Home Page Reader går faktisk et skritt lenger enn JAWS. Som vi straks vil se, kan du definere en kortere (eller lengre) tittel for hver tabelltittel (nesten som å legge til tittel på en lenke), og Home Page Reader leser det i stedet for den originale tabelltittelens tekst. Det betyr at du visuelt kan vise ukens dager som «Søn», «Man», «Tir», men du kan fortelle Home Page Reader til å lese dem som «Søndag», «Mandag», «Tirsdag». Kult.

Hvordan gjøre det

Hvis du ikke allerede har gjort det, sørg for at kalenderen din har en ekte overskrift. <caption>-taggen må være den første tingen etter <table>-taggen, og raden med <th>-tagger skal være den første tingen etter det.

I Movable Type, finn kalenderen i hovedsidemalen din. (Igjen, et søk etter «calendarhead» vil sannsynligvis finne den.) Umiddelbart etter <caption>, vil du se ukens dager definert som dette:

<tr>
<td align="center"><span class="calendar">Søn</span></td>
<td align="center"><span class="calendar">Man</span></td>
<td align="center"><span class="calendar">Tir</span></td>
<td align="center"><span class="calendar">Ons</span></td>
<td align="center"><span class="calendar">Tor</span></td>
<td align="center"><span class="calendar">Fre</span></td>
<td align="center"><span class="calendar">Lør</span></td>
</tr>

Endre det til dette:

<tr>
<th abbr="Søndag" align="center"><span class="calendar">Søn</span></th>
<th abbr="Mandag" align="center"><span class="calendar">Man</span></th>
<th abbr="Tirsdag" align="center"><span class="calendar">Tir</span></th>
<th abbr="Onsdag" align="center"><span class="calendar">Ons</span></th>
<th abbr="Torsdag" align="center"><span class="calendar">Tor</span></th>
<th abbr="Fredag" align="center"><span class="calendar">Fre</span></th>
<th abbr="Lørdag" align="center"><span class="calendar">Lør</span></th>
</tr>

Det skjer to ting her: Alle <td>-tagger endres til <th>, og hver av de får et «abbr»-atributt som spesifiserer hele navnet til ukens dag. («abbr»-atributtet kan tjene et dobbelt formål. For veldig lange tabelltitler, tjener det som en forkortelse; herav navnet. Men for veldig korte tabelltitler, tjener det som en lengre versjon, som er det vi gjør her.)

I Radio, minner prosedyren om det du gjorde i går, da du ga tabellen en ekte overskrift.

  1. I Radio, åpner du Radio's faktiske applikasjon. I Windows, høyreklikk på det lille Radio-ikonet i systemkurven og velg «Åpne Radio».
  2. I «Verktøy»-menyen, velg «Utviklere», deretter «Hopp ...» (Control+J). Hopp til «system.verbs.builtins.radio.weblog.drawCalendar» (uten anførselstegn).
  3. Så går du til «Rediger»-menyen, «Finn og erstatt», «Finn ...» (Control+F) og finn "addDayName". Dette skulle åpenbare og fremheve addDayName-funksjonen. Dobbeltklikk triangelet for å få frem den faktiske funksjons-koden, noe som skulle se ut som dette:

    on addDayName (name)
      add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")

  4. Endre det til dette:

    on addDayName (name, fullname)
      add ("<th abbr=\"" + fullname + "\" width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")

  5. Dobbeltklikk nå på «for i = 1 to 7»-linjen rett under det for å se dette:

    for i = 1 to 7
      addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i))

  6. Og endre det til dette:

    for i = 1 to 7
      addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i), radio.string.getLocalizedString ("dayOfWeek." + i))

Veldig viktig merknad om layout-tabeller

Tabeller brukt utelukkende for visuell layout har et fullstendig annerledels sett med regler. Ikke bruk <th>-tagger på layout-tabeller. Bortsett fra å knote tabellene dine til å presentere ditt viktigste innhold først, er det veldig lite du behøver å gjøre for å gjøre layout-tabeller tilgjengelige. Vi skal diskutere en liten ting i morgen.

Les mer

Hvis du trenger å markere opp datatabeller mer sammensatt enn en kalender (som tabeller med flere nivåer med titler og undertitler), står du alene. Her er noen steder du kan starte: