Dag 10: Presentere ditt viktigste innhold først

En av de viktigste fordelene med helt og holdent å bruke en CSS-basert mal er at det er enkelt å omordne elementer i HTML-kildekoden uten å berøre den visuelle layouten, slik at ditt viktigste innhold vises mens resten av siden fortsatt lastes. Dog, jeg er klar over at de fleste nettsider fortsatt bruker tabellbaserte maler, så dette tipset er for deg.

Hvis du har en tabellbasert mal med en navigasjonsliste langs venstre side, blir navigasjonslisten presentert for blinde brukere som Marius og Anne før hovedinnholdet. Det er umulig å beskrive hvor stort problem dette er; du må se det selv:

  1. Eksempel på tabellbasert layout.
  2. Modifisert layout, med innholdet først. Disse to malene burde se vesentlig like ut i visuelle nettlesere, men i Lynx er forskjellen åpenbar.
  3. Den originale layouten, gjengitt av Lynx.
  4. Den modifiserte layouten, gjengitt av Lynx. Det viktigste innholdet vises først, deretter navigasjonslisten.

Du trenger ikke å redesigne malen din helt fra bunnen av for å unngå dette problemet. Det er en (relativt) enkel teknikk, i hengiven affekt kalt «tabelltrikset», som kan presentere ditt viktigste innhold først, mens du fortsatt beholder navigasjonslisten langs venstre side.

Hvem har nytte av det?

  1. Marius har nytte av det. Som demonstrert i eksempelet ovenfor, viser Lynx innhold i samme rekkefølge som innholdet har i HTML-kilden. Det betyr at Marius må skrolle gjennom hele navigasjonslisten hver eneste gang han besøker siden din. Skrolling suger.
  2. Anne har nytte av det. JAWS, akkurat som Lynx, presenterer innhold i den rekkefølgen som det vises i HTML-kildekoden, ikke i den rekkefølgen som vises på skjermen. Med JAWS er problemet enda verre, fordi Anne må vente mens JAWS leser gjennom hele navigasjonslisten før hun kan høre noe virkelig innhold, og det finnes ingen sikker metode for å hoppe direkte til det viktigste innholdet. (Vi snakker mer om dette problemet på mandag).
  3. Google tjener på det. Google vektlegger innhold nær toppen av siden sterkest. Det vil si toppen av HTML-kildekoden, ikke den visuelle toppen av siden. Faktisk er de fleste som vet om denne teknikken i søkemotoroptimaliserings-bransjen; for dem er tilgjengelighetsfordelene underordnet.

Hvordan gjøre det

Se på din egen side i Lynx Viewer og se om daglige innlegg vises først, før navigasjonen. Movable Types standardmal gjør dette riktig; hvis du bruker standardmalen eller noe basert på den, så trenger du sannsynligvis ikke å forandre på noe. Men se på siden din i Lynx Viewer allikevel, for det vil gi deg en dypere forståelse av temaet.

Hvis du bruker en av Radios standardmaler, må du kanskje justere tabellene til å sette det viktigste innholdet først. Det er ingen spesifikk kopier-og-lim-inn måte å gjøre dette på, du må grave deg inn i din egen mal og kikke på tabell-strukturen. Eksempel-layouten og den modifiserte eksempel-layouten viser deg den grunnleggende teknikken:

I stedet for den åpenbare tabell-layouten:

<table>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigasjonsliste ...
  </td>
  <td valign="top" align="left">
    ... viktigste innhold ...
  </td>
</tr>
</table>

Så gjør vi dette i stedet:

<table>
<tr>
  <!-- mellomroms-GIF i øverste venstre celle -->
  <td><img src="/images/1.gif" width="1" height="1" alt=""></td>
  <!-- main content cell first, with rowspan=2 -->
  <td valign="top" align="left" rowspan="2">
    ... viktigste innhold  ...
  </td>
</tr>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigasjonsliste ...
  </td>
</tr>
</table>

Les mer