Toegankelijke content maken (WCAG 2.0-compatibiliteit)

WCAG 2.0 bestaat uit een reeks technologieonafhankelijke richtlijnen en succescriteria om ervoor te zorgen dat webcontent toegankelijk en bruikbaar is voor personen met een handicap.

Deze worden ingedeeld op basis van drie compatibiliteitsniveaus: Niveau A (laagste), Niveau AA en Niveau AAA (hoogste). De niveaus worden kort samengevat als volgt gedefinieerd:

• Niveau A: Uw site bereikt een minimaal basistoegankelijkheidsniveau. Om aan dit niveau te voldoen moet aan alle slagingscriteria voor Niveau A worden voldaan.
• Niveau AA: Dit is een ideaal toegankelijkheidsniveau waarnaar u wilt streven, waarbij uw site een verbeterd toegankelijkheidsniveau bereikt, zodat deze voor de meeste mensen in de meeste situaties en met de meeste technologieën toegankelijk is. Om aan dit niveau te voldoen moet aan alle slagingscriteria voor Niveau A en Niveau AA worden voldaan.
• Niveau AAA: Uw site bereikt een zeer hoog toegankelijkheidsniveau. Om aan dit niveau te voldoen moet aan alle slagingscriteria voor Niveau A, Niveau AA en Niveau AAA worden voldaan.

Wanneer u uw site maakt, moet u het algemene niveau bepalen waaraan u uw site wilt laten voldoen.

In de volgende sectie worden de WCAG 2.0 Guidelines met gerelateerde succescriteria voor Niveau A en Niveau AA conformiteitsniveaus gepresenteerd.

Beginsel 1: Mogelijk

Beginsel 1: Mogelijkheid - De informatie en gebruikersinterfacecomponenten moeten aan gebruikers op manieren presenteerbaar zijn zij kunnen waarnemen.

Alternatieven voor tekst (1.1)

Richtsnoer 1.1 Tekstalternatieven: Maak tekstalternatieven voor alle niet-tekstuele inhoud, zodat deze kan worden gewijzigd in andere formulieren die u nodig hebt, zoals grote gedrukte tekst, braille, spraak, symbolen of eenvoudigere taal.

Niet-tekstuele inhoud (1.1.1)

• Succescriterium 1.1.1
• Niveau A
• Niet-tekstuele inhoud: Alle niet-tekstuele inhoud die aan de gebruiker wordt aangeboden, heeft een tekstalternatief dat het gelijkwaardige doel dient, behalve in de situaties hieronder.

Doel - Niet-tekstuele inhoud (1.1.1)

De informatie op een webpagina kan in vele verschillende niet-tekstformaten, zoals beelden, video's, animaties, grafieken worden verstrekt. Personen die blind zijn of een ernstige visuele handicap hebben, kunnen geen niet-tekstuele inhoud zien, maar hebben wel toegang tot tekstinhoud door deze door een schermlezer te laten lezen of in tactiele vorm te laten weergeven door een brailleweergaveapparaat. Dus door tekstalternatieven voor inhoud in grafische indeling te bieden, kunnen mensen die de grafische inhoud niet kunnen zien, toegang krijgen tot een equivalente versie van de informatie die de inhoud biedt.

Een nuttig extra voordeel is dat tekstopties het mogelijk maken dat niet-tekstuele inhoud wordt geïndexeerd door zoekmachinetechnologie.

Hoe kan ik-niet-tekstuele inhoud (1.1.1)

Voor statische afbeeldingen is het basisvereiste dat een equivalent tekstalternatief voor de afbeelding wordt geboden. Dit kan in het gebied van de Tekst van Alt worden gedaan:

Het veld Alt Text is beschikbaar op het tabblad Afbeeldingseigenschappen Geavanceerd van het dialoogvenster Afbeelding:

AEM voegt standaard een Alt-tekst aan uw afbeeldingen toe. Voor de klassieke UI zijn er twee verschillende scenario's voor hoe het standaardattribuut wordt gecreeerd (hoewel de standaardwaarde als alternatief kan niet voldoende zijn en hoogstwaarschijnlijk zal moeten worden uitgegeven op het Geavanceerde beeldeigenschappen tabel):

• Bestand:

  Een afbeelding wordt geüpload vanaf de vaste schijf van de gebruiker. Als u een afbeeldingscomponent aan een pagina toevoegt en vervolgens een afbeelding op de vaste schijf of een andere bron kiest, is de standaardwaarde voor Alt Text file. Dit moet worden gewijzigd op het tabblad Geavanceerde afbeeldingseigenschappen. Nogmaals, deze waarde wordt niet weergegeven in het veld Alt Text, maar wanneer de waarde wordt gewijzigd, wordt de nieuwe waarde weergegeven in het veld.

• Element:

  Er wordt een afbeelding toegevoegd vanuit de gegevensopslagruimte voor digitale middelen. Als u een afbeelding van de gegevensopslagruimte voor digitale elementen naar een webpagina sleept, worden de waarden Title en Alt Text voor die afbeelding ontleend aan de metagegevens voor die afbeelding.

Alternatieven voor goede tekst maken

Er zijn verschillende vormen van niet-tekstuele inhoud, zodat de waarde van het tekstoptie afhankelijk is van de rol die de afbeelding in de webpagina speelt. De volgende algemene regels voor duim zijn van toepassing:

• Alternatieven voor tekst moeten beknopt zijn, maar toch duidelijk aangeven welke essentiële informatie door de niet-tekstuele inhoud wordt verstrekt.

• Te lange beschrijvingen (meer dan 100 tekens) moeten worden vermeden. Als een tekstalternatief meer details vereist:

  • een korte beschrijving geven in de alternatieve tekst
  • en hebben een langere beschrijving in tekst elders op dezelfde pagina of in een aparte webpagina. Koppel deze afzonderlijke beschrijving door van de afbeelding een koppeling te maken of door een tekstkoppeling naast de afbeelding te plaatsen.

• Alternatieve tekst mag geen inhoud repliceren die in tekstvorm dichtbij op dezelfde pagina wordt geleverd. Houd er rekening mee dat veel afbeeldingen illustraties zijn van punten die al in de tekst van een pagina zijn opgenomen, zodat er al een gedetailleerd tekstalternatief bestaat.

• Als de niet-tekstinhoud een koppeling naar een andere pagina of een ander document is en er geen andere tekst deel uitmaakt van dezelfde koppeling, moet de alternatieve tekst voor de afbeelding de bestemming van de koppeling aangeven en niet de afbeelding.

• Als de niet-tekstuele inhoud zich in een knopelement bevindt en er geen tekst bestaat die deel uitmaakt van dezelfde knop, moet de alternatieve tekst van de afbeelding de functionaliteit van de knop aangeven en de afbeelding niet beschrijven.

• Het is volkomen aanvaardbaar dat een afbeelding een lege (null) alternatieve tekst krijgt, maar alleen als de afbeelding geen alternatieve tekst heeft (bijvoorbeeld een zuiver decoratieve afbeelding) of als de equivalente tekst al in de paginatekst staat.

Het W3C-concept: De Technieken van HTML5 voor het verstrekken van nuttige tekstalternatieven heeft meer details en voorbeelden van aangewezen alternatieve tekstvoorziening voor beelden van verschillende types.

Specifieke typen niet-tekstuele inhoud waarvoor tekstopties nodig zijn, zijn onder meer:

• Illustratieve foto's:

  Dit zijn afbeeldingen van mensen, objecten of plaatsen. Denk na over de rol van de foto op de pagina. een geschikt tekstequivalent is waarschijnlijk Foto van [object], maar kan afhankelijk zijn van de omringende tekst.

• Pictogrammen:

  Dit zijn kleine pictogrammen (afbeeldingen) die specifieke informatie bevatten. Ze moeten consistent worden gebruikt op een pagina en site. Alle exemplaren van het pictogram op een pagina of site moeten hetzelfde korte en korte tekstalternatief hebben, tenzij dit leidt tot onnodige duplicatie van aangrenzende tekst.

