Accessibility guide for developers/nl

Toegankelijkheid is belangrijk voor onze gebruikers. Wij kunnen het verbeteren door een paar simpele regels in acht te nemen. Het is moeilijk te beschrijven omdat er geen vaste regels of algemeen aanvaarde standaarden zijn die consistent werken en voor alle gebruikers hetzelfde uitpakken. Het is niet de bedoeling om hier een discussie te houden over een mogelijk probleem met de toegankelijkheid van de MediaWiki. We proberen het te beperken tot technische keuzes en dingen die je moet doen of juist niet moet doen om problemen met de toegankelijkheid te voorkomen.

Voor het ontwikkelen van code, zouden dit de algemene regels kunnen zijn:


 * Probeer onze gebruikers erbij te betrekken
 * Probeer de toegankelijkheid goed te houden, maar bedenk wel dat het zonder goede functionaliteit minder belangrijk is.
 * We proberen een aanpak te vinden van voortdurende verbetering boven die van elegante afbraak.
 * Implementeer zaken die technisch klinken



Hoe bereik je een goede toegankelijkheid?
Enkele belangrijke concepten waar je aan moet denken.



Toegankelijkheid kan op meerdere manieren gemeten worden
Overweeg het volgende:


 * Zorg dat de tekst begrijpelijk en logisch is en netjes wordt weergeven, maak het ook niet te moeilijk.
 * Gebruiker kunnen een schermlezer gebruiken, of een loep, een andere contrast gebruiken, de tekst laten voorlezen of een ander apparaat gebruiken dan een gewoon toetsenbord of muis.
 * Het moet haalbaar zijn, aanspreekbaar, lokaal, taal, hardware, enz.

Toegankelijkheid is niet alleen iets beperkt tot toetsenbord of schermlezer. We kijken bij dit onderwerp meestal vooral hier naar. Verbeteringen hierin zijn de basis voor andere mogelijke verbeteringen.

Problemen hierbij zijn vaak ontstaan door het ontwerp, strategische keuzes, het verkeerd inschatten van de te bereiken doelgroep gebruikers, enz. Dit is allemaal moeilijk te vatten in vaste regels die overal in de MediaWiki zouden moeten gelden, daarom wagen wij ons daar hier op deze pagina niet aan.



Toetsenbord navigatie
We noemen het hier toetsenbord navigatie, maar wat we bedoelen is: vertrouw er niet op dat er toetsenbord gebruikt wordt, het kan ook een muis of een touchpad zijn.


 * Met de navigatie kan de gebruiker de focus veranderen en acties laten uitvoeren.
 * Een element dat een tab kan zijn kan de focus krijgen.
 * Alles wat je met een muis zou kunnen doen, moet je ook met het toetsenbord kunnen doen.
 * De informatie van de navigatie kan het werken met schermlezers ondersteunen en verbeteren.



Schermlezer

 * Een schermlezer gebruikt een andere 'cursor', die meestal de logische structuur van het DOM volgt.
 * De focus volgt over het algemeen de cursor van de schermlezer en andersom, het is niet hetzelfde
 * U kunt het betreffende element volgen door in Chrome een live (productie) expressie te maken (klik op het oog in de werkbalk)
 * Een schermlezer gebruikt de 'toegankelijkheid' API's, die je kunt beschouwen als een invoer/uitvoer 'beeld' bovenop het normale DOM.
 * ARIA zijn DOM opmerkingen (annotations) die uitbreiden of manipuleren hoe de logica van de DOM wordt omgezet in API's. Het is geen alternatief voor het schrijven van goede HTML en JavaScript. Toetsenbord navigatie wordt simpel bereikt door de logische DOM volgorde. Meer informatie over ARIA: w3.org uitleg en MDN uitleg.
 * Een schermlezer wordt niet beperkt door het navigeren via de logische DOM structuur, het is gewoon de standaard.
 * Een schermlezer kan lezen wat bijvoorbeeld onder de plek van de muis staat.
 * VoiceOver voor iOS gebruikt een cursor die is beïnvloedt door de plaats van de duim en de bewegingen over het touchpad.
 * De software van de meeste schermlezers heeft een aanvullende modus waar je op meerdere manieren kunt navigeren via markeringen, een inhoudsopgave of door gebruikergedefinieerde 'bladwijzers' in een pagina.
 * Uit het bovenstaande punt van meerdere navigatiemethoden volgt: Er is een begin en een eind, maar ook links, rechts, boven en onder. Vertrouw hier niet teveel op in uw communicatie, maar we kunnen het bestaan ervan niet ontkennen. Verwar de visuele mogelijkheden van de gebruiker niet met het ruimtelijk inzicht van de screenreader aan de gebruiker kan geven. Voorbeeld:
 * een lange zin [afbeelding] de bovenstaande afbeelding toont...
 * een lange zin [afbeelding] [afbeelding] de linker afbeelding toont, de rechter afbeelding toont...
 * een lange zin [afbeelding][afbeelding] de rechter afbeelding toont, de linker afbeelding toont...
 * een lange zin [afbeelding] [afbeelding] de bovenstaande afbeelding toont...
 * a long sentence [image][image][image] the left image shows, the right image shows...
 * a long sentence [image][image] something totally different. the left image shows, the right image shows...



