Dit is een gearchiveerde versie van www.webrichtlijnen.nl.

WCAG 2.0 - Succescriterium 1.3.1 Info en relaties

Principe 1: Waarneembaar - informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze

Richtlijn 1.3 Aanpasbaar: Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur

Bedoeling van Richtlijn 1.3

Het doel van deze richtlijn is om te garanderen dat alle informatie beschikbaar is in een vorm die door alle gebruikers kan worden waargenomen, bijvoorbeeld hardop uitgesproken of gepresenteerd in een vereenvoudigde visuele lay-out. Als alle informatie beschikbaar is in een vorm die door software kan worden bepaald, kan het op verschillende manieren aan gebruikers worden gepresenteerd (zichtbaar, hoorbaar, tastbaar, enzovoort). Als informatie op zo'n manier in een bepaalde presentatie is ingebed dat de hulptechnologie niet de structuur en de informatie door software kan bepalen, kan het niet worden weergegeven in andere formats die aansluiten bij de behoeften van de gebruiker.

Alle Succescriteria onder deze richtlijn trachten te garanderen dat verschillende soorten informatie die in de presentatie vaak zijn gecodeerd ook beschikbaar zijn, zodat ze in andere modaliteiten kunnen worden gepresenteerd.

Succescriterium 1.3.1 Info en relaties

1.3.1 Info en relaties: Informatie, structuur, en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst. (Niveau A)

Niveau van conformiteit

A

Bedoeling van dit Succescriterium

De bedoeling van dit Succescriterium is om te garanderen dat informatie en relaties die worden uitgevoerd door visuele of auditieve opmaak behouden blijven als de presentatie verandert. De presentatie verandert bijvoorbeeld wanneer de content wordt gelezen door een schermlezer of wanneer een user style sheet wordt vervangen door de stylesheet die wordt aangeboden door de auteur.

Gebruikers die kunnen zien, nemen structuur waar door middel van verscheidene visuele aanwijzingen - koppen staan vaak in een groter, vetgedrukt lettertype en worden van de alinea's gescheiden door witregels; onderdelen van een lijst worden voorafgegaan door een opsommingsteken en mogelijk door een tab; alinea's worden van elkaar gescheiden door een witregel; items die een bepaalde eigenschap gemeen hebben staan in een tabel; invoervelden kunnen worden gepositioneerd als groepen die tekstlabels gemeenschappelijk hebben; er kan een andere achtergrondkleur worden gebruikt om een relatie tussen verscheidene items aan te geven; woorden met een speciale status worden aangeduid met een ander lettertype en/of door ze vetgedrukt, cursief of onderstreept weer te geven, enzovoort.

Er kunnen ook auditieve aanwijzingen worden gebruikt. Het luiden van een klok kan bijvoorbeeld het begin van een nieuwe paragraaf aangeven; een verandering in stemhoogte of spreeksnelheid kan worden gebruikt om belangrijke informatie te benadrukken of een citaat aan te duiden, enzovoort.

Als één groep gebruikers zulke relaties kan waarnemen, kunnen die relaties waarneembaar worden gemaakt voor alle gebruikers. Een methode om te bepalen of informatie op juiste wijze aan alle gebruikers wordt aangeboden, is om serieel in verschillende modaliteiten toegang proberen te krijgen tot de informatie.

Als links naar items in een verklarende woordenlijst worden uitgevoerd met gebruik van anchor elementen (of het juiste link element voor de gehanteerde technologie) en worden geïdentificeerd door een ander lettertype, zal de gebruiker van een schermlezer horen dat het item een link is als de term uit de verklarende woordenlijst wordt voorgelezen, al zal hij/zij misschien geen informatie krijgen over de verandering van lettertype. Een internetcatalogus kan prijzen aangeven door middel van een rode tekstkleur in een groter font. Een schermlezer of een gebruiker die geen rood kan onderscheiden, heeft dan nog altijd de prijsinformatie, mits deze vooraf wordt gegaan door het symbool voor de munteenheid.

Sommige technologieën bieden geen mogelijkheden om bepaalde soorten informatie en relaties door software te bepalen. In dat geval zou er dan een tekstbeschrijving van de informatie en relaties moeten worden gegeven. Neem bijvoorbeeld de zin: "alle verplichte velden zijn gemarkeerd met een asterisk (*)". De tekstbeschrijving zou in de buurt moeten staan van de informatie die ze beschrijft (als de pagina lineair is ingedeeld), zoals in het parent element of in het adjacent element.