• Grafieken en grafieken:

  Deze vertegenwoordigen meestal numerieke gegevens. U kunt dus een alternatief voor tekst bieden door een korte samenvatting op te nemen van de belangrijkste trends die in de grafiek of afbeelding worden weergegeven. Geef indien nodig ook een gedetailleerdere beschrijving in de tekst op met het veld Beschrijving op het tabblad Afbeeldingseigenschappen Geavanceerd. Bovendien kunt u de brongegevens elders op de pagina of site in tabelvorm opgeven.

  

  Als u een alternatief wilt bieden voor dit voorbeelddiagram, voegt u een beknopte alt-tekst toe aan de afbeelding zelf en volgt u de afbeelding met een volledig tekstalternatief.

  <p><img src="figure1.gif" alt="Figure 1" ></p>
  <p> Figure 1. Distribution of Articles by Journal Category.
  Pie chart: Language=68%, Education=14% and Science=18%.</p>
  

  OPMERKING

  Het bovenstaande fragment wordt alleen gebruikt om de volgorde te illustreren. Het wordt aanbevolen de Image-component te gebruiken (in plaats van de img src-verwijzing die hierboven is gebruikt.

  In AEM kan dit worden gedaan gebruikend een combinatie Alt Text en Description gebieden in de de configuratiedialoog van het beeld - zoals in hoe te om - niet-tekstuele Inhoud (1.1.1) te ontmoeten.

• Kaarten, diagrammen, stroomdiagrammen:

  Voor afbeeldingen die ruimtelijke gegevens leveren (bijvoorbeeld om beschrijvende relaties tussen objecten of een proces te ondersteunen), zorgt u ervoor dat het sleutelbericht in tekstopmaak wordt weergegeven. Voor kaarten is het opgeven van een volledige-tekstequivalent waarschijnlijk onpraktisch, maar als de kaart wordt verstrekt als manier om mensen te helpen hun weg naar een bepaalde plaats vinden, dan kan de alternatieve tekst van de afbeelding kort Kaart van X aangeven, en vervolgens elders op de pagina of via het veld Beschrijving op het tabblad Geavanceerd van de component Afbeelding een routebeschrijving naar die plaats in tekst opgeven.

• CAPTCHA's:

  Een CAPTCHA is een Complete Automated Public Turing test om computers en mensen apart te vertellen. Het is een veiligheidscontrole die op webpagina's wordt gebruikt om mensen van kwaadaardige software te onderscheiden, maar die toegankelijkheidsbarrières kan veroorzaken. Dit zijn afbeeldingen waarvoor gebruikers een beschrijving moeten geven van wat ze zien om een beveiligingstest te kunnen doorstaan. Het is duidelijk niet mogelijk om een tekstalternatief voor de afbeelding te bieden, dus in plaats daarvan moet u alternatieve niet-grafische oplossingen overwegen.

  De W3C biedt een aantal suggesties, zoals:Elk van deze benaderingen heeft zijn eigen verdiensten en nadelen.

  • Logische puzzels
  • Het gebruik van geluidsuitvoer in plaats van afbeeldingen
  • Beperkte gebruikaccounts en spamfilters.

• Achtergrondafbeeldingen:

  Deze worden bereikt met CSS (Cascading Style Sheets) in plaats van met HTML. Dit betekent dat het niet mogelijk is een alternatieve tekstwaarde op te geven. Achtergrondafbeeldingen mogen daarom geen belangrijke tekstuele informatie opleveren. Als dat wel het geval is, moet deze informatie ook in de paginatekst worden vermeld.

  Het is echter belangrijk dat een andere achtergrond wordt weergegeven wanneer de afbeelding niet kan worden weergegeven.

  OPMERKING

  Er moet een passend contrastniveau zijn tussen de achtergrond en de voorgrondtekst. dit wordt meer in detail besproken in Contrast (Minimum) (1.4.3).

Meer informatie - Niet-tekstuele inhoud (1.1.1)

• Werken met succescriteria 1.1.1
• Voldoen aan criteria 1.1.1
• W3C: HTML5-technieken voor het bieden van bruikbare tekstalternatieven (concept)
• W3C-uitleg van en alternatieven voor CAPTCHA's

Op tijd gebaseerde media (1.2)

Richtsnoer 1.2 Op tijd gebaseerde media: Alternatieven bieden voor tijdgebaseerde media.

Dit heeft betrekking op webinhoud die op tijd-gebaseerd is. Dit geldt voor inhoud die de gebruiker kan afspelen (zoals video, audio en bewegende inhoud) en die vooraf kan worden opgenomen of een live stream.

Alleen audio en alleen video (vooraf opgenomen) (1.2.1)

• Succescriterium 1.2.1

• Niveau A

• Alleen audio en alleen video (vooraf opgenomen): Voor vooraf opgenomen audio-slechts en vooraf opgenomen video-slechts media, zijn het volgende waar, behalve wanneer de audio of de video een media alternatief voor tekst is en duidelijk als dusdanig geëtiketteerd:

  • Alleen vooraf opgenomen audio: Er is een alternatief voor op tijd gebaseerde media beschikbaar met gelijkwaardige informatie voor vooraf opgenomen inhoud met alleen audio.
  • Alleen vooraf opgenomen video: Er is een alternatief voor op tijd gebaseerde media of een audiotrack beschikbaar met gelijkwaardige informatie voor vooraf opgenomen video-inhoud.

Doel - Alleen audio en alleen video (vooraf opgenomen) (1.2.1)

Toegankelijkheidsproblemen voor video en audio kunnen worden ondervonden door:

• Mensen met een visuele handicap zonder soundtrack of de soundtrack volstaat niet om hen te informeren over wat er in de video of animatie gebeurt;
• personen met een slechthorende werking of doof zijn, die de soundtrack niet kunnen horen;
• Mensen die de soundtrack kunnen horen, maar niet begrijpen wat er wordt gesproken (bijvoorbeeld omdat het in een taal staat die ze niet begrijpen).

Video of audio is mogelijk ook niet beschikbaar voor gebruikers die browsers gebruiken of apparaten die het afspelen van inhoud in specifieke media-indelingen, zoals Adobe Flash, niet ondersteunen.

Als u deze informatie in een andere indeling verstrekt, zoals tekst (of audio voor video zonder audio), kunt u deze toegankelijk maken voor mensen die geen toegang hebben tot de oorspronkelijke inhoud.

Hoe kan ik-alleen-audio en alleen-video (vooraf opgenomen) (1.2.1)

• Als de inhoud vooraf opgenomen audio zonder video is (zoals een podcast):

  • Geef een koppeling voor of na de inhoud op naar een teksttranscriptie van de audio-inhoud.

    De transcriptie moet een HTML-pagina zijn met een tekstequivalent van alle gesproken en belangrijke niet-gesproken inhoud, plus een indicatie van wie spreekt, een beschrijving van de instelling, spraakexpressies en een beschrijving van andere belangrijke audio.

• Als de inhoud een animatie of een vooraf opgenomen video zonder audio is:

  • Een koppeling verschaffen vlak voor of na de inhoud naar een equivalente tekstbeschrijving van de informatie die door de video wordt verschaft
  • Of een equivalente audiobeschrijving in een veelgebruikte audio-indeling, zoals MP3.

Het invoegen van multimedia, met name Flash-inhoud, in uw AEM webpagina's lijkt op het invoegen van een afbeelding. Aangezien multimedia-inhoud echter veel meer is dan een stilstaand beeld, zijn er verschillende instellingen en opties om te bepalen hoe de multimedia wordt afgespeeld.

Meer informatie - Alleen audio en alleen video (vooraf opgenomen) (1.2.1)

• Werken met succescriteria 1.2.1
• Voldoen aan criteria 1.2.1

Bijschriften (vooraf opgenomen) (1.2.2)

• Succescriterium 1.2.2
• Niveau A
• Bijschriften (vooraf opgenomen): Er zijn bijschriften beschikbaar voor alle vooraf opgenomen audio-inhoud in gesynchroniseerde media, behalve wanneer de media een media-alternatief voor tekst zijn en duidelijk als zodanig zijn gelabeld.

Doel - Bijschriften (vooraf opgenomen) (1.2.2)

Mensen die doof of moeilijk te horen zijn, hebben geen of grote moeite om toegang te krijgen tot audio-inhoud. Bijschriften zijn tekstequivalenten voor gesproken en niet-gesproken audio die op het juiste moment tijdens de video op het scherm worden weergegeven. Ze stellen mensen die de audio niet kunnen horen in staat te begrijpen wat er gebeurt.

Hoe kan ik-Bijschriften (vooraf opgenomen) (1.2.2)

Bijschriften kunnen:

• Openen: altijd zichtbaar wanneer de video wordt afgespeeld)
• Gesloten: de ondertitels kunnen door de gebruiker worden in- of uitgeschakeld