Richtlijnen ontwikkelen
Er zijn meerdere standaarden met betrekking tot de benaderbaarheid. Eerlijk gezegd hebben de meeste daarvan, hoewel het gaat zaken identificeren, nog altijd significante problemen als het gaat om technische oplossingen (Het zijn meer lelijke noodoplossingen). Dit leidde tot veel opwinding en onenigheid in de gemeenschap. Ook kunnen we kijken welke zaken niet controversieel zijn en waarom dat dan zo is. Het is gemakkelijker om doelen te halen als we de zaken niet zinloos scherp zetten.



Gebruik en biedt altijd aan

 * Net semantisch HTML-element
 * Gebruik HTML-elementen voor het bedoelde doel. Bijvoorbeeld:
 * Use and not  or  or  with a click handler
 * If you feel the need to bold something, consider if it is not more appropriate to use a header or a  element


 * Logische structuur kop
 * Alle pagina's moeten altijd een logische en consistente structuur van de kop hebben. Kopregel (headings) zijn een van de primaire hulpmiddelen voor navigatie die door screenreader gebruikers worden gebruikt.
 * There should be no gaps in the nesting of the heading levels. (So no H2->H4.)
 * Headings should be descriptive
 * Headings should be unique within their own level. (There should not be two H3s with the same content under the same H2 section)
 * There should be separation between navigation and content


 * attribute for images with meaningful values
 * Als een afbeelding alleen voor de versiering is, gebruik dan een lege waarde voor het attribuut alt. Of gebruik daarvoor een CSS background afbeelding.
 * the image alt usually takes precedence over the title attribute of images and even over the title attribute of links that wrap an image.


 * attribute for links
 * Deze worden meestal als tooltip getoond.
 * Only use titles if they differ from the link text.
 * Most link titles are not actually spoken by screen readers, unless the reader has been explicitly configured this way.


 * ,  and   attributes
 * Using  and   enables selecting a proper voice in screen readers, picks the right spelling correction in browsers etc.


 * Sufficient contrast
 * Always check your colors for sufficient contrast. For text, a higher contrast is needed for smaller text (due to anti-aliasing).


 * Focus for keyboard navigation
 * Do not remove outline from focusable elements unless you define your own outline for the  state.
 * Don't use  otherwise.
 * If you define any pseudo class, like  or , please also define a   style.


 * Keyboard navigation
 * Interactive elements of a page should be navigable by keyboard. Please make sure tab key navigation is enabled in your browser and allows you to control each interactive element without making use of a pointing device.
 * Use  to make elements keyboard accessible, which are not keyboard accessible implicitly (Anything but, , , , , , ).
 * In this case also add a keydown handler responding to Enter (keyCode 13) and space (keyCode 32).
 * Use  to remove elements from accessibility. (use this on links that are labels for the action inside an  for instance)
 * Elements that are implicitly keyboard accessible will forward enter/space keydown to the click handler


 * Dialogs etc.

When not taking good care of accessibility, dialogs are some of the most inaccessible elements for screen reader and keyboard users. Spend some time on this.


 * The element that opens the dialog should have
 * The dialog itself should have
 * When opening the dialog, remember last focused element and shift focus to the first focusable tabbable element inside the dialog
 * When the dialog is modal, make it impossible to interact with the rest of the page
 * Capture clicks outside the dialog and ignore them or let them dismiss the dialog
 * Make sure you cannot tab to links or input elements outside of dialog
 * Make elements outside of the dialog unreachable for screen reader, by using aria-hidden
 * Make sure there is a close mode (Esc key and a focusable close button with a descriptive title)
 * Closing should return the (keyboard) focus to the original focus point that you stored when you opened the dialog. For screen readers to return to the same point, be sure to specify the right owner of the dialog, if you have not inserted the dialog in DOM order.
 * Read up: Aria modals, Aria modal dialog, ARIA nonmodal dialog, ARIA tooltips.
 * Read up: Aria modals, Aria modal dialog, ARIA nonmodal dialog, ARIA tooltips.


 * WCAG 2.1 guidelines
 * Follow wherever possible
 * And its accompanying documents:
 * A guide to understanding and implementing Web Content Accessibility Guidelines 2.0
 * WCAG 2.1 supplement
 * Techniques and Failures for Web Content Accessibility Guidelines 2.0
 * WCAG 2.1 supplement