Er kunnen ook gevallen zijn waarin de vraag welke informatie in tekst moet worden weergegeven en wat er direct mee geassocieerd moet worden een kwestie van ervaring is, en het kopiëren van bepaalde informatie (bijvoorbeeld in een HTML tabel, waarbij de korte beschrijving zowel in de alinea voor de tabel wordt gegeven als in het summary attribuut van de tabel zelf) kan daarbij de meest geschikte optie zijn. Waar mogelijk is het echter essentieel dat de informatie door software wordt bepaald, en dat er geen tekstbeschrijving wordt aangeboden voordat de tabel wordt voorgelezen.

Opmerking: Het is geen vereiste dat kleurwaarden door software worden bepaald. De informatie die wordt overgedragen door kleur kan niet adequaat worden gepresenteerd door alleen de waarde ervan aan te geven. Daarom gaat Succescriterium 1.4.1 specifiek in op kleurgebruik in plaats van Succescriterium 1.3.1.

Specifieke voordelen van Succescriterium 1.3.1
  • Dit Succescriterium helpt mensen met verscheidene functiebeperkingen door user agents toe te staan content aan te passen aan de behoeften van de individuele gebruikers.

  • Gebruikers die blind zijn (een schermlezer gebruiken) hebben er baat bij als informatie die wordt weergegeven door middel van kleur ook beschikbaar is in tekstvorm (inclusief tekstalternatieven voor afbeeldingen die kleur gebruiken om informatie over te dragen).

  • Gebruikers die doofblind zijn en gebruikmaken van brailleleesregels zijn mogelijk niet in staat om toegang te krijgen tot kleurafhankelijke informatie.

Definities
structuur
  1. De wijze waarop onderdelen van een webpagina zijn gestructureerd ten opzichte van elkaar, en

  2. De wijze waarop een verzameling webpagina's is georganiseerd.

relaties

betekenisvolle verbanden tussen verschillende stukken content

presentatie

weergave van de content in een door gebruikers waar te nemen vorm

door software bepaald (door software bepaalbaar)

bepaald door software uit gegevens die door de auteur op zodanig wijze aangeboden worden dat verschillende user agents, met inbegrip van hulptechnologieën, deze informatie kunnen oproepen en in verschillende modaliteiten aan gebruikers kunnen presenteren

Voorbeeld 1: bepaald in een opmaaktaal uit elementen en attributen die direct gebruikt worden door algemeen beschikbare hulptechnologie.

Voorbeeld 2: bepaald uit technologiegebonden gegevensstructuren in een niet-opmaaktaal en aan hulptechnologie getoond via een toegankelijkheid-API die ondersteund wordt door algemeen beschikbare hulptechnologie.

Voldoen aan succescriterium 1.3.1 Info en relaties (niveau A)

Afdoende technieken: technieken of combinaties van technieken die volstaan

Elk genummerd item in deze sectie staat voor een techniek of combinatie van technieken die afdoende wordt beschouwd om aan dit succescriterium te voldoen. Met de genoemde technieken wordt pas aan het succescriterium voldaan indien ze in overeenstemming zijn met de conformiteitseisen.

Bron: How to meet WCAG 2.0, success criterion 1.3.1 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

Instructie: Kies hieronder de situatie die van toepassing is op de te beoordelen content. Elke situatie bevat genummerde technieken (of combinaties van technieken) die voor de desbetreffende situatie als afdoende wordt beschouwd.