Gebruik waar mogelijk ondertiteling sluiten, omdat gebruikers dan de keuze hebben om ondertitels al dan niet weer te geven.

Voor gesloten bijschriften moet u een gesynchroniseerd bijschriftbestand maken en leveren in een geschikte indeling (zoals SMIL) naast het videobestand (details over hoe dit te doen vallen buiten het bereik van deze handleiding, maar we hebben koppelingen naar enkele zelfstudies verschaft onder Meer informatie - Bijschriften (vooraf opgenomen) (1.2.2)). Zorg ervoor dat u een notitie opgeeft om gebruikers te laten weten dat er ondertitels beschikbaar zijn voor de video.

Sluit de tekst in de videotrack in als u open bijschriften moet gebruiken. Dit kan worden bereikt met videobewerkingstoepassingen waarmee titels kunnen worden bedekt op de video.

Meer informatie - Bijschriften (vooraf opgenomen) (1.2.2)

• Werken met succescriteria 1.2.2:
• Voldoen aan criteria 1.2.2
• W3C: Gesynchroniseerde multimedia
• Bijschriften, transcripties en audiobeschrijvingen - door WebAIM

Audiobeschrijving of media-alternatief (vooraf opgenomen) (1.2.3)

• Succescriterium 1.2.3
• Niveau A
• Audiobeschrijving of Media-alternatief (vooraf opgenomen): Voor gesynchroniseerde media wordt een alternatief voor op tijd gebaseerde media of audiobeschrijving van de vooraf opgenomen video-inhoud geboden, behalve wanneer de media een media-alternatief voor tekst zijn en duidelijk als zodanig zijn gelabeld.

Doel - Audio-beschrijving of media-alternatief (vooraf opgenomen) (1.2.3)

Mensen die blind of visueel gehandicapt zijn, ondervinden toegankelijkheidsbarrières als de informatie in een video of animatie alleen visueel wordt verstrekt, of als de soundtrack niet voldoende informatie biedt om te begrijpen wat er visueel gebeurt.

Hoe kan ik-audio-beschrijving of media-alternatief (vooraf opgenomen) (1.2.3)

Er zijn twee manieren om aan dit succescriterium te voldoen. Beide zijn acceptabel:

1. Neem een aanvullende audiobeschrijving op voor de video-inhoud. Dit kan op drie manieren worden bereikt:

   • Geef tijdens pauzes in het bestaande dialoogvenster informatie over wijzigingen in de scène die niet worden weergegeven als onderdeel van de bestaande audiotrack.

   • Geef een nieuwe, aanvullende en optionele audiotrack met de oorspronkelijke soundtrack op, maar voeg ook extra audiogegevens over wijzigingen in de scène toe.

     • Hierdoor kunnen gebruikers schakelen tussen de bestaande audiotrack (die geen audiobeschrijving bevat) en de nieuwe audiotrack (die wel bevat).
     • Hiermee voorkomt u onderbrekingen voor gebruikers die de aanvullende beschrijving niet nodig hebben.

   • Maak een tweede versie van de video-inhoud voor uitgebreide audiobeschrijvingen. Dit vermindert de moeilijkheden verbonden aan het verstrekken van gedetailleerde audiobeschrijvingen binnen de hiaten tussen bestaande dialoog, door de audio en video op aangewezen punten tijdelijk te pauzeren. Hierdoor kan een veel langere audiobeschrijving worden gegeven voordat de handeling opnieuw wordt gestart. Zoals in het vorige voorbeeld, wordt dit het best verstrekt als facultatieve extra audiospoor om verstoring voor gebruikers te verhinderen die niet de extra beschrijving nodig hebben.

2. Verstrek een tekstranscriptie die een geschikt tekstequivalent van de audio en visuele elementen van de video of de animatie is. In voorkomend geval moet daarin worden vermeld wie het woord voert, een beschrijving van de instelling, mondelinge uitdrukkingen. Afhankelijk van de lengte kunt u de transcriptie op dezelfde pagina plaatsen als de video of animatie, of op een aparte pagina. Als u de laatste optie kiest, geeft u een koppeling op naar de transcriptie naast de video of animatie.

Exacte details over het maken van video met een audiobeschrijving vallen buiten het bereik van deze handleiding. Het maken van video's en audiobeschrijvingen kan tijdrovend zijn, maar andere Adobe-producten kunnen u helpen deze taken uit te voeren. Als u inhoud maakt in Adobe Flash Professional, moet u ook een script maken waarmee de gebruiker wordt gevraagd de juiste insteekmodule te downloaden en een alternatief voor tekst bieden via het element <noscript>.

Meer informatie - Audio-beschrijving of Media-alternatief (vooraf opgenomen) (1.2.3)

• Werken met succescriteria 1.2.3:
• Voldoen aan criteria 1.2.3
• Adobe Encore CS5

Bijschriften (live) (1.2.4)

• Succescriterium 1.2.4
• Niveau AA
• Bijschriften (live): Bijschriften worden geleverd voor alle live audio-inhoud in gesynchroniseerde media.

Doel - Bijschriften (live) (1.2.4)

Dit succescriterium is identiek aan Bijschriften (vooraf opgenomen) in die zin dat het toegankelijkheidsbarrières aanpakt die mensen die doof of slechthorend zijn ervaren, behalve dat dit succescriterium live presentaties zoals webcasts behandelt.

Hoe kan ik-Bijschriften (live) (1.2.4)

Volg de richtlijnen voor Bijschriften (vooraf opgenomen) hierboven. Gezien de levende aard van de media moet er echter zo snel mogelijk een bijschriftvoorziening worden gecreëerd, als reactie op wat er gebeurt. Daarom zou u het gebruiken van ondertiteling in real time of toespraak-aan-tekst hulpmiddelen moeten overwegen.

Gedetailleerde instructies vallen buiten het bereik van dit document, maar de volgende bronnen bieden nuttige informatie:

• WebAIM: Real Time Captioning
• AccessIT (University of Washington): Kunnen de titels automatisch worden geproduceerd gebruikend toespraakerkenning?

Meer informatie - Bijschriften (live) (1.2.4)

• Werken met succescriteria 1.2.4
• Voldoen aan criteria 1.2.4

Audiobeschrijving (vooraf opgenomen) (1.2.5)

• Succescriterium 1.2.5
• Niveau AA
• Audiobeschrijving (vooraf opgenomen): Audiobeschrijving is beschikbaar voor alle vooraf opgenomen video-inhoud in gesynchroniseerde media.

Doel - Audiobeschrijving (vooraf opgenomen) (1.2.5)

Dit succescriterium is identiek aan Audio-beschrijving of Media-alternatief (vooraf opgenomen), behalve dat auteurs een veel gedetailleerdere audiobeschrijving moeten geven om te voldoen aan Niveau AA.

Hoe kan ik-audiobeschrijving (vooraf opgenomen) (1.2.5)

Volg de richtlijnen voor Audio-beschrijving of Media-alternatief (vooraf opgenomen).

Meer informatie - Audiobeschrijving (vooraf opgenomen) (1.2.5)

• Werken met succescriteria 1.2.5
• Voldoen aan criteria 1.2.5

Aanpasbaar (1.3)

Richtsnoer 1.3 Aanpasbaar: Maak inhoud die op verschillende manieren kan worden weergegeven (bijvoorbeeld een eenvoudigere indeling) zonder verlies van informatie of structuur.

Dit richtsnoer heeft betrekking op de vereisten die nodig zijn ter ondersteuning van personen die:

• heeft mogelijk geen toegang tot de informatie die door de auteur wordt gepresenteerd in een *standard *tweedimensionale, gekleurde webpaginalay-out met meerdere kolommen

• U kunt kiezen voor alleen-audio of een andere visuele weergave, zoals grote tekst of een hoog contrast.

Informatie en relaties (1.3.1)

• Succescriterium 1.3.1
• Niveau A
• Informatie en relaties: De informatie, de structuur, en de verhoudingen die door presentatie worden overgebracht kunnen programmatically worden bepaald of zijn beschikbaar in tekst.

