HTML-tabellen met JAWS

Een auteur van een webpagina kan tabellen op twee hoofdmanieren gebruiken op het internet. Een daarvan is voor de lay-out van de structuur op een webpagina om items te plaatsen waar de auteur ze wil hebben in relatie tot andere items op de pagina. Dit worden lay-outtabellen genoemd. Het andere type tabel wordt een datatabel genoemd. Datatabellen zijn het meest voorkomende type tabel.

JAWS kondigt aan wanneer je een tabel binnenkomt en verlaat. Een goed ontworpen HTML-tabel heeft een paar verschillende kenmerken. Een daarvan is een bijschrift, dat zichtbaar is voor een ziende gebruiker en ook wordt voorgelezen door JAWS. Het bijschrift lijkt meestal op een titel en verschijnt meestal boven de tabel. Een ander ontwerpelement is de tabelsamenvatting. De tabelsamenvatting is niet zichtbaar op het scherm voor ziende gebruikers. Webontwerpers kunnen samenvattingen toevoegen aan de HTML-code specifiek voor schermlezergebruikers. Een goede tabelsamenvatting biedt een betekenisvol overzicht van de tabel, zodat je een idee hebt van wat de tabel bevat voordat je er bent. Let vooral op de tabelsamenvattingen terwijl je deze pagina leest.

Tabels lezen

Je kunt de JAWS-navigatiesneltoets T gebruiken om snel tussen tabellen te bewegen. Op deze pagina heeft elke tabel ook een bijschrift dat een niveau twee kop is. Je kunt ook tussen de koppen bewegen door de JAWS-navigatiesneltoets H voor koppen in te drukken. Als je alle tabellen op de pagina wilt weergeven, druk dan op INSERT+CTRL+T. Je kunt vervolgens een tabel selecteren en op ENTER drukken om ernaartoe te gaan.

Zodra je een tabel binnenkomt, kun je tabelleesopdrachten gebruiken om door de informatie te navigeren en deze te lezen.

Tabel-laag sneltoetsen

Tabel-laag sneltoetsen bieden een snelle en handige manier om door tabellen te navigeren. De tabel-laag elimineert de noodzaak om meerdere toetsen tegelijk ingedrukt te houden om een tabelnavigatieopdracht uit te voeren.

Hieronder staat een lijst met de gelaagde sneltoetsen voor tabelnavigatie. Druk op INSERT+SPATIEBALK, gevolgd door T om naar de tabel-laag te gaan. Druk vervolgens op een van de volgende toetsen.

De Tabel-laag blijft actief totdat je een toets indrukt die geen tabelopdracht uitvoert, zoals ESC, SPATIEBALK, TAB, of ENTER.

De standaardgedrag voor JAWS is om alleen koppen voor te lezen die door de auteur van een tabel correct zijn gemarkeerd als koppen.

In veel tabellen bevat de eerste rij, van links naar rechts, koppen voor de informatie in de onderliggende kolommen. Ook bevatten veel tabellen de eerste kolom, van boven naar beneden, koppen voor de informatie in de rechts liggende rijen. Als een tabel niet correct is gecodeerd, kan JAWS worden ingesteld om de informatie in de eerste rij en de eerste kolom als koppen te behandelen. De instellingen voor JAWS zijn als volgt:

Als een tabel correct is gemarkeerd met kolom- en rijheaders, hoor je bij het naar links en rechts bewegen in een tabel het item in elke kolom bovenaan de kolom en vervolgens de inhoud van de huidige cel. Bij het omhoog en omlaag bewegen in een tabel hoor je het item aan het begin van elke rij en vervolgens de inhoud van de huidige cel.

JAWS kijkt naar de HTML-code om te zien of de auteur van een HTML-tabel de tabelcel heeft gecodeerd met een <TH>-element, of tabelkop. Bovendien zoekt JAWS naar het scope-attribuut, dat ook door documentauteurs kan worden gebruikt om kopinformatie in tabellen te verstrekken. Als een tabel niet specifiek is gecodeerd met de juiste kolom- en rijheaders, kan JAWS worden aangepast om de tabel als zodanig te behandelen.

In de eerste twee tabellen hieronder vind je voorbeelden van kolom- en rijheaders die zijn gemarkeerd als headers. De eerste tabel heeft correct gecodeerde <TH>-tabelkop-tags voor zowel de eerste rij als de eerste kolom. De tweede tabel heeft echter alleen correct gecodeerde <TH>-tabelkop-tags voor de eerste rij. Er zijn geen rijheaders in het tweede voorbeeld van de tabel. Omdat deze eerste twee tabellen echter correct zijn gemarkeerd, leest JAWS de kopinformatie prima.

In deze eerste tabel heeft de auteur tabelheaders gebruikt voor zowel de eerste rij als de eerste kolom van de tabel. Dus, wanneer je JAWS-leesopdrachten gebruikt om de huidige cel te lezen, hoor je de volgende informatie:

OPMERKING: Als je niet in de tabel-laagmodus bent, druk en laat dan INSERT+SPATIEBALK los, en druk vervolgens op T. Druk vervolgens op NUMMERTOETSENBLOK 5 om de huidige cel te lezen.

TV-lijsten met zowel kolom- als rijheaders
20:00 20:30 21:00 21:30 22:00 22:30
ABC Grey's Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Lokale programmering
NBC The Biggest Loser Bad Judge A to Z Parenthood


In de tweede tabel heeft de auteur alleen tabelheaders gebruikt voor de eerste rij. De namen van de zendernetwerken ontbreken in de eerste kolom. In dit geval, wanneer je JAWS-leesopdrachten gebruikt om de huidige cel te lezen, hoor je de volgende informatie:

TV-lijsten met alleen kolomheaders
20:00 20:30 21:00 21:30 22:00 22:30
Grey's Anatomy Scandal How to Get Away with Murder
The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
Bones American Idol Fox 5 News at 10
The Biggest Loser Bad Judge A to Z Parenthood


De derde tabel is hetzelfde als de eerste tabel, behalve dat de auteur GEEN tabelheaders heeft gebruikt om de HTML te markeren. In dit geval kun je JAWS aanpassen om ze voor te lezen.



TV-lijsten met kolom- en rijheaders die niet correct zijn gemarkeerd
20:00 20:30 21:00 21:30 22:00 22:30
ABC Grey's Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Local Programming
NBC The Biggest Loser Bad Judge A to Z Parenthood


OEFENING: Volg de onderstaande stappen om JAWS te vertellen beide kolom- en rijheaders voor de bovenstaande tabel die geen juiste markering heeft, voor te lezen:

  1. Druk op INSERT+V om het JAWS Quick Settings-dialoogvenster te openen terwijl de Tables-pagina nog steeds op de voorgrond staat. Het Quick Settings-dialoogvenster wordt geopend met de focus in het zoekbewerkingsvak.
  2. Type table titles in het bewerkingsvak. Het boomoverzicht hieronder filtert alle items die niet gerelateerd zijn aan tabeltitels.
  3. Druk op PIJL OMLAAG om naar het item Table Titles in het boomoverzicht te gaan. Je zou JAWS "Only Marked Headers" moeten horen aankondigen.
  4. Druk op SPATIEBALK om dit te wijzigen naar Table Titles - Both Row and Column
  5. Druk op TAB om naar de OK-knop te gaan en activeer deze met de SPATIEBALK. Het Quick Settings-dialoogvenster sluit.
  6. Navigeer naar de bovenstaande tabel en probeer het opnieuw te lezen. Je kunt SHIFT+T indrukken om naar de vorige tabel te gaan. Maakt het deze keer meer zin?
  7. Zet de Quick Settings terug naar Table Titles Announce - Only Marked Headers wanneer je klaar bent.

De vierde tabel heeft alleen de tijden bovenaan vermeld. De netwerknamen die in de eerste kolom stonden, zijn verwijderd. Opnieuw heeft de auteur GEEN tabelheaders gebruikt om de HTML te markeren. Wanneer je de huidige cel leest, hoor je alleen de volgende informatie:

Omdat de tabel niet correct is gemarkeerd, leest JAWS de koppen van de kolommen niet voor.



TV-lijsten met alleen kolomheaders die niet correct zijn gemarkeerd
20:00 20:30 21:00 21:30 22:00 22:30
Grey's Anatomy Scandal How to Get Away with Murder
The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
Bones Gracepoint Local Programming
The Biggest Loser Bad Judge A to Z Parenthood


Wanneer je dit type tabel tegenkomt, kun je aanpassen hoe JAWS kolom- en rijheaders leest. In dit geval weet je dat de informatie in rij één, bovenaan elke kolom, koptekstinformatie is, ook al is het niet correct gemarkeerd. Je weet ook dat je de eerste kolom NIET als rijheaders behandeld wilt hebben.

OEFENING: Volg de onderstaande stappen om JAWS te vertellen alleen kolomheaders te lezen voor de bovenstaande tabel die geen juiste markering heeft:

  1. Druk op INSERT+V om het JAWS Quick Settings-dialoogvenster te openen terwijl de Tables-pagina nog steeds op de voorgrond staat. Het Quick Settings-dialoogvenster wordt geopend met de focus in het zoekbewerkingsvak.
  2. Type table titles in het bewerkingsvak. Het boomoverzicht hieronder filtert alle items die niet gerelateerd zijn aan tabeltitels.
  3. Druk op PIJL OMLAAG om naar het item Table Titles in het boomoverzicht te gaan. Je zou JAWS "Only Marked Headers" moeten horen aankondigen.
  4. Druk op SPATIEBALK om dit te wijzigen naar Table Titles - Columns
  5. Druk op TAB om naar de OK-knop te gaan en activeer deze met de SPATIEBALK. Het Quick Settings-dialoogvenster sluit.
  6. Navigeer naar de bovenstaande tabel en probeer het opnieuw te lezen. Je kunt SHIFT+T indrukken om naar de vorige tabel te gaan. Maakt het deze keer meer zin?
  7. Zet de JAWS Quick Settings-optie terug naar Table Titles Announce - Only Marked Headers wanneer je klaar bent.

