Toegankelijke content maken (WCAG 2.0-compatibiliteit) creating-accessible-content-wcag-conformance
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.
- ons Snelle gids aan WCAG 2.0 voor nadere bijzonderheden
- De Rich Text Editor configureren voor het produceren van toegankelijke inhoud
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 het volgende gedeelte wordt de WCAG 2.0-richtsnoeren met de bijbehorende succescriteria voor niveau A en niveau A conformiteitsniveaus.
- de korte namen van de WCAG 2.0-richtsnoeren.
- de nummering die wordt gebruikt in de WCAG 2.0-richtsnoeren kruisverwijzingen met de WCAG-website te ondersteunen.
Beginsel 1: Perceerbaar principle-perceivable
Alternatieven voor tekst (1.1) text-alternatives
Niet-tekstuele inhoud (1.1.1) non-text-content
- 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) purpose-non-text-content
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.
Ontmoeten - Niet-tekstuele inhoud (1.1.1) how-to-meet-non-text-content
Voor statische afbeeldingen is het basisvereiste dat een equivalent tekstalternatief voor de afbeelding wordt geboden. Dit kan worden gedaan in het Alt-tekst veld:
alt te ondersteunen zodat auteurs dit aan de content kunnen toevoegen (zie Ondersteuning toevoegen voor aanvullende HTML-elementen en -kenmerken).De Alternatieve tekst veld is beschikbaar in Afbeelding dialoogvenster van de component Metagegevens tab:
AEM vereist Alternatieve tekst veld dat standaard moet worden ingevuld. Als de afbeelding alleen decoratief is en alternatieve tekst onzinnig is, wordt de Afbeelding is decoratief Deze optie kan worden ingeschakeld.
Alternatieven voor goede tekst maken creating-good-text-alternatives
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.
De W3C-concept: HTML5 Technieken om nuttige tekstopties te verstrekken bevat meer details en voorbeelden van geschikte alternatieve tekstvoorzieningen voor afbeeldingen van verschillende typen.
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. waarschijnlijk een geschikt tekstequivalent 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 zo nodig ook een meer gedetailleerde beschrijving in de tekst met behulp van de Beschrijving in het Geavanceerd tabblad Eigenschappen van afbeelding. Bovendien kunt u de brongegevens elders op de pagina of site in tabelvorm opgeven.
Als u een alternatief voor dit voorbeelddiagram wilt opgeven, voegt u een kort
altde tekst aan het beeld zelf en dan het beeld met een volledig tekstalternatief te volgen.code language-xml <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>note note NOTE Het bovenstaande fragment wordt alleen gebruikt om de volgorde te illustreren. Het wordt aanbevolen om de Afbeelding component (in plaats van de img srchierboven gebruikte referentie.AEM kan dit worden gedaan met een combinatie van de Alt-tekst en Beschrijving velden in het configuratiedialoogvenster van de afbeelding - zoals in Ontmoeten - Niet-tekstuele inhoud (1.1.1).
-
Kaarten, diagrammen, stroomdiagrammen: Voor afbeeldingen die ruimtelijke data 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 Volledig geautomatiseerde openbare trainingstest om computers en mensen te informeren. 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.
note note NOTE Er moet een passend contrastniveau zijn tussen de achtergrond en de voorgrondtekst. dit wordt nader besproken Contrast (minimaal) (1.4.3).
Meer informatie - Niet-tekstuele inhoud (1.1.1) more-information-non-text-content
Op tijd gebaseerde media (1.2) time-based-media
Richtsnoer 1.2 Op tijd gebaseerde media: Alternatieven bieden voor tijdgebaseerde media.
Dit heeft betrekking op webinhoud die op tijd gebaseerd. 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) audio-only-and-video-only-pre-recorded
-
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) purpose-audio-only-and-video-only-pre-recorded
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) how-to-meet-audio-only-and-video-only-pre-recorded
-
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) more-information-audio-only-and-video-only-pre-recorded
Bijschriften (vooraf opgenomen) (1.2.2) captions-pre-recorded
- 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) purpose-captions-pre-recorded
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) how-to-meet-captions-pre-recorded
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 opgeven in de juiste indeling (bijvoorbeeld SMIL) naast het videobestand (details over hoe dit te doen vallen buiten het bereik van deze handleiding, maar we hebben koppelingen naar enkele zelfstudies in het kader van 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) more-information-captions-pre-recorded
Audiobeschrijving of media-alternatief (vooraf opgenomen) (1.2.3) audio-description-or-media-alternative-pre-recorded
- 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) purpose-audio-description-or-media-alternative-pre-recorded
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) how-to-meet-audio-description-or-media-alternative-pre-recorded
Er zijn twee manieren om aan dit succescriterium te voldoen. Beide zijn acceptabel:
-
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 niet bevat een audiobeschrijving) en de nieuwe audiotrack (die doet bevat een audiobeschrijving).
- 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.
-
-
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 plug-in te downloaden en een alternatief voor tekst te bieden via het dialoogvenster <noscript> element.
Meer informatie - Audio-beschrijving of Media-alternatief (vooraf opgenomen) (1.2.3) more-information-audio-description-or-media-alternative-pre-recorded
Bijschriften (live) (1.2.4) captions-live
- 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) purpose-captions-live
Dit succescriterium is identiek aan Bijschriften (vooraf opgenomen) in die zin dat het gaat om toegankelijkheidsbarrières voor doven of slechthorenden, behalve dat dit succescriterium betrekking heeft op live presentaties zoals webcasts.
Hoe kan ik-Bijschriften (live) ontmoeten (1.2.4) how-to-meet-captions-live
Volg de aanwijzingen 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:
Meer informatie - Bijschriften (live) (1.2.4) more-information-captions-live
Audiobeschrijving (vooraf opgenomen) (1.2.5) audio-description-pre-recorded
- 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) purpose-audio-description-pre-recorded
Dit succescriterium is identiek aan Audiobeschrijving of media-alternatief (vooraf opgenomen), behalve dat auteurs een veel gedetailleerdere audiobeschrijving moeten verstrekken om te voldoen aan niveau A.
Hoe kan ik-audiobeschrijving (vooraf opgenomen) (1.2.5) how-to-meet-audio-description-pre-recorded
Volg de aanwijzingen voor Audiobeschrijving of media-alternatief (vooraf opgenomen).
Meer informatie - Audiobeschrijving (vooraf opgenomen) (1.2.5) more-information-audio-description-pre-recorded
Aanpasbaar (1.3) adaptable
Dit richtsnoer heeft betrekking op de vereisten die nodig zijn ter ondersteuning van personen die:
-
heeft mogelijk geen toegang tot informatie zoals deze door een auteur in een standaard tweedimensionale, meerkolomige, gekleurde webpaginalay-out
-
U kunt kiezen voor alleen-audio of een andere visuele weergave, zoals grote tekst of een hoog contrast.
Informatie en relaties (1.3.1) info-and-relationships
- 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) purpose-info-and-relationships
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 via visuele opmaak lijkt te zijn gestructureerd in plaats van via 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 erin ervoor te zorgen dat dergelijke structurele informatie via HTML wordt verstrekt, zodat browsers en ondersteunende hulpmiddelen toegang hebben tot de informatie en deze kunnen benutten.
Hoe te om te ontmoeten - Informatie en Verband (1.3.1) how-to-meet-info-and-relationships
AEM maakt het eenvoudig om webpagina's samen te stellen met de juiste HTML-elementen. Open de pagina-inhoud in de RTE (een tekstcomponent) en gebruik de component Paraformat (alineasymbool) om het juiste structuurelement (bijvoorbeeld alinea, kop, enz.) op te geven.
In de volgende afbeelding ziet u tekst die is opgemaakt als alineatekst.
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 aan paginakoppen. 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 of element 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 de knop B pictogram (voor <strong>) of de I pictogram (voor <em>) weergegeven in het dialoogvenster Eigenschappen (controleer of HTML is geselecteerd).
note note NOTE RTE in een standaard AEM installatie is opstelling aan gebruik: - <b> for <strong>
- <i> for <em>
Ze zijn in feite hetzelfde, maar en hebben de voorkeur omdat ze semantisch correct html zijn. Uw ontwikkelingsteam kan RTE vormen aan gebruik en (in plaats van en ) wanneer het ontwikkelen van uw projectinstantie.
-
Lijsten gebruiken: Met HTML kunt u drie verschillende typen lijsten opgeven:
-
De
<ul>element is gebruikt voor ongeordend lijsten (met opsommingstekens). Afzonderlijke lijstitems worden geïdentificeerd aan de hand van de<li>element.in RTE, gebruik Lijst met opsommingstekens pictogram.
-
De
<ol>element is gebruikt voor genummerde lijsten. Afzonderlijke lijstitems worden geïdentificeerd aan de hand van de<li>element.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 de paragraaftekst wordt ingegaan, worden de aangewezen lijstelementen automatisch toegevoegd aan uw HTML.
In de volledige-schermmodus zijn de afzonderlijke pictogrammen Lijst met opsommingstekens en Genummerde lijst zichtbaar. Als de volledige-schermmodus niet is geactiveerd, zijn de twee opties beschikbaar achter het enkele pictogram Lijsten.
note note NOTE <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 tabel - a
<th>element voor elke rij en kolomkop - a
<td>element voor elke gegevenscel
note note NOTE In de klassieke UI, zouden de lijsten met moeten worden gerealiseerd Tabel component. Daarnaast maken toegankelijke tabellen gebruik van de volgende elementen en kenmerken:
- De
<caption>-element wordt gebruikt om een zichtbaar bijschrift voor de tabel te maken. 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. - De
<summary>het element 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). - De
scopekenmerk van de<th>-element wordt gebruikt om aan te geven of een cel een koptekst 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.
note note NOTE 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). Bij het toevoegen van een Tabel u kunt vormen Tabeleigenschappen via het dialoogvenster.
- passende Bijschrift.
- U kunt het beste standaardwaarden voor Breedte, Hoogte, Rand, Celopvulling en Celafstand verwijderen aangezien deze eigenschappen in een globaal opmaakmodel kunnen worden ingesteld.
U kunt dan de Celeigenschappen om te kiezen of de cel een gegevens- of kopcel is en, in het geval van een kopcel, of het een rij- of kolomcel of beide betreft:
- één
-
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.
note note NOTE 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. note note NOTE In klassieke UI, zouden de lijsten met moeten worden gerealiseerd Tabel component. code language-xml <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.
note note NOTE Deze functionaliteit is niet onmiddellijk beschikbaar in een standaardinstallatie. Het vereist configuratie van RTE, de regels van HTML, en serializer.
Meer informatie - Informatie en relaties (1.3.1) more-information-info-and-relationships
Sensorische kenmerken (1.3.3) sensory-characteristics
- 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) purpose-sensory-characteristics
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) how-to-meet-sensory-characteristics
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 rechts; 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) more-information-sensory-characteristics
Doorneembaar (1.4) distinguishable
Gebruik van kleur (1.4.1) use-of-color
- 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) purpose-use-of-color
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.
Voldoen aan - gebruik van kleur (1.4.1) how-to-meet-use-of-color
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:
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) more-information-use-of-color
Contrast (minimaal) (1.4.3) contrast-minimum
-
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) purpose-contrast-minimum
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) how-to-meet-contrast-minimum
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 gereedschap voor kleurcontrast, zoals het gereedschap Paciello Group Color Contrast Analyse of de Controle van webAIM-kleurcontrast. 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) more-information-contrast-minimum
Afbeeldingen van tekst (1.4.5) images-of-text
-
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) purpose-images-of-text
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 tekstafbeeldingen echter niet over de flexibiliteit om de grootte of weergave te wijzigen die nodig kan zijn voor mensen met een visuele handicap of leesproblemen.
Procedure - Afbeeldingen van tekst (1.4.5) how-to-meet-images-of-text
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 van hoe dit kan worden bereikt, raadpleegt u C30: CSS gebruiken om tekst te vervangen door afbeeldingen van tekst en besturingselementen voor de gebruikersinterface bieden voor het schakelen tussen.
Meer informatie - Afbeeldingen van tekst (1.4.5) more-information-images-of-text
Beginsel 2: Werkbaar principle-operable
Beginsel 2: - De gebruikersinterfacecomponenten en de navigatie moeten kunnen worden bediend.
Pauzeren, stoppen en verbergen (2.2.2) pause-stop-hide
-
Succescriterium 2.2.2
-
Niveau A
-
Pauzeren, Stoppen en 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:
- Voor vereisten met betrekking tot flikkerende of knipperende inhoud raadpleegt u Inhoud niet ontwerpen op een manier waarvan bekend is dat deze convulsies kan veroorzaken (2.3).
- 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.
- 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.
- 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 - Pauzeren, Stoppen, Verbergen (2.2.2) purpose-pause-stop-hide
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.
Ontmoeten - Pauzeren, Stoppen, Verbergen (2.2.2) how-to-meet-pause-stop-hide
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 Graphics Interchange Format (GIF) of Geanimeerde Portable Network Graphics (APNG)-bestanden.
- 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) more-information-pause-stop-hide
Convulsies (2.3) seizures
Drie Flash of onder de drempelwaarde (2.3.1) three-flashes-or-below-threshold
- 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) purpose-three-flashes-or-below-threshold
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 te om te ontmoeten - Drie Flash of onder Drempel (2.3.1) how-to-meet-three-flashes-or-below-threshold
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, geeft u knipperende inhoud weer binnen een klein veilig gebied in pixels op het scherm. Dit areaal wordt berekend aan de hand van een complexe formule, die in G176: Het knipperende gebied klein genoeg houden, dus deze techniek dient alleen te worden gevolgd als knipperende inhoud absoluut noodzakelijk.
Meer informatie - drie Flash of onder de drempelwaarde (2.3.1) more-information-three-flashes-or-below-threshold
Getitelde pagina (2.4.2) page-titled
- Correctie 2.4.2
- Niveau A
- Getitelde pagina: Webpagina's hebben titels die onderwerp of doel beschrijven.
Doel - Getitelde pagina (2.4.2) purpose-page-titled
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 kan ik-pagina getiteld (2.4.2) how-to-meet-page-titled
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 via Pagina-informatie - Eigenschappen.
Meer informatie - Getitelde pagina (2.4.2) more-information-page-titled
Koppelingsdoel (in context) (2.4.4) link-purpose-in-context
- 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) purpose-link-purpose-in-context
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) how-to-meet-link-purpose-in-context
Zorg er vooral voor dat het doel van een koppeling duidelijk wordt beschreven in de tekst van de koppeling.
-
Onjuist voorbeeld:
- Tekst: Klik voor meer informatie over onze avondlessen voor het najaar van 2010 op hier .
- Reden: de bestemming ervan wordt niet duidelijk en ondubbelzinnig aangegeven.
-
Goed voorbeeld:
- Tekst: Klassen voor najaar 2010 - nadere bijzonderheden.
- 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 bijvoorbeeld een koppeling naar een specifieke pagina een naam heeft Publicaties op één pagina, gebruik die tekst op andere pagina's om consistentie te verzekeren.
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 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. U kunt contextvrije koppelingen gebruiken in de volgende gevallen, waarvan HTML-voorbeelden te vinden zijn in Voldoen aan criterium 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.
- Wanneer het doel van een koppeling duidelijk kan worden vastgesteld aan de hand van de voorafgaand (niet de volgende) 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.
U kunt ook scripts gebruiken, zodat er een minimale hoeveelheid tekst wordt opgegeven in de koppeling zelf, maar als u een geschikt besturingselement activeert dat zich boven aan de pagina bevindt, is de koppelingstekst uitgevouwen meer details. Een vergelijkbare aanpak is het gebruik van CSS voor verbergen de volledige koppeling van waargenomen gebruikers, maar deze nog steeds volledig uitvoeren naar schermlezers. Dit valt buiten het toepassingsgebied van dit document, maar meer informatie over hoe dit kan worden bereikt, is te vinden in het Meer informatie - Koppelingsdoel (in context) (2.4.4) sectie.
Meer informatie - Koppelingsdoel (in context) (2.4.4) more-information-link-purpose-in-context
Beginsel 3: Begrijpelijk principle-understandable
Tekstinhoud leesbaar en begrijpelijk maken (3.1) make-text-content-readable-and-understandable
Richtsnoer 3.1 Leesbaar: Maak tekstinhoud leesbaar en begrijpelijk.
Taal van pagina (3.1.1) language-of-page
- 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) purpose-language-of-page
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) how-to-meet-language-of-page
Om aan dit succescriterium te voldoen, kan de standaardtaal van een webpagina worden geïdentificeerd met behulp van de lang attribuut binnen <html> -element boven aan de pagina. Bijvoorbeeld:
-
Als een pagina in het Engels (Engels) wordt geschreven,
<html>Het element moet 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) more-information-language-of-page
- 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 website W3 Schoolsite.
Taal van onderdelen (3.1.2) language-of-parts
- 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) purpose-language-of-parts
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.
- Vertaalgereedschappen zoals Google Vertalen om inhoud van de ene taal naar de andere te vertalen.
Hoe te om te ontmoeten - Taal van Delen (3.1.2) how-to-meet-language-of-parts
Tthe lang kan worden gebruikt om wijzigingen in de taal van de 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 de browser een ongewoon woord of een ongewone woordgroep correct weergeven als de span element wordt als volgt gebruikt:
<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>
Om het spanwijdtelement, met een aangewezen taal toe te voegen, kunt u uw prijsverhoging van HTML op de bron uitgeven wijze van RTE zodat het zoals hierboven leest. Als alternatief lang attributen kunnen in RTE door een systeembeheerder worden omvat (zie Ondersteuning toevoegen voor extra HTML-elementen en -kenmerken).
Meer informatie - Taal van onderdelen (3.1.2) more-information-language-of-parts
Gebruikers helpen fouten te voorkomen en te corrigeren (3.3) help-users-avoid-and-correct-mistakes
Richtsnoer 3.3 Invoerbijstand: Gebruikers helpen fouten te voorkomen en te corrigeren.
Labels of instructies (3.3.2) labels-or-instructions
- 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) purpose-labels-or-instructions
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, naar de pagina. Deze standaardtitel is afhankelijk van het componenttype. U kunt uw eigen titel toevoegen in het dialoogvenster 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 Titel het veld moet worden gebruikt voor veldelementen omdat het een label verschaft 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 image-buttons
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 groups-of-form-fields
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 additional-considerations-for-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 het dialoogvenster DD-MM-YYYY formaat, geeft dit specifiek aan 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 kunt u op de juiste manier een etiket aanbrengen op Submit De knop kan fungeren als een label voor het aangrenzende veld (bijvoorbeeld Search). Dit is handig in situaties waarin het lastig kan zijn om ruimte te zoeken voor de labeltekst.