Doel - Informatie en relaties (1.3.1)

Veel ondersteunende technologieën die door mensen met een handicap worden gebruikt, zijn afhankelijk van structurele informatie om inhoud effectief weer te geven of uit te voeren. Deze structuurinformatie kan de vorm aannemen van paginakoppen, tabelrijen, kolomkoppen en lijsttypen. Een schermlezer kan een gebruiker bijvoorbeeld in staat stellen van kop naar kop door een pagina te navigeren. Wanneer pagina-inhoud echter alleen structuur lijkt te hebben via visuele opmaak in plaats van de onderliggende HTML, is er geen structurele informatie beschikbaar voor ondersteunende hulpmiddelen, waardoor deze minder geschikt zijn om eenvoudiger te kunnen bladeren.

Dit succescriterium bestaat om ervoor te zorgen dat dergelijke structurele informatie wordt verstrekt door HTML, zodat browsers en ondersteunende technologieën toegang hebben tot en gebruik kunnen maken van de informatie.

Hoe kan ik-info en relaties (1.3.1)

AEM maakt het eenvoudig om webpagina's samen te stellen met behulp van de juiste HTML-elementen. Open de pagina-inhoud in de RTE (een tekstcomponent) en gebruik het menu Indeling om het juiste structuurelement op te geven (bijvoorbeeld alinea, kop, enz.).

In de volgende afbeelding ziet u tekst die is opgemaakt als alineatekst. uit de broncodeweergave die wordt gebruikt, blijkt dat deze de juiste openings- en sluitingstags <p> en </p> heeft.

U kunt ervoor zorgen dat uw webpagina's de juiste structuur hebben door:

• Koppen gebruiken:

  Zolang u de toegankelijkheidseigenschappen van toegelaten RTE hebt (zie AEM en Toegankelijkheid), AEM biedt 3 niveaus van paginakop aan. U kunt deze gebruiken om secties en subsecties van content te identificeren. Kop 1 is het hoogste niveau van koptekst, kop 3 het laagste. De systeembeheerder kan het systeem configureren om het gebruik van meer kopniveaus toe te staan.

  In de volgende afbeelding ziet u een voorbeeld van de verschillende typen koppen.

  

• Gemarkeerde tekst:

  Gebruik het element <strong> of <em> om de nadruk aan te geven. Gebruik geen koppen om tekst in alinea's te markeren.

  • Markeer de tekst die u wilt benadrukken.
  • Klik op het B-pictogram (voor <strong>) of het I-pictogram (voor <em>) dat wordt weergegeven in het deelvenster Eigenschappen (zorg dat HTML is geselecteerd).
  OPMERKING

  RTE in een standaard AEM installatie is opstelling aan gebruik:

  • <b> for</b>
  • <i> for</i>

  Ze zijn in feite hetzelfde, maar <strong> en <em> hebben de voorkeur omdat ze semantisch correct html zijn. Uw ontwikkelingsteam kan RTE vormen om <strong> en <em> (in plaats van <b> en <i>) te gebruiken wanneer het ontwikkelen van uw projectinstantie.

• Lijsten gebruiken: Met HTML kunt u drie verschillende typen lijsten opgeven:

  • Het <ul> element wordt gebruikt voor ongeordende lijsten (bulleted) lijsten. Afzonderlijke lijstitems worden geïdentificeerd met behulp van het element <li>.

    in RTE, gebruik Bulleted List pictogram.

  • Het <ol> element wordt gebruikt voor genummerde lijsten. Afzonderlijke lijstitems worden geïdentificeerd met behulp van het element <li>.

    In RTE, gebruik Genummerde Lijst pictogram.
    Als u bestaande inhoud wilt wijzigen in een specifiek lijsttype, markeert u de desbetreffende tekst en selecteert u het gewenste lijsttype. Zoals in het vorige voorbeeld wordt getoond hoe alineatekst wordt ingegaan, worden de aangewezen lijstelementen automatisch toegevoegd aan uw HTML, maar u kunt dit in bron bekijken uitgeeft mening.

  OPMERKING

  <dl> wordt niet gesteund door RTE.

• Tabellen gebruiken:

  Gegevenstabellen moeten worden geïdentificeerd met behulp van HTML-tabelelementen:

  • één <table>-element
  • a <tr> element voor elke rij van de lijst
  • a <th> element voor elke rij en kolomkop
  • a <td> element voor elke gegevenscel
  OPMERKING

  Tabellen moeten worden uitgevoerd met de component Table. Hoewel tabellen kunnen worden gemaakt in de component Text, wordt dit niet aanbevolen.

  Daarnaast maken toegankelijke tabellen gebruik van de volgende elementen en kenmerken:

  • Het element <caption> wordt gebruikt om een zichtbaar bijschrift voor de tabel te verstrekken. Bijschriften worden standaard gecentreerd boven de tabel weergegeven, maar kunnen op de juiste wijze worden geplaatst met CSS. Het bijschrift is via programmacode gekoppeld aan de tabel en is daarom een handige methode om inhoud te introduceren.
  • Het element <h3 class="summary"> helpt niet-waargenomen gebruikers om de informatie gemakkelijker te begrijpen die binnen een lijst wordt voorgesteld, door een synopsis van te verstrekken wat een waargenomen gebruiker kan zien. Dit is met name handig wanneer complexe of onconventionele tabellay-outs worden gebruikt (dit kenmerk wordt niet weergegeven in de browser, het wordt alleen voorgelezen naar ondersteunende hulpmiddelen).
  • Het scope attribuut van het <th> element wordt gebruikt om erop te wijzen of een cel een kopbal voor een bepaalde rij, of voor een bepaalde kolom vertegenwoordigt. Een vergelijkbare aanpak is het gebruik van de kenmerken header en id in complexe tabellen, waarbij gegevenscellen aan een of meer kopteksten kunnen worden gekoppeld.
  OPMERKING

  Deze elementen en kenmerken zijn standaard niet rechtstreeks beschikbaar, maar de systeembeheerder kan wel ondersteuning voor deze waarden toevoegen in het dialoogvenster Tabeleigenschappen (zie Ondersteuning voor aanvullende HTML-elementen en -kenmerken toevoegen).

  Wanneer u een Tabel toevoegt, kunt u Tabeleigenschappen configureren met behulp van het dialoogvenster.

  • een geschikt Bijschrift.
  • U kunt het beste standaardwaarden voor Breedte, Hoogte, Rand, Celopvulling en Celafstand verwijderen aangezien deze eigenschappen in een globaal opmaakmodel kunnen worden ingesteld.

  

  Vervolgens kunt u met de eigenschap Cel kiezen of de cel een gegevens- of een kopcel is en, in het geval van een kopcel, of deze betrekking heeft op een rij of kolom of op beide:

  

• Complexe gegevenstabellen:

  In sommige gevallen, waar er complexe lijsten met twee of meer niveaus van kopballen zijn, dan kunnen de basiseigenschappen van de Lijst niet genoeg zijn om alle noodzakelijke structurele informatie te verstrekken. Voor dit soort complexe tabellen moeten er directe relaties worden gemaakt tussen de koppen en de bijbehorende cellen met behulp van de kenmerken header en id. In de onderstaande tabel worden de koppen en id's bijvoorbeeld aangepast om een programmatische koppeling te maken voor gebruikers van ondersteunende technologie.

  OPMERKING

  Het kenmerk id is niet beschikbaar in een installatie buiten de box. Het kan worden toegelaten door de regels van HTML en serializer in RTE te vormen.

  OPMERKING

  Tabellen moeten worden uitgevoerd met de component Table. Hoewel tabellen kunnen worden gemaakt in de component Text, wordt dit niet aanbevolen.

  <table>
     <tr>
       <th rowspan="2" id="h">Homework</th>
       <th colspan="3" id="e">Exams</th>
       <th colspan="3" id="p">Projects</th>
     </tr>
     <tr>
       <th id="e1" headers="e">1</th>
       <th id="e2" headers="e">2</th>
       <th id="ef" headers="e">Final</th>
       <th id="p1" headers="p">1</th>
       <th id="p2" headers="p">2</th>
       <th id="pf" headers="p">Final</th>
     </tr>
     <tr>
      <td headers="h">15%</td>
      <td headers="e e1">15%</td>
      <td headers="e e2">15%</td>
      <td headers="e ef">20%</td>
      <td headers="p p1">10%</td>
      <td headers="p p2">10%</td>
      <td headers="p pf">15%</td>
     </tr>
    </table>
  

  Om dit in AEM te bereiken moet u de prijsverhoging direct toevoegen gebruikend de bron uitgeeft wijze.

  OPMERKING

  Deze functionaliteit is niet onmiddellijk beschikbaar in een standaardinstallatie. Hiervoor is configuratie van de RTE vereist; HTML-regels en serienummering.