Document Presentatie Modus

Er zijn twee verschillende document presentatie modi die je kunt gebruiken bij het lezen van tabellen met JAWS: Eenvoudige Lay-out en Scherm Lay-out. Met Eenvoudige Lay-out wordt elke cel van de tabel weergegeven op een aparte regel in de virtuele buffer. Scherm Lay-out modus stelt je in staat tabellen per rij te lezen, zoals ze op het scherm worden gepresenteerd. Met Scherm Lay-out wordt elke rij van de tabel weergegeven op een aparte regel en elke cel wordt gescheiden door een verticale balk. Hierdoor krijg je een veel beter idee van hoe de tabel is gestructureerd en hoe verschillende cellen in een rij met elkaar verband houden.

Scherm Lay-out modus is ook handig wanneer je een hele tabelrij wilt kopiëren en plakken in een ander document als een enkele regel. De standaard document presentatie modus voor JAWS is Eenvoudige Lay-out.

Om Scherm Lay-out modus in te schakelen voor de huidige webbrowser, doe het volgende:

  1. In je browser, druk op INSERT+V. Het Quick Settings-dialoogvenster opent met de focus in het zoekbewerkingsvak.
  2. Type document presentation in het zoekbewerkingsvak. Het boomoverzicht hieronder filtert alles wat niet met document presentatie te maken heeft.
  3. Druk op PIJL OMLAAG totdat de focus naar Document Presentation Mode verplaatst.
  4. Druk op de SPATIEBALK om Scherm Lay-out te kiezen.
  5. Druk op TAB om naar de OK-knop te gaan en druk vervolgens op SPATIEBALK om deze te activeren.

LET OP: Standaard worden de snelinstellingen voor JAWS opgeslagen op de harde schijf van je computer en blijven ze op deze manier ingesteld totdat je ze weer terugzet of naar een andere instelling verandert.

Wanneer je oefent met het lezen van tabellen met JAWS in het volgende gedeelte, experimenteer dan met de modus Scherm Lay-out en de modus Eenvoudige Lay-out om te zien welke je het beste bevalt.

Schakel Scherm Lay-out modus permanent in voor alle HTML- en PDF-tabellen

Als je bepaalt dat de modus Scherm Lay-out beter aan je behoeften voldoet, kun je het volgende doen om deze functie permanent in te schakelen voor HTML- en PDF-tabellen.

  1. Druk in je browser op INSERT+F2.
  2. Selecteer Settings Center en druk op ENTER.
  3. Druk op CTRL+SHIFT+D om over te schakelen naar de standaardinstelling voor alle bestanden. Je kunt de titelbalk van Settings Center lezen om dit te verifiëren door op INSERT+T te drukken.
  4. De focus bevindt zich in het zoekvak. Typ "select layout" zonder de aanhalingstekens.
  5. Druk op PIJL OMLAAG om naar Select Layout te gaan in de gefilterde resultaten van de boomstructuur in Settings Center.
  6. Druk op SPATIEBALK om van Simple Layout naar Screen Layout te schakelen.
  7. Druk op TAB om naar de OK-knop te gaan en activeer deze met de SPATIEBALK. De wijzigingen worden toegepast en opgeslagen. Settings Center wordt gesloten.

Oefenen met Meer Tabellen

De volgende tabel op deze pagina bespreekt lucht- en watertemperaturen voor het Tampa Bay-gebied. Het Tampa Bay-gebied geniet van gemiddeld 361 dagen zon per jaar. Het Guinness Book of World Records schrijft Saint Petersburg de langste reeks opeenvolgende zonnige dagen toe: 768. Al die zon maakt het gemakkelijk om te genieten van de stranden in het gebied, waaronder twee van de top tien beoordeelde stranden in het land.


Gemiddelde Temperaturen voor Saint Petersburg
Maand Hoge Luchttemperatuur Lage Luchttemperatuur Watertemperatuur Golf
Januari 70 graden 50 graden 64 graden
Februari 71 graden 51 graden 65 graden
Maart 77 graden 58 graden 69 graden
April 81 graden 61 graden 73 graden
Mei 88 graden 67 graden 79 graden
Juni 89 graden 71 graden 82 graden
Juli 90 graden 75 graden 84 graden
Augustus 90 graden 75 graden 86 graden
September 89 graden 73 graden 82 graden
Oktober 82 graden 65 graden 78 graden
November 78 graden 56 graden 71 graden
December 72 graden 50 graden 64 graden

De informatie hierboven is afkomstig van de website van de Kamer van Koophandel in Saint Petersburg.

OEFENING: Probeer de vorige tabel opnieuw te lezen met behulp van de modus Schermindeling in plaats van de modus Eenvoudige Indeling. Als je een herinnering nodig hebt over hoe je documentpresentatiemodi kunt wisselen, zie de stappen om over te schakelen naar de modus Schermindeling. Wanneer je klaar bent, schakel JAWS terug naar de modus Eenvoudige Indeling.

Surf's Up maakt ook gebruik van cascading style sheets (CSS) voor opmaakdoeleinden. Het gebruik van CSS is een best practice-techniek voor webdesigners en is de beste manier om opmaak te realiseren. Een van de opmaaktechnieken die in Surf's Up wordt gebruikt, is het kleuren van cellen die zijn geclassificeerd als tabelkop-elementen met een citroengele achtergrond, die donkerder is dan de ivoren achtergrond van de andere tabelcellen.

De onderstaande tabel is een voorbeeld van een tabel die de ID-, AXIS- en HEADERS-attributen gebruikt om JAWS verschillende informatie te laten spreken bij het navigeren door verschillende delen van de tabel. Bijvoorbeeld, bij het omhoog en omlaag bewegen van de kolom met de naam van de werknemer, hoor je de afdelingsnaam als de rijkop. Echter, bij het omhoog en omlaag bewegen van de kolom met de telefoonextensie, hoor je de naam van de werknemer als de rijkop. De werknemersnaam staat eigenlijk in kolom twee, maar de HTML-code vertelt JAWS om het in dit geval als de rijkop te behandelen, in plaats van de tekst in kolom één. In dit geval leest JAWS correct zonder dat je instellingen voor JAWS hoeft te wijzigen, omdat de auteur van de tabel de tijd heeft genomen om goede praktijken te gebruiken bij het coderen van de HTML van de tabel. Elke willekeurige cel kan met behulp van deze techniek naar een andere cel (of cellen) elders in de tabel verwijzen als kop.

Werknemerextensies en Afdelingen
Afdelingsnaam Werknemersnaam Telefoonextensie
Verzending John Smith 543
Ontvangst Lee Johnson 123
Boekhouding Sharon Jones 222

De volgende tabel is veel complexer, maar let op hoe JAWS deze leest. Bij het omhoog en omlaag bewegen van kolom twee, waar de naam van het bedrijf staat, wordt de rijkopinformatie verzameld uit kolom één, de regio. Bij het omhoog of omlaag bewegen vanaf elke kolom van drie tot en met acht, wordt de rijkopinformatie verzameld uit kolom twee, de naam van het bedrijf. Je hoort ook het "axis"-attribuut uitgesproken met de woorden "Regio" en "Waar."

Verkoopcontacten per Staat
  Bedrijf Adres Stad Staat Telefoonnummer Fax Producten
Westen Schermlezers Onbeperkt 52 Third Ave. Los Angeles CA 555-555-1234 949-555-0101 Schermlezers
Toegang Nu 115 Webb Street Seattle WA 206-555-7777 206-555-7778 Software; Braille-displays; Embossers; Notitietakers
Webb Access Group 100 Main Street Phoenix AZ 602-555-3131 602-555-3132 Software; Advies over webtoegankelijkheid
Toegankelijke Wereld 5 N. 7th Street San Francisco CA 1-800-555-2190   Software; Braille-displays; Embossers; Notitietakers
Midwesten Speciale Computers, Inc. 121 4th Street, Suite I Chicago IL 800-555-1478 708-555-2221 Software; Braille-displays; Embossers; Notitietakers
IndyPendence Day Computing 2110 Freedom Dr. Indianapolis IN 1-800-555-1332 317-555-6261 Software; Braille-displays; Embossers; Notitietakers
Touch the World, Inc. 82 S. Broadway Cincinnati OH 1-800-555-3691 513-555-2221 Software; Braille-displays; Embossers; Notitietakers

In de volgende tabel beslaat de eerste rij eigenlijk de volledige breedte van de tabel, over alle vijf kolommen. JAWS gebruikt de COLSPAN- en SCOPE-attributen om te bepalen hoe het de informatie in de tabel moet lezen. Probeer deze tabel nu te lezen.

Verkooprapport
Producten In De Aanbieding
  Eerste Week Tweede Week Derde Week Vierde Week
Januari Appels Peren Sinaasappels Druiven
Februari Mango's Mandarijnen Aardbeien Kiwi's
Maart Kersen Limoenen Citroenen Meloenen