Toegankelijkheidsverklaring

Bart Simons op 11/01/2019

Cet article en français: La déclaration d'accessibilité

Als u inspanningen doet om toegankelijke websites en apps te maken, is het interessant om daarover te communiceren. Dat kunt u doen met een toegankelijkheidsverklaring. Overheidsdiensten zijn volgens de Europese richtlijn wettelijk verplicht om zo een verklaring te publiceren op hun websites en bij hun apps.

Wat is het?

Een toegankelijkheidsverklaring is een pagina op uw website of een onderdeel van de beschrijving van uw app waarin u uitlegt:

  • hoe toegankelijk uw website of app is, eventueel aan welke normen ze voldoet,
  • hoe u dat getest heeft,
  • welke onderdelen van de website of de app nog niet toegankelijk zijn en welke alternatieven u voorstelt,
  • waar mensen terecht kunnen als ze toch problemen ondervinden.

Een goede toegankelijkheidsverklaring is:

  • gemakkelijk te vinden,
  • beknopt en vlot leesbaar,
  • eerlijk en concreet,
  • actueel: als uw website verandert, heeft dat soms invloed op toegankelijkheid. Zorg dat de toegankelijkheidsverklaring mee evolueert.

Inhoud van een toegankelijkheidsverklaring

  • Over welke website(s)/app(s) gaat de verklaring?
  • Aan welke norm is er voldaan? Vb. Web Content Accessibility Guidelines versie 2.1 niveau AA,
  • Hoe heeft u getest dat u aan die norm voldoet? Vb. een validatie door AnySurfer, een link naar de statuspagina achter uw AnySurferlabel, samengewerkt met een erkende bouwer ...
  • Welke onderdelen voldoen nog niet aan de norm?
    • Welke maatregelen neemt u om ook die onderdelen toegankelijk te maken?
    • Wanneer plant u daarmee klaar te zijn?
    • Welk alternatief stelt u ondertussen voor?
  • Datum waarop de verklaring is opgesteld en de datum waarop ze het laatst werd bijgewerkt.
  • Contactgegevens van de verantwoordelijke(n) voor toegankelijkheid waar men terecht kan met feedback.

Tips

  • Publiceer de informatie als een gewone webpagina, niet als downloadbaar document.
  • Plaats de link naar de toegankelijkheidsverklaring op een logische plaats, vb. in de footer van elke webpagina.
  • Betekenisvolle linkteksten zijn 'Toegankelijkheidsverklaring' of 'Toegankelijkheid van deze website'
  • Schrijf klare taal: de meeste mensen die uw toegankelijkheidsverklaring lezen, doen dat om dat ze een probleem ondervinden. Frustreer hen niet verder met allerlei jargon, maar help hen om alternatieven te vinden of contact met u op te nemen.
  • Wees eerlijk en concreet: niemand is geholpen met vage beloftes.

Aan de slag

  • Voor overheidsinstanties legt de Europese Commissie een modeltoegankelijkheidsverklaring op. Lokale overheden kunnen bijkomende eisen stellen.
  • Websites die een AnySurferlabel behalen, beschikken over een statuspagina. Als u een toegankelijkheidsverklaring opstelt, link dan gerust naar uw statuspagina om uw beweringen objectief te onderbouwen.
  • Het W3C ontwikkelde een hulpmiddel om een toegankelijkheidsverklaring op te stellen.
  • U kan ook inspiratie opdoen bij andere websites. DNS Belgium is wat ons betreft een mooi voorbeeld.
Reageer als eerste

FeWeb Awards

Gijs Veyfeyken op 06/12/2018

FeWeb (Belgische federatie voor webbedrijven) organiseert jaarlijks de FeWeb Awards. Webbouwers dienen op voorhand websites in waarna die getest worden op verschillende criteria.

Criteria zoals snelheid, linkkwaliteit, seo, mobile- en gebruiksvriendelijkheid, toegankelijkheid en juridische conformiteit spelen mee in het bepalen van de winnaars. FeWeb zette hiervoor diverse tools en analyses in, met de steun van InternetVista, Woorank, AnySurfer en deJuristen.

Er waren 97 inzendingen. FeWeb vroeg ons een selectie te testen op toegankelijkheid. We gebruikten de AnySurfer Quickscan, die bestaat uit 15 minimale vereisten die je snel en makkelijk kan testen. Dat is niet vergelijkbaar met een WCAG (Web Content Accessibility Guidelines) audit of een audit volgens de AnySurfer checklist.