Doe niet

 * There is common advice to use  to push something (often the labels of icon buttons) out of the viewport for visual users and still have it in the accessibility DOM.  is variant of this. This is BAD advice.
 * This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. ( If needed,  is preferred over   to avoid this ).
 * VoiceOver on mobile is unable to use this text as a fallback, since it is a 'positional' screen reader. You cannot move your finger over this text and thus the text will not be read either. (aria-label is often the better choice).
 * Lastly, this enlarges the render surface needed to calculate the final webpage and this can impact performance on mobile devices.
 * Insightful overview of 'hide text offscreen' tricks are given by Jonathan Snook.
 * Things should not be repeated often. If you have a 100 links on a page that can open a dialog, then don't add 100 labels to those 100 links telling the user that it can be used to open a dialog. Telling a user how to use/what to do with the interface is a good thing, doing it consistently is simply annoying. Find a different way to explain it once (an  might be an idea in this case ?).
 * with an onclick handler. VO reads such JS as "internal link Hide". Use a proper button, or, with 'Space' and 'Enter' key handlers in the onclick. But no href attribute.
 * Do not nest interactive functionality inside another interactive element (links or buttons inside links). This confuses screen readers.

Voorkom

 * Unicode symbols
 * Most assistive technologies are not good with symbols. Therefore, try to avoid characters such as ↑, →‎ or more complex characters, because many screen reader won't understand them. If they are required, try to wrap with a span element with the title attribute, so that the title attribute can communicate the implicit meaning within the context to the reader.


 * Small fonts
 * Legibility is preferred. If you make something so small that it is hard to read, do you even need it to begin with? Also avoid small fonts with low or mediocre contrast values (even if they fall inside the WCAG guidelines, small sizes require more explicit contrast then large sizes, especially with anti aliasing enabled).


 * Unusually large fonts
 * If you make text much larger than normal, it can become similarly hard to read (unless it's very short). This applies mostly to body text, or anything that takes up more than a couple lines. But the larger the text is, the more lines it will take up.


 * tabIndex > 0
 * DOM order is preferred wherever possible. DOM order provides context for the actions.


 * Workaround
 * Traditionally, accomplishing 'full' accessibility has required a lot of workarounds for html itself, the browsers and even specific screenreader software. However these workarounds often come with side effects, make use of bugs or unspecified behavior and inevitably create technical debt.
 * MediaWiki, because of the users it seeks to serve, the amount of code, it's (lack) of funding, etc tends to prefer future proof code over code that easily breaks. As such it generally avoids workarounds even if that might sometimes limit the accessibility we can deliver. Decisions on this are often influenced by the relative audience of the feature in MediaWiki. If something is ubiquitous for all users a workaround is more warrented than if the feature affected is only used by a tiny part of the audience (for instance, reading a page vs modifying the configuration of the installation).

Overweeg

 * ARIA Roles
 * If a div or span behaves like an actual button use . also   and
 * Be careful with roles. For instance, don't add  to a  element, since the  element has an implicit , which will be overwritten. Instead use nested elements. Similarly for  which has an implicit
 * If a button creates a popupdialog, use.
 * Use  for contexts where this is not fully logical by itself (so everywhere except for labels in forms and headers in tables).
 * Avoid tables for layout purposes and test on smaller screen widths.
 * hide stuff: https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/
 * skip/jump to links



Zie ook

 * Wikimedia Design Style Guide: Accessibility principles
 * Open bugs and feature requests related to the accessibility in MediaWiki and other Wikimedia software
 * W3C Web Accessibility Initiative: Tips for Getting Started
 * W3C Web Accessibility Initiative: Web Accessibility Evaluation Tools List
 * Firefox Developer Tools: Accessibility Inspector
 * Chrome Developer Tools: Accessibility features
 * Accessibility and usability cleanup
 * Blogposts
 * Steps Towards an Accessible Web Form
 * Understanding WCAG Level
 * Software
 * WAVE, a Web accessibility evaluation tool
 * Accessibility simulation on MediaWiki. Experience a page as a color blind person would experience it.
 * https://www.deque.com/axe/ browser extension for accessibility auditing a page
 * https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ webapp for accessibility auditing. See also https://www.powermapper.com/tests/
 * University of Cambridge - Impairment simulator software (Microsoft Windows only)
 * Guides by 3rd parties
 * Designing accessible services by UK Home Office
 * Inclusive Design by Microsoft