Situatie A: De technologie biedt de semantische structuur om informatie en verbanden die door middel van presentatie worden overgebracht door software bepaalbaar te maken:
  1. G115: Gebruik van semantische elementen om structuur op te maken EN H49: Gebruik van semantische opmaak om benadrukte of speciale tekst te markeren (HTML)

  2. G117: Gebruik van tekst om informatie over te brengen die wordt overgebracht door middel van variaties in tekstpresentatie

  3. G140: Informatie en structuur scheiden van presentatie om verschillende presentaties mogelijk te maken

  4. Informatie en verbanden die door presentatie worden overgebracht door software bepaalbaar maken door middel van een van de volgende technieken:

    • ARIA11: ARIA landmarks gebruiken om secties van een pagina te identificeren (ARIA)

    • ARIA12: role=heading gebruiken om koppen te identificeren (ARIA)

    • ARIA13: aria-labelledby gebruiken om secties en landmarks te benoemen (ARIA)

    • ARIA16: aria-labelledby gebruiken om een naam aan te bieden voor een bedieningslement van de gebruikersinterface (ARIA)

    • ARIA17: Rollen groeperen ter identificatie van verwante bedieningselementen van formulieren (ARIA)

    • ARIA20: role="region" gebruiken om een gebied van de pagina (een region) te identificeren (ARIA)

    • G138: Gebruik van semantische opmaak zodra kleurverschillen informatie overdragen

    • H51: Gebruik van tabelopmaak om informatie in tabelvorm te presenteren (HTML)

    • PDF6: Table elementen gebruiken voor tabelopmaak in PDF-documenten (PDF)

    • PDF20: De tabeleditor van Adobe Acrobat Pro gebruiken om tabellen te repareren die onjuist zijn gestructureerd (PDF)

    • H39: Gebruik van caption elementen om bijschriften met gegevenstabellen te associëren (HTML)

    • FLASH31: Het onderschift voor een DataGrid specificeren (Flash)

    • H73: Gebruik van het summary attribuut van het table element om een overzicht van gegevenstabellen te geven (HTML)

    • FLASH23: Een samenvatting toevoegen aan een DataGrid (Flash)

    • H63: Gebruik van het scope attribuut om in gegevenstabellen kopcellen met gegevenscellen te associëren (HTML)

    • H43: Gebruik van id en headers attributen om in gegevenstabellen gegevenscellen te associëren met kopcellen (HTML)

    • FLASH21: De DataGrid component gebruiken om kolomkoppen te associëren met cellen (Flash)

    • H44: Gebruik van label elementen om tekstlabels te associëren met bedieningselementen voor formulieren (HTML)

    • H65: Gebruik van het title attribuut om bedieningselementen van formulieren te identificeren als het label element niet kan worden gebruikt (HTML)

    • PDF10: Labels aanbieden voor bedieningselementen van formulieren in PDF-documenten (PDF)

    • PDF12: Informatie over naam, rol en waarde aanbieden voor formuliervelden in PDF-documenten (PDF)

    • FLASH32: Automatisch labelen gebruiken om tekstlabels te associëren met bedieningselementen van formulieren (Flash)

    • FLASH29: De label eigenschap van formuliercomponenten instellen (Flash)

    • FLASH25: Een bedieningselement van een formulier van een label voorzien door de toegankelijke naam in te stellen (Flash)

    • H71: Een beschrijving aanbieden voor groepen bedieningselementen van formulieren door middel van fieldset en legend elementen (HTML)

    • SL20: Het gedrag van Silverlight AutomationPeer gebruiken om AutomationProperties.Name in te stellen (Silverlight)

    • SL26: LabeledBy gebruiken om labels en doelen in Silverlight te associëren (Silverlight)

    • H85: Gebruik van OPTGROUP om OPTION elementen binnen een SELECT te groeperen (HTML)

    • H48: Gebruik van ol, ul en dl voor lijsten of groepen links (HTML)

    • H42: Gebruik van h1-h6 om koppen te identificeren (HTML)

    • PDF9: Koppen aanbieden door content te markeren als kop in PDF-documenten (PDF)

    • SCR21: Gebruik van functies van het Document Object Model (DOM) om content aan een pagina toe te voegen (Scripting)

    • PDF11: Links en linktekst aanbieden met Link annotatie en het /Link structuurelement in PDF-documenten (PDF)

    • PDF17: Een consistente paginanummering gebruiken voor PDF-documenten (PDF)

    • PDF21: Tags voor opsommingslijsten gebruiken voor lijsten in PDF-documenten (PDF)

    • H97: Bij elkaar horende links groeperen met het nav element (HTML)

Situatie B: De gehanteerde technologie biedt NIET de semantische structuur om informatie en verbanden die door presentatie worden overgebracht door software bepaalbaar te maken:
  1. G117: Gebruik van tekst om informatie over te brengen die wordt overgebracht door middel van variaties in tekstpresentatie

  2. FLASH8: Een groepnaam toevoegen aan de toegankelijke naam van een bedieningselement van een formulier (Flash)

  3. Informatie en verbanden die door presentatie worden overgebracht door software bepaalbaar maken door middel van een van de volgende technieken:

    • T1: Gebruik van standaard tekstopmaakconventies voor alinea's (TXT)

    • T2: Gebruik van standaard tekstopmaakconventies voor lijsten (TXT)

    • T3: Gebruik van standaard tekstopmaakconventies voor koppen (TXT)