AnySurfer Quickscan

  1. Heeft iedere pagina een betekenisvolle titel?
  2. Is de website bruikbaar met het toetsenbord?
  3. Is de focus zichtbaar bij toetsenbordnavigatie?
  4. Zijn links duidelijk te onderscheiden van andere tekst?
  5. Zijn linkteksten betekenisvol?
  6. Kan bewegende inhoud worden stopgezet?
  7. Hebben alle afbeeldingen een alternatieve beschrijving?
  8. Is gesproken tekst in audio- en videofragmenten ook tekstueel beschikbaar?
  9. Zijn formulieren gemarkeerd met de hiervoor bestemde HTML-tags?
  10. Is er tekstuele hulp na het verkeerd invullen van een formulier?
  11. Contrasteert de tekstkleur voldoende met de achtergrond?
  12. Zijn koppen gemarkeerd met de hiervoor bestemde HTML-tags?
  13. Zijn lijsten gemarkeerd met de hiervoor bestemde HTML-tags?
  14. Zijn er alternatieven voor belangrijke paginaonderdelen in Flash?
  15. Voldoet de website aan de HTML-versie die aangegeven staat in de broncode?

Resultaten in percentages

De resultaten van de 12 winnnaars. Er werd brons, zilver en goud uitgereikt binnen vier categorieën: non-profit, e-commerce, Business-to-Business en Business-to-Consumer.

  1. Glo-be.be: 85%
  2. watwat.be: 82%
  3. bonache.be: 76%
  4. aromaforma.be: 76%
  5. zwembad.be: 73%
  6. provincieantwerpen.be: 70%
  7. vier.be: 67%
  8. pizzahut.be: 58%
  9. sonaca.com: 55%
  10. excellent.be: 48%
  11. woodstoxx.be: 42%
  12. transportenvironment.org 39%

Wat viel op tijdens het testen?

Contrast

Contrast blijft een struikelblok. 13 van de 20 sites scoort onder het vereiste contrastratio van 4,5 voor tekst t.o.v. de achtergrondkleur. WebAIM publiceerde onlangs een artikel dat alles opsomt wat je als designer moet weten om te voldoen aan WCAG. Een aanrader.

Animaties

12 van de 20 sites bevatten animaties die je niet kan stopzetten. Irriterend voor de meeste bezoekers, een probleem voor mensen met een concentratiestoornis. Karl Gillis somt nog even voor je op waarom slideshows (die je vaak niet kan stoppen) geen goed idee zijn.

CAPTCHA

Formulieren worden in het algemeen goed gecodeerd. Maar helaas eindigen 5 sites hun formulier met een CAPTCHA. Niemand lost graag een CAPTCHA op, voor sommigen onder ons zijn ze onmogelijk. En ja, ook Google's ReCAPTCHA is helaas problematisch.

FeWeb Excellence Award

Fijn om te zien dat het bedrijven zijn met aandacht voor webtoegankelijkheid (Erkende bouwers) die ook met de prijzen gaan lopen.

Reageer als eerste

AnySurfer, WCAG, de Europese richtlijn en de Belgische wet

Sophie Schuermans op 06/08/2018

De Europese richtlijn inzake de toegankelijkheid van de websites en mobiele applicaties van overheidsinstanties moet tegen 23/09/2018 omgezet zijn in Belgische wetgeving. Wat houdt dat precies in? Voldoet een website met het AnySurferlabel aan de wet? Wat moet er nog gebeuren?

Wat eist de Europese richtlijn?

De richtlijn zegt dat alle overheidswebsites en mobiele applicaties waarneembaar, bedienbaar, begrijpelijk en robuust moeten zijn (zie artikel 4). Een manier om dit te bereiken is door te voldoen aan een geharmoniseerde Europese norm. Het probleem is dat die norm nog niet officieel bestaat. Er is op dit moment wel een "final draft", namelijk EN 301 549 V2.1.1 (2018-02) Accessibility requirements for ICT products and services.

  • In afwachting van de publicatie van die geharmoniseerde Europese norm, verwijst de richtlijn naar EN 301 549 V1.1.2 (2015-04). Die norm volgt WCAG 2.0 niveau A en AA.
  • Zodra de geharmoniseerde Europese norm is gepubliceerd, wordt deze de nieuwe norm om te voldoen aan de richtlijn. Die norm volgt WCAG 2.1 niveau A en AA.

Wat is WCAG 2.0 en 2.1?

WCAG (Web Content Accessibility Guidelines) is een officiële aanbeveling van het W3C (World Wide Web Consortium) om het web zo toegankelijk mogelijk te maken voor alle gebruikers. WCAG bestaat uit testbare succes criteria verdeeld in drie niveau's: A, AA en AAA.

  • WCAG 2.0 is sinds 2008 de internationale norm voor webtoegankelijkheid.
  • WCAG 2.1 is de nieuwe aanbeveling van het W3C sinds juni 2018. Het is een uitbreiding op WCAG 2.0. Alle succes criteria van WCAG 2.0 komen ook in versie 2.1 voor. Er zijn enkel nieuwe criteria toegevoegd om beter aan de noden van alle gebruikers te voldoen.

Waar komt het AnySurferlabel mee overeen?

Een website die het AnySurferlabel draagt, voldoet minstens aan WCAG 2.0 niveau A. Dat wil zeggen dat ze conform is aan de 25 succes criteria van WCAG 2.0 op niveau A.

Wat moet er dan nog gebeuren?

Om te voldoen aan de Europese richtlijn en de toekomstige Belgische wetgeving moet men bovenop de criteria van WCAG 2.0 niveau A, ook voldoen aan:

  • de 13 succes criteria van WCAG 2.0 niveau AA
  • de 12 nieuwe succes criteria van WCAG 2.1 niveau A en AA

Via de WCAG 2 Quick Reference kan je makkelijk op versie en gewenst niveau filteren.

Door het AnySurferlabel te behalen (WCAG 2.0 niveau A), is een groot deel van het werk al gedaan. Het kan zelfs dat de website al voldoet aan sommige AA-criteria van WCAG 2.0 of 2.1. Of dat ze niet van toepassing zijn op uw website.

13 succes criteria van WCAG 2.0 niveau AA

  • 1.2.4 Captions (Live): live video moet captions bevatten.
  • 1.2.5 Audio Description (Prerecorded): voorzie audiodescriptie voor video die anders niet begrijpelijk is.
  • 1.4.3 Contrast (Minimum): tekst moet voldoende contrasteren ten opzichte van de achtergrondkleur.
  • 1.4.4 Resize text: de gebruiker moet tekst kunnen vergroten of inzoomen via de browser zonder dat die onleesbaar of onzichtbaar wordt.
  • 1.4.5 Images of Text: afbeeldingen van tekst moeten vermeden worden, tenzij het niet op een andere manier kan.
  • 2.4.5 Multiple Ways: je moet een pagina op verschillende manieren kunnen terugvinden.
  • 2.4.6 Headings and Labels: koppen en labels moeten beschrijvend zijn.
  • 2.4.7 Focus Visible: de toetsenbordfocus moet zichtbaar zijn.
  • 3.1.2 Language of Parts: wanneer een onderdeel van de inhoud in een andere taal is, moet dat in de broncode aangegeven zijn.
  • 3.2.3 Consistent Navigation: navigatie die doorheen de website wordt herhaald, staat in dezelfde relatieve volgorde.
  • 3.2.4 Consistent Identification: componenten die dezelfde functionaliteit hebben, worden consistent geïdentificeerd doorheen de website.
  • 3.3.3 Error Suggestion: wanneer een formulier op fouten wordt gecontroleerd, worden indien mogelijk suggesties gegeven ter verbetering.
  • 3.3.4 Error Prevention (Legal, Financial, Data): voor juridische of financiële transacties moet de gebruiker zijn invoer kunnen controleren, verbeteren en bevestigen.

Punt 1.2.4 Captions (Live) wordt binnen de Europese richtlijn als een uitzondering beschouwd. Het valt onder WCAG 2.0 niveau AA maar is niet vereist voor conformiteit met de Europese richtlijn.

12 success criteria van WCAG 2.1 niveau A en AA

We hebben deze nieuwe criteria beknopt uitgeschreven in de blogpost WCAG 2.1 samenvatting.

Volgende stappen

Om u te helpen voldoen aan de succes criteria:

  • Structureren we onze rapporteren volgens WCAG 2.0 niveau A en AA en voegen we binnenkort de criteria van 2.1 toe.
  • We brengen onze opleidingen in lijn met WCAG 2.1 en bereiden een aparte module voor die focust op de nieuwe criteria.

Het AnySurferlabel blijft bestaan. Het komt overeen met WCAG 2.0 niveau A. De statuspagina van een website met een AnySurferlabel geeft aan aan welke norm de website voldoet. Wij helpen uw website voldoen aan eender welk niveau van toegankelijkheid.

Reageer als eerste

WCAG 2.1 samenvatting

Gijs Veyfeyken op 03/08/2018

Op 5 juni 2018 zijn de Web Content Accessibility Guidelines (WCAG) geüpdated. Versie 2.1 voegt 17 nieuwe succescriteria toe. We vatten de 12 criteria samen van niveau A en AA.

1.3.4 Orientation (AA)

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Citaat van een gebruiker:

Ik wil dit in landscape mode bekijken, maar mijn mobiel reageert niet wanneer ik het draai.

Verplicht de gebruiker niet om zijn mobiel of tablet in een bepaalde richting (portrait of landscape) te gebruiken. Iemand die zijn toestel bijvoorbeeld op een rolstoel heeft gemonteerd, kan het niet 90 graden draaien.

1.3.5 Identify Input Purpose (AA)

The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

Citaat van een gebruiker:

Ik vul mijn persoonlijke gegevens in dit formulier automatisch in via de browser. Snel en zonder fouten.

Geef formuliervelden een autocomplete-atribuut als er een waarde voor bestaat in de HTML5 specificatie onder Autofill. Dit is voorlopig de gemakkelijkste manier om aan dit punt te voldoen.

1.4.10 Reflow (AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;
  • Except for parts of the content which require two-dimensional layout for usage or meaning.

Citaat van een gebruiker:

Ik kan dit niet lezen. De tekst is veel te klein. Ik wil het vergroten zonder horizontaal te scrollen.

Dit komt neer op responsive webdesign. Alles moet blijven werken en leesbaar zijn zonder horizontaal te scrollen op een breedte van 320 CSS pixels. Makkelijkst te testen door het browservenster in te stellen op 1280 pixels en 400% in te zoomen (cmd of ctrl +).

1.4.11 Non-text Contrast (AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Citaat van een gebruiker:

De knoppen en icoontjes zijn moeilijk te herkennen. Ik heb meer contrast nodig.

Alle user interface componenten en belangrijke grafische elementen moeten een contrastratio van minimum 3 scoren ten opzichte van de omliggende kleur. Voorbeelden zijn invoervelden, knoppen, iconen en infografieken. Makkelijk te testen met een color contrast tool.

1.4.12 Text Spacing (AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Citaat van een gebruiker:

De tekst staat te dicht bij elkaar. Ik heb meer witruimte nodig om makkelijk te lezen.

De gebruiker moet de ruimte tussen letters, woorden, lijnen en paragrafen kunnen aanpassen. Dit kan bijvoorbeeld via een custom stylesheet of een browserextensie. Er mag geen tekst worden afgesneden of overlappen. Makkelijk te testen via deze bookmarklet van Steve Faulkner.

1.4.13 Content on Hover or Focus (AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Citaat van een gebruiker:

Ik kan de popup niet lezen. Die verschijnt buiten mijn scherm omdat ik vergroting gebruik en verdwijnt als ik er naartoe ga.

Dit punt geeft de gebruiker controle over de inhoud die bij hover of focus verschijnt. Die inhoud (bijvoorbeeld een tooltip) moet aan drie punten voldoen.

  • De tooltip verschijnt bovenop de bestaande inhoud en maakt die onleesbaar. De gebruiker kan escape drukken om de tooltip te verbergen.
  • De tooltip verschijnt als de muis boven een icoontje met een vraagteken staat. De tooltip mag niet verdwijnen als je de muis verplaatst van het icoontje naar de inhoud van de tooltip.
  • De tooltip mag niet automatisch verdwijnen, tenzij de gebruiker escape drukt of wegnavigeert.

2.1.4 Character Key Shortcuts (A)

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

Citaat van een gebruiker:

Als ik spraakcommando's in mijn webmail-applicatie gebruik, springt die onverwacht naar een andere e-mail.

'Character key shortcuts' of snelkoppelingen die aan een enkele toets zijn toegekend, zijn alleen nuttig in websites of applicaties die intensief worden gebruikt. Binnen Gmail spring je bijvoorbeeld met 'J' naar het volgende bericht. Wanneer je zulke snelkoppelingen toevoegt, moet de gebruiker ze kunnen uitschakelen, aan een andere toets koppelen of ze mogen enkel actief zijn wanneer de component de focus heeft.

2.5.1 Pointer Gestures (A)

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

Citaat van een gebruiker:

Ik heb last van trillingen en kan niet swipen op mijn mobiel. Geef me een knop met dezelfde functie.

Niet iedereen kan bewegingen maken die een bepaald pad vereisen (vegen, schudden) of meerdere vingers gebruiken (pinch). Voorzie een andere manier om deze acties uit te voeren, bijvoorbeeld knoppen om in en uit te zoomen op een kaart in plaats van te pinchen.

2.5.2 Pointer Cancellation (A)

For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event: The down-event of the pointer is not used to execute any part of the function;
  • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
  • Up Reversal: The up-event reverses any outcome of the preceding down-event;
  • Essential: Completing the function on the down-event is essential.

Citaat van een gebruiker:

Ik heb last van trillingen en activeer vaak de verkeerde knoppen op mobiel.

Je moet tijdens een klik met de muis of via touch de actie kunnen annuleren, bijvoorbeeld door geen actie te koppelen aan het down-event.

2.5.3 Label in Name (A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Citaat van een gebruiker:

Ik kan dit formulier niet verzenden via een spraakcommando. Het heeft een 'verzenden' knop, maar 'Klik op verzenden' werkt niet.

De naam van een component in de code moet overeenkomen met de tekst die de gebruiker ziet, of moet minstens die tekst bevatten. Een knop die bestaat uit een afbeelding "verzenden", moet als alt-tekst ook "verzenden" bevatten. Je mag de naam van een component wel aanvullen, maar niet vervangen. Een link "lees meer" mag eventueel aangevuld worden tot "lees meer over artikel xyz". Je mag die naam echter niet vervangen door een andere tekst. Bijvoorbeeld via aria-label="artikel xyz".

2.5.4 Motion Actuation (A)

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
  • Essential: The motion is essential for the function and doing so would invalidate the activity.

Citaat van een gebruiker:

De 'shake to undo' functie is niet nuttig voor mij, want ik bedien mijn tablet met mijn stem. Gelukkig is er ook een 'undo' knop.

Als een toepassing de beweging van het toestel of van de gebruiker detecteert om een functie uit te voeren, dan moet je dezelfde functie ook op een andere manier kunnen uitvoeren. Bijvoorbeeld via een knop. Het moet mogelijk zijn om de detectie van bewegingen stop te zetten.

4.1.3 Status Messages (AA)

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

Citaat van een gebruiker:

Ik gebruik een screenreader en probeer dit formulier te versturen. Er gebeurt niets en ik krijg geen foutmelding.

Blinde of slechtziende gebruikers zien enkel het deel van het scherm waar de focus op staat. Als er elders iets verschijnt, gaat dat verloren, behalve als de screenreader de instructie krijgt om het voor te lezen. Als er een belangrijke statusmelding verschijnt op het scherm zonder dat de focus ernaartoe springt, dan moet die bekend gemaakt worden voor assistive technology. Dit gebeurt door middel van juist gebruik van roles en properties (bijvoorbeeld role="alert"). Dit geldt niet voor meldingen die in een dialoogvenster verschijnen waar de focus naartoe springt.

1 reactie

Scalable Vector Graphics (SVG)

Gijs Veyfeyken op 13/07/2018

Scalable Vector Graphics (SVG) bieden bepaalde voordelen tegenover hun rastergebonden soortgenoten. Dankzij hun vectoriële aard kan je ze eindeloos herschalen zonder kwaliteitsverlies. Dit maakt ze gebruiksvriendelijk voor mensen die zichtproblemen hebben en vergrotingsprogramma's gebruiken.

Toch zijn SVG-bestanden niet vanzelf toegankelijk. Een aantal ingrepen zijn nodig om deze compatibel te maken met hulptechnologieën zoals schermlezers en toetsenbordnavigatie. Dit artikel bespreekt de belangrijkste aspecten van toegankelijke SVG's.

We overlopen enkele scenario's die veel voorkomen.

Decoratieve afbeelding

In dit voorbeeld is de SVG van het e-mail icoon decoratief want de informatie is ook als tekst beschikbaar.

<svg aria-hidden="true" focusable="false">...</svg>
<span>E-mail us at <a href="mailto:info@example.com">info@example.com</a></span>

Codepen svg decorative - aria-hidden

Screenshot:

e-mail icoon met tekst en link ernaast

  • We voegen aria-hidden="true" toe aan het SVG element zodat screenreaders het icoon negeren. role="presentation" is ook een optie.
  • Het focusable="false" attribuut lost een bug in Internet Explorer op.

Betekenisvolle afbeelding met SVG als source attribuut

Dit is het meest robuust en waterdicht wat betreft ondersteuning door screenreaders. Je gebruikt een normale afbeelding met een beknopte alt-tekst en verwijst naar de svg in het source attribuut. Simpel en makkelijk. Het enige nadeel is dat je geen delen van de svg kunt aanspreken. Bijvoorbeeld een deel van de afbeelding van kleur laten veranderen bij :focus en :hover.

<img src="http://label.anysurfer.be/images/label_AS_square.svg" alt="AnySurfer logo" />

Codepen svg meaningful via src

Screenshot:

AnySurfer logo

Betekenisvolle afbeelding als inline SVG

Je kan alternatieve tekst toevoegen aan inline SVG's met de combinatie van een title element, een aria-labelledby attribuut en een role img.

<svg role="img" aria-labelledby ="logo" focusable="false">
  <title id="logo">AnySurfer logo</title>
  ...
</svg>

Codepen svg meaningful - aria

Screenshot:

logo AnySurfer

  • Voeg een title element toe aan je SVG die de afbeelding beschrijft. Het titel element moet de eerste child zijn van diens parent element: deze plaats je dus meteen na je svg tag. De titel heeft in deze context een gelijkaardige functie als het alt-attribuut van een standaard img element. De schermlezer zal deze gebruiken om de SVG-code te benoemen.
  • Laat het attribuut aria-labelledby verwijzen naar je title. Zo ben je zeker dat elke browser en schermlezer de link tussen de titel en de SVG legt.
  • Dankzij de toevoeging van role="img" weet een schermlezer, en dus ook de blinde gebruiker, dat het gaat om een afbeelding. Bepaalde browsers en schermlezers beseffen niet dat SVG-code een beeldrol heeft. Door een role toe te voegen, overschrijf je de mogelijk foute rol die de browser zelf aan de SVG geeft.
  • De SVG specificatie voorziet ook een desc (description) element voor afbeeldingen die een uitgebreide beschrijving vereisen. Plaats deze onder je title element en verwijs er op dezelfde manier naar met aria-labelledby. Een desc is overbodig voor normale, eenvoudige afbeeldingen.
  • Het focusable="false" attribuut lost een bug in Internet Explorer op.

Complexe afbeelding als inline SVG

<h2>Water consumptie</h2>
<svg role="img" aria-labelledby="diag" focusable="false">
	<title id="diag">Diagram water consumptie (tekstversie hieronder)</title>
		<g aria-hidden="true">
			<g>
				<g>...</g>
				<g>...</g>
				<g>...</g>
				<g>...</g>
				<g>...</g>
			</g>
</svg>

<table>
	<caption>Water consumptie</caption>
	...
</table>

Codepen svg complex aria

Screenshot:

diagram en tabel waterconsumptie

  • We volgen dezelfde principes als bij een simpele SVG en geven de SVG een beknopte omschrijving via het title element
  • We verbergen het g element wiens kinderen tekst bevatten zodat die wordt overgeslagen door screenreaders. Zonder de visuele context zijn die cijfers verwarrend.
  • Onder de SVG voegen we een tabel toe als tekstueel alternatief voor het diagram.

SVG in een link of button

Wanneer de SVG binnen een link of button staat, mag de SVG zelf genegeerd worden door screenreaders. We kunnen als alternatief een aria-label op de link of button plaatsen. Of kiezen voor de meest robuuste techniek, verborgen tekst.

In een link met verborgen tekst:

<a href="http://www.anysurfer.be">
<span class="visuallyhidden">AnySurfer startpagina</span> 
<svg role="presentation" focusable="false">
...
</svg>
</a>
.visuallyhidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
}

Codepen svg link hidden text

Screenshot:

logo AnySurfer

In een button met een aria-label:

<button aria-label="delete">
<svg role="presentation" focusable="false">
...
</svg>

Codepen svg button aria-label

Screenshot:

vuilbak icoon

Bugs

VoiceOver (screenreader op Mac) kondigt een SVG altijd aan als een "group" (Webkit bug), wat mogelijk verwarrend is.

IE11 bevat een veel voorkomende bug. SVG's krijgen namelijk focus wanneer je door een pagina tabt, ook wanneer deze geen link zijn. Dat los je op door focusable="false" toe te voegen.

Internet Explorer 11 wordt veel gebruikt door mensen met een handicap omdat deze browser compatibel is met vele soorten assistive technology, in tegenstelling tot Edge. Het is daarom belangrijk dat je website naar behoren werkt in IE.

Bronnen

Reageer als eerste