Meer informatie - Informatie en relaties (1.3.1)

• Werken met succescriteria 1.3.1
• Voldoen aan criteria 1.3.1

Sensorische kenmerken (1.3.3)

• Correctie 1.3.3
• Niveau A
• Sensorische kenmerken: Instructies voor het begrijpen en gebruiken van inhoud zijn niet uitsluitend gebaseerd op sensorische kenmerken van componenten zoals vorm, grootte, visuele locatie, oriëntatie of geluid.

Doel - Sensorische kenmerken (1.3.3)

Ontwerpers richten zich vaak op visuele ontwerpfuncties, zoals kleur, vorm, tekststijl of de absolute of relatieve positie van een stuk inhoud wanneer ze informatie presenteren. Dit kunnen zeer krachtige ontwerptechnieken zijn voor het overbrengen van informatie, maar blinden of slechtzienden hebben mogelijk geen toegang tot informatie die visuele identificatie van kenmerken zoals positie, kleur of vorm vereist.

Ook informatie die onderscheid moet maken tussen verschillende geluiden (bv. mannelijke of vrouwelijke gesproken inhoud) zal toegankelijkheidsbelemmeringen voor mensen met gehoorstoornissen opleveren, als deze informatie niet wordt weerspiegeld in een tekstalternatief voor de audio-inhoud.

Voldoen aan sensorische kenmerken (1.3.3)

Zorg ervoor dat alle informatie die afhankelijk is van visuele kenmerken van pagina-inhoud, ook in een andere indeling wordt weergegeven.

• Vertrouw niet op de visuele positie om informatie te geven. Als u bijvoorbeeld gebruikers naar een menu aan de rechterkant van de pagina wilt verwijzen voor toegang tot meer informatie, verwijst u niet naar het menu aan de rechterkant; Geef in plaats daarvan het menu een naam (bijvoorbeeld via een kop) en verwijs naar die naam in de tekst.
• Vertrouw niet op tekstopmaak (bijvoorbeeld vette of cursieve tekst) als enige manier om informatie over te brengen.

Meer informatie - Sensorische kenmerken (1.3.3)

• Werken met succescriteria 1.3.3
• Voldoen aan criteria 1.3.3

Doorschijnbaar (1.4)

Richtsnoer 1.4. Te onderscheiden: Het is voor gebruikers gemakkelijker om inhoud te zien en te horen, inclusief het scheiden van voorgrond en achtergrond.

Gebruik van kleur (1.4.1)

• Succescriterium 1.4.1
• Niveau A
• Gebruik van kleur: Kleur wordt niet gebruikt als de enige visuele manier om informatie over te brengen, een handeling aan te geven, een reactie te vragen of een visueel element te onderscheiden.

Doel - Gebruik van kleur (1.4.1)

Kleur is een duidelijk effectieve manier om de esthetische aantrekkingskracht van webpagina's te vergroten en is ook handig voor het doorgeven van informatie. Er is echter een reeks visuele beperkingen, van blindheid tot kleurstoornissen, waardoor sommige mensen geen onderscheid kunnen maken tussen bepaalde kleuren. Hierdoor wordt kleurcodering een onbetrouwbare manier om informatie te verschaffen.

Zo kan bijvoorbeeld iemand met een rode-groene kleur een gebrek aan gezichtsvermogen hebben om onderscheid te maken tussen groene tinten en rode tinten. Beide kleuren worden mogelijk als een derde kleur (bijvoorbeeld bruin) weergegeven, waardoor ze geen onderscheid kunnen maken tussen rood, groen en bruin.

Bovendien kan kleur niet worden waargenomen door mensen die alleen tekst weergeven, monochrome weergaveapparaten of een zwart-witafdruk van de pagina gebruiken.

Hoe kan ik-gebruik van kleur (1.4.1)

Telkens wanneer kleur wordt gebruikt om informatie over te brengen, zorg ervoor dat de informatie beschikbaar is zonder de behoefte om de kleur te zien.

Zorg er bijvoorbeeld voor dat informatie die door kleur wordt verschaft, ook expliciet in tekst wordt vermeld. In de onderstaande afbeelding ziet u hoe kleur en tekst beide de beschikbaarheid van zitplaatsen voor een bepaalde prestatie aangeven:

Prestaties	Beschikbaarheid
Dinsdag 16 maartth	BESCHIKBARE ZITPLAATSEN
Woensdag 17 maart	BESCHIKBARE ZITPLAATSEN
Donderdag 18 maartth	VERKOCHT

Als kleur wordt gebruikt als actiepunt voor het verschaffen van informatie, moet u een extra visuele aanwijzing opgeven, zoals het wijzigen van de stijl (bijvoorbeeld vet, cursief) of het lettertype. Dit helpt mensen met een laag gezichtsvermogen of die een kleurgezichtsgebrek hebben om de informatie te identificeren. Er kan echter niet volledig op worden vertrouwd, omdat het mensen die de pagina helemaal niet kunnen zien, niet helpt.

Meer informatie - Gebruik van kleur (1.4.1)

• Werken met succescriteria 1.4.1
• Voldoen aan criteria 1.4.1
• Richtlijnen voor het bereiken van een contrastverhouding van 3:1, met een lijst "webveilige" kleuren

Contrast (minimaal) (1.4.3)

• Succescriterium 1.4.3

• Niveau AA

• Contrast (minimaal): De visuele presentatie van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve voor de volgende:

  • Grote tekst: Op grote schaal uitgevoerde tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1.
  • Incidental: Voor tekst of afbeeldingen van tekst die deel uitmaken van een niet-actieve gebruikersinterfacecomponent, die puur decoratie zijn, die voor niemand zichtbaar zijn of die deel uitmaken van een afbeelding die belangrijke andere visuele inhoud bevat, is geen contrast vereist.
  • Logotypes: Voor tekst die deel uitmaakt van een logo of merknaam is geen minimaal contrast vereist.

Doel - Contrast (minimaal) (1.4.3)

Mensen met een bepaalde visuele handicap kunnen mogelijk geen onderscheid maken tussen bepaalde kleurenparen met een laag contrast. Toegankelijkheidsproblemen kunnen optreden bij deze personen als:

• De tekst contrasteert slecht met de achtergrondkleur.
• De kleurcodering van tekst (zoals koppelingstekst en niet-koppelingstekst) is belangrijk voor het maken van onderscheid tussen gegevens.

Hoe moet ik voldoen - Contrast (minimaal) (1.4.3)

Zorg ervoor dat de tekst voldoende contrasteert met de achtergrond. Contrastverhoudingen zijn afhankelijk van de grootte en de stijl van de desbetreffende tekst:

• Voor tekst met een grootte kleiner dan 18 punten (of 14 punten vet) moet de contrastverhouding tussen tekst/afbeeldingen van tekst en de achtergrond ten minste 4,5:1 zijn.
• Voor tekst die minimaal 18 punten (of 14 punten vet) groot is, moet de contrastverhouding ten minste 3:1 zijn.
• Als een achtergrond een patroon krijgt, moet de achtergrond rondom elke tekst worden gearceerd, zodat de verhouding van 4,5:1 of 3:1 behouden blijft.

Als u contrastverhoudingen wilt controleren, gebruikt u een kleurencontrastprogramma, zoals de Analyser van het contrast van de groepskleur van Paciello of de Kleurcontrastcontrole van WebAIM. Met deze gereedschappen kunt u kleurenparen controleren en contrastproblemen melden.

Als u zich minder zorgen maakt over het opgeven van de vormgeving van de pagina, kunt u er ook voor kiezen geen kleur voor de achtergrond en de voorgrondtekst op te geven. Er is geen controle op het contrast nodig, omdat de browser van de gebruiker de kleuren van de tekst en de achtergrond bepaalt.

Als het niet mogelijk is om aan de aanbevolen contrastniveaus te voldoen, moet u een koppeling naar een alternatieve, equivalente versie van de pagina (die geen problemen met het kleurcontrast heeft) opgeven of moet u de gebruiker toestaan het contrast van het kleurenschema aan te passen aan zijn eigen vereisten.

Meer informatie - Contrast (minimaal) (1.4.3)

• Werken met succescriteria 1.4.3
• Voldoen aan criteria 1.4.3

Afbeeldingen van tekst (1.4.5)

• Succescriterium 1.4.5

• Niveau AA

• Afbeeldingen van tekst: Als de gebruikte technologieën de visuele presentatie kunnen bereiken, wordt de tekst gebruikt om informatie eerder dan beelden van tekst over te brengen behalve het volgende:

  • Aanpasbaar: De afbeelding van tekst kan visueel worden aangepast aan de wensen van de gebruiker.
  • Essentieel: Een bepaalde presentatie van de tekst is van essentieel belang voor de informatie die wordt doorgegeven.

Doel - Afbeeldingen van tekst (1.4.5)

Afbeeldingen van tekst worden vaak gebruikt wanneer een bepaalde tekststijl de voorkeur heeft; bijvoorbeeld een logo of tekst die uit een andere bron is gegenereerd (bijvoorbeeld een scan van een papieren document). In vergelijking met tekst in HTML en opgemaakt met CSS beschikken afbeeldingen van tekst echter niet over de flexibiliteit om de grootte of weergave te wijzigen die nodig kan zijn voor mensen met een visuele handicap of leesproblemen.

Hoe kan ik-afbeeldingen van tekst (1.4.5)

Als afbeeldingen van tekst moeten worden gebruikt, gebruikt u CSS om de afbeeldingen van tekst te vervangen door equivalente tekst in HTML, zodat de tekst op een aanpasbare manier beschikbaar is. Voor een voorbeeld over hoe dit kan worden bereikt, verwijs naar C30: CSS gebruiken om tekst door beelden van tekst te vervangen en gebruikersinterfacecontroles te verstrekken om te schakelen.

Meer informatie - Afbeeldingen van tekst (1.4.5)

• Werken met succescriteria 1.4.5
• Voldoen aan criteria 1.4.5

Beginsel 2: Bewerkbaar

Beginsel 2: - De gebruikersinterfacecomponenten en de navigatie moeten kunnen worden bediend.

Pauze, Stoppen, Verbergen (2.2.2)

• Succescriterium 2.2.2

• Niveau A

• Pauze, Stoppen, Verbergen: Voor het verplaatsen, knipperen, schuiven of automatisch bijwerken van gegevens geldt het volgende:

  • Verplaatsen, knipperen, schuiven: Voor elke bewegende, knipperende of schuivende informatie die a) automatisch begint, b) langer dan vijf seconden duurt en c) parallel met andere inhoud wordt weergegeven, is er een mechanisme waarmee de gebruiker deze kan onderbreken, stoppen of verbergen, tenzij de beweging, het knipperen of schuiven deel uitmaakt van een activiteit waar dit essentieel is;
  • Automatisch bijwerken: Voor alle automatisch bij te werken informatie die a) automatisch wordt gestart en b) parallel met andere inhoud wordt weergegeven, is er een mechanisme waarmee de gebruiker deze kan onderbreken, stoppen of verbergen of de frequentie van de update kan bepalen, tenzij de automatisch bij te werken informatie deel uitmaakt van een activiteit waar dit essentieel is.

Opmerkingen zijn:

1. Raadpleeg Inhoud niet ontwerpen op een manier waarvan bekend is dat deze aanvallen veroorzaakt (2.3) voor vereisten met betrekking tot het flikkeren of knipperen van inhoud.
2. Aangezien inhoud die niet aan dit succescriterium voldoet, de mogelijkheid van een gebruiker om de hele pagina te gebruiken kan beïnvloeden, moet alle inhoud op de webpagina (ongeacht of deze wordt gebruikt om aan andere succescriteria te voldoen of niet) aan dit succescriterium voldoen. Zie Conformiteitseis 5: Niet-interferentie.
3. Inhoud die regelmatig door software wordt bijgewerkt of naar de gebruikersagent wordt gestreamd, is niet verplicht informatie te bewaren of te presenteren die wordt gegenereerd of ontvangen tussen het begin van de pauze- en de hervattingspresentatie, aangezien dit technisch mogelijk is en in veel situaties misleidend kan zijn om dit te doen.
4. Een animatie die optreedt als onderdeel van een voorlaadfase of een vergelijkbare situatie, kan als essentieel worden beschouwd als er tijdens die fase geen interactie kan optreden voor alle gebruikers en als de voortgang niet wordt aangegeven, gebruikers in verwarring kan brengen of kan leiden tot het vermoeden dat de inhoud is bevroren of gebroken.

Doel - Pauze, Stoppen, Verbergen (2.2.2)

Bepaalde gebruikers kunnen vinden dat de inhoud die wordt verplaatst, afleidt en het moeilijk maakt zich op andere delen van de pagina te concentreren. Bovendien kan dergelijke inhoud moeilijk leesbaar zijn voor mensen die moeite hebben met het bijhouden van bewegende tekst.

Procedure - Pauze, Stoppen, Verbergen (2.2.2)

Afhankelijk van de aard van de inhoud kunt u een of meer van de volgende suggesties toepassen bij het maken van webpagina's met bewegende, knipperende of knipperende inhoud:

• Biedt een manier om schuivende inhoud te pauzeren zodat gebruikers voldoende tijd hebben om deze te lezen. Bijvoorbeeld nieuwstickers of automatisch bijgewerkte tekst.
• Zorg ervoor dat de inhoud die knippert na vijf seconden stopt met knipperen.
• Gebruik de juiste technologieën om knipperende inhoud weer te geven die door de browser kan worden uitgeschakeld. Bijvoorbeeld GIF- (Graphics Interchange Format) of APNG-bestanden (Animated Portable Network Graphics).
• Geef een formulierbesturingselement op de webpagina zodat de gebruiker alle knipperende inhoud op de pagina kan uitschakelen.
• Als een van de bovenstaande opties niet mogelijk is, geeft u een koppeling op naar een pagina die alle inhoud bevat, maar zonder knippering.

Meer informatie - Pauzeren, Stoppen, Verbergen (2.2.2)

• Succescriterium 2.2.2
• Voldoen aan criterium 2.2.2

Convulsies (2.3)

Richtsnoer 2.3 Convulsies: Ontwerp de inhoud niet op een manier waarvan bekend is dat deze aanvallen veroorzaakt.

Drie Flash of onder drempelwaarde (2.3.1)

• Succescriterium 2.3.1
• Niveau A
• Drie Flash of onder drempelwaarde: Webpagina's bevatten niets dat meer dan drie keer knippert in een periode van één seconde, of de flits is onder de algemene flash- en rode flitsdrempels.

Doel - Drie Flash of onder de drempelwaarde (2.3.1)

In bepaalde gevallen kan knipperende inhoud fotosensitieve aanvallen veroorzaken. Aan de hand van dit succescriterium kunnen dergelijke gebruikers toegang krijgen tot alle inhoud en deze beleven zonder zich zorgen te maken over knipperende inhoud.

Hoe kan ik-drie Flash of onder Drempel (2.3.1)

Ga als volgt te werk om ervoor te zorgen dat de volgende technieken worden toegepast:

• ervoor zorgen dat de onderdelen gedurende een periode van één seconde niet meer dan drie keer knipperen;
• Als niet aan de bovenstaande voorwaarde kan worden voldaan, kunt u knipperende inhoud weergeven in een klein veilig gebied in pixels op het scherm. Dit gebied wordt berekend aan de hand van een complexe formule die onder G176 valt: Het knipperende gebied klein genoeg houden, zodat zou deze techniek slechts moeten worden gevolgd als het knipperen van inhoud absoluut noodzakelijk is.

Meer informatie - Drie Flash of onder de drempelwaarde (2.3.1)

• Werken met succescriterium 2.3.1
• Voldoen aan criterium 2.3.1

Getitelde pagina (2.4.2)

• Correctie 2.4.2
• Niveau A
• Getitelde pagina: Webpagina's hebben titels die onderwerp of doel beschrijven.

Doel - Getitelde pagina (2.4.2)

Met dit succescriterium kan iedereen, ongeacht een bepaalde handicap, de inhoud van een webpagina snel identificeren zonder de pagina volledig te lezen. Dit is vooral handig wanneer meerdere webpagina's worden geopend op de tabbladen van de browser, omdat de paginatitel op het tabblad wordt weergegeven en deze daarom snel kan worden gevonden.

Hoe te om te ontmoeten - Getitelde pagina (2.4.2)

Wanneer een nieuwe HTML-pagina wordt gemaakt in AEM, kunt u de paginatitel opgeven. Zorg ervoor dat de titel de inhoud van de pagina adequaat beschrijft, zodat bezoekers snel kunnen vaststellen of de inhoud al dan niet relevant is voor hun behoeften.

U kunt de paginatitel ook bewerken tijdens het bewerken van een pagina. Deze kan worden geopend met de tab Sidetrap - Pagina - Pagina-eigenschappen…

Meer informatie - Getitelde pagina (2.4.2)

• Succescriterium 2.4.2
• Voldoen aan criterium 2.4.2

Koppelingsdoel (in context) (2.4.4)

• Correctie 2.4.4
• Niveau A
• Koppelingsdoel (in context): Het doel van elke koppeling kan worden bepaald op basis van alleen de koppelingstekst of van de koppelingstekst samen met de programmatisch bepaalde koppelingscontext, behalve wanneer het doel van de koppeling dubbelzinnig zou zijn voor gebruikers in het algemeen.

Doel - Koppelingsdoel (in context) (2.4.4)

Voor alle gebruikers, ongeacht de handicap, is het van essentieel belang dat duidelijk de richting van een koppeling wordt aangegeven door middel van de juiste koppelingstekst. Hierdoor kunnen gebruikers beter beslissen of ze een koppeling willen volgen of niet. Voor waargenomen gebruikers is betekenisvolle koppelingstekst uiterst nuttig wanneer er meerdere koppelingen op een pagina staan (met name als de pagina tekstoptig is), omdat betekenisvolle koppelingstekst een duidelijkere indicatie geeft van de functionaliteit van de doelpagina. Terwijl gebruikers van ondersteunende hulpmiddelen, die een lijst van alle verbindingen op één enkele pagina kunnen produceren, gemakkelijker de verbindingstekst uit context kunnen begrijpen.

Hoe te om te ontmoeten - verbind Doel (in context) (2.4.4)

Zorg er vooral voor dat het doel van een koppeling duidelijk wordt beschreven in de tekst van de koppeling.

• Onjuist voorbeeld:

  • Tekst: Klik hier voor meer informatie over onze avondlessen voor het najaar van 2010.
  • Reden: de bestemming ervan wordt niet duidelijk en ondubbelzinnig aangegeven.

• Goed voorbeeld:

  • Tekst: Gebeurtenisklassen voor het najaar van 2010 - details.
  • Reden: Door de tekst en de positie van het koppelingselement enigszins aan te passen, kan de koppelingstekst worden verbeterd:

Koppelingen moeten op alle pagina's consistent worden gephrasd, met name voor navigatiebalken. Als een koppeling naar een specifieke pagina bijvoorbeeld Publicaties op één pagina heet, gebruikt u die tekst op andere pagina's om de consistentie te garanderen.

Op het moment van schrijven zijn er echter enkele problemen met betrekking tot het gebruik van titels:

• Tekst in het titelkenmerk is doorgaans alleen beschikbaar voor muisgebruikers als pop-upvenster met knopinfo en kan niet worden geopend met het toetsenbord.
• Schermlezers kunnen titelkenmerken lezen, maar deze functionaliteit is mogelijk niet standaard ingeschakeld. gebruikers zijn zich mogelijk niet bewust van het bestaan van een titelkenmerk.
• Het is moeilijk om de weergave van de titeltekst te wijzigen, wat betekent dat het moeilijk of onmogelijk kan zijn om door sommige mensen te lezen.

Dus terwijl het titelkenmerk kan worden gebruikt om extra context aan een koppeling te bieden, dient u zich bewust te zijn van de beperkingen ervan en deze niet te gebruiken als alternatief voor de juiste koppelingstekst.

Als de koppeling bestaat uit een afbeelding, controleert u of de alternatieve tekst voor de afbeelding de bestemming van de koppeling beschrijft. Als een afbeelding van een boekenkast bijvoorbeeld is ingesteld als een koppeling naar de publicaties van een persoon, moet de alternatieve tekst Publicaties van John Smith lezen en niet Boekenkast.

Als het koppelingsanker echter tekst bevat die het doel van de koppeling naast het afbeeldingselement beschrijft (en de tekst dus naast de afbeelding verschijnt), gebruikt u een leeg alt-kenmerk voor de afbeelding:

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

Hoewel het raadzaam is om koppelingstekst te verschaffen die het doel van de koppeling aangeeft zonder dat u een extra context nodig hebt, wordt erkend dat dit niet altijd mogelijk is. Contextvrije koppelingen kunnen in de volgende gevallen worden gebruikt. HTML-voorbeelden hiervan zijn te vinden in Voldoen aan succescriterium 2.4.4.

• Waar de koppelingstekst deel uitmaakt van een lijst met nauw verwante koppelingen en wanneer het lijstitem dat de koppeling omsluit voldoende context biedt.
• Waar het doel van een koppeling duidelijk kan worden aangegeven met de voorafgaande (niet met de volgende alinea) alineatekst.
• Indien de koppeling zich in een gegevenstabel bevindt, kan het doel duidelijk worden aangegeven in de desbetreffende rubrieken.
• Wanneer een lijst met koppelingen zich in een reeks koppen bevindt en de kop zelf een geschikte context biedt.
• Wanneer een lijst met koppelingen zich in een geneste koppeling bevindt en het bovenliggende lijstitem boven de geneste koppeling een geschikte context biedt.

In sommige gevallen, waar er verscheidene verbindingen op een pagina zijn (elk die de richting van een verbinding in complexe, maar noodzakelijke detail verstrekt), kan het aangewezen zijn om een alternatieve versie van de Web-pagina te verstrekken die de nauwkeurige zelfde inhoud toont maar waar de verbindingstekst niet zo gedetailleerd is.

Alternatief, kunnen de manuscripten worden gebruikt zodat een minimale hoeveelheid tekst binnen de verbinding zelf wordt verstrekt, maar bij het activeren van een aangewezen controle die aan de bovenkant van de pagina wordt geplaatst, is de verbindingstekst uitgebreid in meer detail. Een vergelijkbare aanpak is om CSS te gebruiken om hide de volledige koppeling van waargenomen gebruikers te verbergen, maar deze toch volledig uit te voeren naar schermlezers. Dit valt buiten het bereik van dit document, maar meer informatie over hoe dit kan worden bereikt, vindt u in de sectie Meer informatie - Koppelingsdoel (in context) (2.4.4).

Meer informatie - doel van koppeling (in context) (2.4.4)

• Succescriterium 2.4.4
• Voldoen aan criterium 2.4.4
• C7: CSS gebruiken om een gedeelte van de koppelingstekst te verbergen

Beginsel 3: Begrijpbaar

Beginsel 3: Begrijpelijk - Informatie en de werking van gebruikersinterface moeten begrijpelijk zijn.

Tekstinhoud leesbaar en begrijpelijk maken (3.1)

Richtsnoer 3.1 Leesbaar: Maak tekstinhoud leesbaar en begrijpelijk.

Taal van pagina (3.1.1)

• Succescriterium 3.1.1
• Niveau A
• Taal van pagina: De standaard menselijke taal van elke Web-pagina kan programmatically worden bepaald.

Doel - Taal van pagina (3.1.1)

Het doel van dit succescriterium is ervoor te zorgen dat tekst en andere taalkundige inhoud correct worden weergegeven. Voor gebruikers van schermlezers zorgt dit ervoor dat de inhoud correct wordt uitgedruct, terwijl visuele browsers eerder bepaalde tekensets correct zullen weergeven.

Hoe kan ik-taal van pagina (3.1.1)

Om aan dit succescriterium te voldoen, kan de standaardtaal van een Web-pagina worden geïdentificeerd gebruikend het lang attribuut binnen het <html> element bij de bovenkant van de pagina. Bijvoorbeeld:

• Als een pagina in het Engels wordt geschreven, moet het <html>-element als volgt worden gelezen:

  <html lang = “en-gb”>

• Overwegende dat een pagina die als Amerikaans Engels moet worden weergegeven, de volgende norm moet aannemen:

  <html lang = “en-us”>

In AEM wordt de standaardtaal van uw pagina ingesteld bij het maken van de pagina, maar kan deze ook worden gewijzigd bij het bewerken van een pagina. Deze kan worden geopend via Sidekick - tabblad Pagina - Pagina-eigenschappen - tabblad Geavanceerd.

Meer informatie - Taal van pagina (3.1.1)

• Werken met succescriterium 3.1.1
• Voldoen aan criterium 3.1.1
• De codes zijn gebaseerd op ISO 639-1. Een uitgebreidere lijst met codes voor elke taal is te vinden op de W3 Schoolsite.

Taal van onderdelen (3.1.2)

• Succescriterium 3.1.2
• Niveau AA
• Taal van onderdelen: De menselijke taal van elke passage of uitdrukking in de inhoud kan programmatisch worden bepaald behalve juiste namen, technische termijnen, woorden van onbepaalde taal, en woorden of uitdrukkingen die deel van het woordenboek van de onmiddellijk omringende tekst zijn geworden.

Doel - Taal van onderdelen (3.1.2)

Het doel van dit succescriterium is vergelijkbaar met het succescriterium Taal van pagina, behalve dat het van toepassing is op webpagina's die inhoud bevatten in meerdere talen op één pagina (bijvoorbeeld vanwege aanhalingstekens of ongebruikelijke woorden in een lening).

Pagina's die dit succescriterium toepassen, maken het mogelijk:

• Braille-overgangssoftware voor het invoegen van tekens met accenten.
• Schermlezers spreken de woorden uit die zich niet correct in de standaardtaal bevinden.
• Met vertaalprogramma's zoals Google Translate kunt u inhoud van de ene taal naar de andere vertalen.

Hoe te om te ontmoeten - Taal van Delen (3.1.2)

Het lang attribuut kan worden gebruikt om veranderingen in de taal van inhoud te identificeren. Een citaat in het Duits (ISO 639-1 code "de") kan bijvoorbeeld als volgt worden weergegeven:

<blockquote cite = "John F. Kennedy" lang = "de">
     <p>Ich bin ein Berliner</p>
 </blockquote>

Op dezelfde manier kan browser een ongebruikelijk leningswoord of een uitdrukking correct teruggeven als span element als volgt wordt gebruikt:

<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>

Als u het span-element met een geschikte taal wilt toevoegen, kunt u de HTML-markering handmatig bewerken in de bronbewerkingsmodus van de RTE, zodat deze als hierboven wordt gelezen. Alternatief kan het lang attribuut in RTE door een systeembeheerder worden omvat (zie Steun voor Extra Elementen en Attributen van HTML toevoegen).

Meer informatie - Taal van onderdelen (3.1.2)

• Werken met succescriterium 3.1.2
• Voldoen aan criterium 3.1.2

Gebruikers helpen fouten te voorkomen en te corrigeren (3.3)

Richtsnoer 3.3 Invoerbijstand: Gebruikers helpen fouten te voorkomen en te corrigeren.

Labels of instructies (3.3.2)

• Succescriterium 3.3.2
• Niveau A
• Labels of instructies: Labels of instructies worden gegeven wanneer de inhoud gebruikersinvoer vereist.

Doel - Labels of instructies (3.3.2)

Het geven van instructies om mensen te helpen vormen in te vullen is een fundamenteel onderdeel van goede praktijken in interfacebruikbaarheid. Dit is vooral handig voor mensen met een visuele of cognitieve handicap die anders moeite zouden hebben om de indeling van een formulier en het soort gegevens dat in een bepaald formulierveld moet worden verstrekt, te begrijpen.

In AEM wordt een standaardlabel toegevoegd wanneer u een formuliercomponent, zoals een Tekstveld, aan de pagina toevoegt. Deze standaardtitel is afhankelijk van het componenttype, u kunt uw eigen titel toevoegen op het tabblad Titel en Tekst van het dialoogvenster Bewerken voor dat veld. Het is belangrijk dat labels gebruikers helpen de gegevens te begrijpen die aan elke formuliercomponent zijn gekoppeld.

Dit veld Title moet worden gebruikt voor veldelementen omdat het een label biedt dat beschikbaar is voor ondersteunende hulpmiddelen. Alleen het schrijven van een label in tekst naast het veld is niet voldoende.

Voor sommige formuliercomponenten is het ook mogelijk om labels visueel te verbergen met het selectievakje Titel verbergen. Labels die op deze manier zijn verborgen, zijn nog steeds beschikbaar voor ondersteunende technologie, maar worden niet op het scherm weergegeven. Hoewel dit in sommige situaties een goede aanpak kan zijn, is het doorgaans het beste om waar mogelijk een visueel label op te nemen, omdat sommige gebruikers wellicht een zeer klein gedeelte van het scherm bekijken (één veld tegelijk) en de labels nodig hebben om het veld correct te identificeren.

Afbeeldingsknoppen

Wanneer afbeeldingsknoppen worden gebruikt (bijvoorbeeld de component Afbeeldingsknop), bevat het veld Titel op het tabblad Titel en tekst van het dialoogvenster Bewerken in feite de alternatieve tekst voor de afbeelding in plaats van het label. In het onderstaande voorbeeld heeft de afbeelding met de tekst Submit dus alternatieve tekst van Submit, toegevoegd met het veld Titel in het dialoogvenster Bewerken.

Groepen formuliervelden

Als er een groep gerelateerde besturingselementen is, zoals Keuzegroep, kan een titel nodig zijn voor de groep en voor afzonderlijke besturingselementen. Wanneer u een set keuzerondjes toevoegt in AEM, wordt in het veld Titel deze groepstitel weergegeven, terwijl afzonderlijke titels worden opgegeven wanneer de keuzerondjes (Items) worden gemaakt.

Er is echter geen programmatische koppeling tussen de groepstitel en de keuzerondjes zelf. Sjablooneditors moeten de titel in de benodigde fieldset- en legend-tags plaatsen om deze koppeling te maken. Dit kan alleen door de broncode van de pagina te bewerken. Een systeembeheerder kan ook ondersteuning voor deze elementen toevoegen, zodat deze worden weergegeven in het dialoogvenster Veldeigenschappen (zie Ondersteuning voor aanvullende HTML-elementen en -kenmerken toevoegen).

Aanvullende overwegingen voor Forms

Als gegevens in een specifieke indeling moeten worden ingevoerd, maakt u dit duidelijk in de labeltekst. Als bijvoorbeeld een datum moet worden ingevoerd in de notatie DD-MM-YYYY, geeft u dit specifiek op als onderdeel van het label. Dit betekent dat wanneer gebruikers van schermlezers het veld tegenkomen, het label automatisch wordt aangekondigd, samen met aanvullende informatie over de indeling.

Als invoer voor een formulierveld verplicht is, maakt u dit duidelijk door het vereiste woord als onderdeel van het label te gebruiken. AEM voegt een sterretje toe wanneer een veld vereist is, maar het is ideaal om het woord requiredin het label zelf op te nemen (in het veld Titel in het dialoogvenster Bewerken).

Het positioneren van labels is ook belangrijk, omdat ze hierdoor geschikte velden kunnen vinden. Dit is van bijzonder belang wanneer de gebruiker met een complexe vorm wordt geconfronteerd. Volg de onderstaande conventie:

• Selectievakjes of keuzerondjes:

  De labels worden direct rechts van het veld geplaatst.

• Alle andere formuliercomponenten (bijvoorbeeld tekstvakken, keuzelijsten met invoervak):

  De labels worden direct boven of direct links van het veld geplaatst.

In eenvoudige formulieren met een zeer beperkte functionaliteit kan het correct labelen van een Submit-knop als label voor het aangrenzende veld fungeren (bijvoorbeeld Search). Dit is handig in situaties waarin het lastig kan zijn om ruimte te zoeken voor de labeltekst.

Meer informatie - Labels of instructies (3.3.2)

• Werken met succescriterium 3.3.2
• Voldoen aan criterium 3.3.2