Aanbevolen technieken: technieken die verder gaan dan is vereist

De items in deze sectie gaan verder dan wat is vereist om aan het succescriterium te voldoen. Ze kunnen worden gebruikt om content optimaal toegankelijk te maken.
Gebruik van aanbevolen technieken heeft geen invloed op het niveau van conformiteit dat kan worden geclaimd.

Bron: How to meet WCAG 2.0, success criterion 1.3.1 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • C22: Gebruik van CSS om de visuele presentatie van tekst te regelen (CSS)

  • CSS gebruiken voor paginalay-out in plaats van tabellen (toekomstige link)

  • G162: Labels plaatsen om de voorspelbaarheid van relaties zo groot mogelijk te maken

  • ARIA1: Gebruik van de aria-describedby eigenschap om een beschrijvend label aan te bieden voor bedieningselementen van de gebruikersinterface (ARIA)

  • ARIA2: Identificatie van een verplicht veld met de eigenschap aria-required (ARIA)

  • Labels aanbieden voor alle bedieningselementen voor formulieren die geen impliciet label hebben (toekomstige link)

  • G141: Een webpagina organiseren met gebruik van koppen

Gangbare fouten: praktijksituaties die veroorzaken dat webcontent niet voldoet

Als een 'gangbare fout' uit deze sectie van toepassing is, dan wordt niet aan het succescriterium voldaan.

Bron: How to meet WCAG 2.0, success criterion 1.3.1 (Engelstalig)
Links in deze sectie verwijzen naar Engelstalige content.

  • F2: Voldoet niet aan Succescriterium 1.3.1 doordat veranderingen in de tekstpresentatie zijn gebruikt om informatie over te brengen zonder de juiste opmaak of tekst te gebruiken

  • F17: Voldoet niet aan Succescriteria 1.3.1 en 4.1.1 doordat DOM onvoldoende informatie bevat om een-op-eenrelaties vast te stellen (bijvoorbeeld tussen labels met hetzelfde id) in HTML

  • F33: Voldoet niet aan Succescriteria 1.3.1 en 1.3.2 doordat er blanco karakters zijn gebruikt om in tekstcontent meerdere kolommen te creëren

  • F34: Voldoet niet aan Succescriteria 1.3.1 en 1.3.2 doordat er blanco karakters zijn gebruikt om in tekstcontent tabellen in te delen

  • F42: Voldoet niet aan Succescriteria 1.3.1 en 2.1.1 doordat er event handlers aan elementen zijn toegevoegd om links na te bootsen op een manier die niet door software kan worden bepaald

  • F43: Voldoet niet aan Succescriterium 1.3.1 doordat structurele opmaak is gebruikt op een manier die geen relaties in de content weergeeft

  • F46: Voldoet niet aan Succescriterium 1.3.1 doordat th elementen, caption elementen of niet-lege summary attributen worden gebruikt in tabellen voor lay-out

  • F48: Voldoet niet aan Succescriteriumn 1.3.1 doordat het pre- element is gebruikt voor de opmaak van tabelinformatie

  • F62: Voldoet niet aan Succescriteria 1.3.1 en 4.1.1 doordat DOM onvoldoende informatie bevat om in XML specifieke relaties vast te stellen

  • F68: Voldoet niet aan Succescriteria 1.3.1 en 4.1.2 doordat de associatie van een label met bedieningselementen niet door software wordt bepaald

  • F87: Voldoet niet aan Succescriterium 1.3.1 door niet-decoratieve content in te voegen door middel van :before en :after pseudo-elementen en de 'content' eigenschap in CSS

  • F90: Voldoet niet aan Succescriterium 1.3.1 doordat tabelkoppen en content incorrect zijn geassocieerd met headers en id attributen

  • F91: Voldoet niet aan Succescriterium 1.3.1 doordat tabelkoppen incorrect zijn opgemaakt

  • F92: Voldoet niet aan Succescriterium 1.3.1 doordat role presentation wordt gebruikt voor content waarmee semantische informatie wordt overgebracht

Normatieve content op deze pagina

De volgende content op deze pagina heeft de status 'normatief' en is ongewijzigd overgenomen uit het normdocument Webrichtlijnen versie 2: