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.
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.
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.
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 +).
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.
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.
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.
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.
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.
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.
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".
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.
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