Dit is het derde bericht in een kleine serie die we maken over de toegankelijkheid van formulieren. Als je het 3e bericht hebt gemist, kijk dan eens Gebruikersfocus beheren met :focus-visible. In dit bericht gaan we kijken naar het gebruik van een schermlezer bij het navigeren door een formulier, en ook naar enkele best practices.
Wat is een schermlezer?
U heeft wellicht de term ‘schermlezer’ gehoord terwijl u op internet rondliep. Mogelijk gebruikt u op dit moment zelfs een schermlezer om handmatige toegankelijkheidstests uit te voeren op de ervaringen die u aan het bouwen bent. Een schermlezer is een type AT of ondersteunende technologie.
Een schermlezer zet digitale tekst om in synthetische spraak of braille-uitvoer, wat vaak voorkomt bij een braillelezer.
In dit voorbeeld gebruik ik Mac VO. Mac VO (VoiceOver) is ingebouwd in alle Mac-apparaten; iOS-, iPadOS- en macOS-systemen. Afhankelijk van het type apparaat waarop u macOS gebruikt, kan het openen van VO verschillen. De Macbook Pro waarop VO draait waarop ik dit schrijf, heeft geen aanraakbalk, dus ik zal de sneltoetsen gebruiken afhankelijk van de hardware.
VO draaien op macOS
Als u een bijgewerkte Macbook Pro gebruikt, ziet het toetsenbord op uw machine er ongeveer uit als in de onderstaande afbeelding.
U begint door de knop ingedrukt te houden cmd -toets en druk vervolgens driemaal snel op de Touch ID.
Als je een MBP (MacBook Pro) met TouchBar gebruikt, gebruik je de snelkoppeling cmd+fn+f5 om VO in te schakelen. Als u een traditioneel toetsenbord gebruikt met uw desktop of laptop, moeten de toetsen hetzelfde zijn, anders moet u VO inschakelen in de toegankelijkheidsinstellingen. Zodra VO is ingeschakeld, wordt u begroet met dit dialoogvenster samen met een gesproken stem kennismaking met VO.
Als u op de knop ‘Gebruik VoiceOver’ klikt, bent u goed op weg om VO te gebruiken om uw websites en apps te testen. Eén ding om in gedachten te houden is dat VO is geoptimaliseerd voor gebruik met Safari. Dat gezegd hebbende, zorg ervoor dat wanneer u uw schermlezertest uitvoert, Safari de browser is die u gebruikt. Dat geldt ook voor de iPhone en iPad.
Er zijn twee manieren waarop u VO vanaf het begin kunt gebruiken. De manier waarop ik het persoonlijk gebruik, is door naar een website te navigeren en een combinatie van de tab, control, option, shift en pijltjestoetsen, kan ik alleen met deze toetsen efficiënt door de ervaring navigeren.
Een andere veelgebruikte manier om door de ervaring te navigeren is door gebruik te maken van de VoiceOver-rotor. De Rotor is een functie die is ontworpen om rechtstreeks naar de plek te navigeren waar u zich in de ervaring wilt bevinden. Door de Rotor te gebruiken, hoef je niet meer door het hele terrein te reizen, zie het als een “Kies je eigen avontuur”.
Modificatietoetsen
Modificatietoetsen zijn de manier waarop u de verschillende functies in VO gebruikt. De standaard wijzigingstoets of VO is control + option maar u kunt dit wijzigen in Caps Lock of beide opties door elkaar gebruiken.
Het gebruik van de rotor
Om de Rotor te gebruiken, moet u een combinatie van uw modificatietoets(en) en de letter “U” gebruiken. Voor mij is mijn modificatiesleutel caps lock. ik druk caps lock + U en de Rotor draait voor mij. Zodra de Rotor verschijnt, kan ik met de pijlen naar links en naar rechts naar elk deel van de ervaring navigeren dat ik wil.
Navigeren op kopniveau
Een andere handige manier om door de ervaring te navigeren is op kopniveau. Als u de combinatie van uw modificatietoetsen + cmd + H u kunt de documentstructuur doorlopen op basis van kopniveaus. U kunt ook terug naar boven in het document gaan door op te drukken shift in de reeks als volgt, modificatietoetsen + shift + cmd + H.
Geschiedenis en beste praktijken
Formulieren zijn een van de krachtigste native elementen die we in HTML hebben. Of u nu iets op een pagina zoekt, een formulier indient om iets te kopen of een enquête indient. Formulieren vormen een hoeksteen van het web en waren een katalysator die interactiviteit in onze ervaringen introduceerde.
De geschiedenis van het webformulier gaat terug tot september 1995, toen het werd geïntroduceerd in de HTML 2.0-specificatie. Sommigen zeggen de goede oude dagen van het internet, tenminste dat zeg ik. Stephanie Stimac schreef er een geweldig artikel over Smashing Magazine getiteld, "Selecteren en verder standaardiseren: het verleden, het heden en de toekomst van native HTML-formulierbesturingselementen'.
Hieronder volgen vijf best practices die u kunt volgen bij het bouwen van een toegankelijk formulier voor internet.
- Zorg ervoor dat u een formulierelement gebruikt. Formulieren zijn standaard toegankelijk en moeten te allen tijde via div's worden gebruikt.
<form>
<!-- Form controls are nested here. -->
</form>
- Gebruik zeker de
forenidattributen aanlabeleninputzodat ze met elkaar verbonden zijn. Op deze manier verschuift de focus naar de invoer als u op het label klikt/tikt en kunt u beginnen met typen.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Als een veld vereist is om het formulier compleet te maken, gebruik dan het vereiste attribuut en het aria-required attribuut. Deze zorgen ervoor dat het formulier niet kan worden verzonden. Het attribuut aria-required vertelt de ondersteunende technologie expliciet dat het veld vereist is.
<input type="text" id="name" name="name" required aria-required/>- Gebruik de,
:focus,:focus-withinen:focus-visibleCSS-pseudoklassen om te beheren en aan te passen hoe een gebruiker focus krijgt.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttonwordt gebruikt om een actie uit te voeren, zoals het indienen van een formulier. Gebruik het! Maak geen knoppen metdiv'S. Adivis per definitie een deler. Het heeft geen inherente toegankelijkheidseigenschappen.
Demo
Als je de code wilt bekijken, navigeer dan naar de VoiceOver-demo GitHub-opslagplaats. Als je de bovenstaande demo wilt uitproberen met de schermlezer van je keuze, ga dan naar Navigeren door een webformulier met VoiceOver.
Schermlezersoftware
Hieronder vindt u een lijst met verschillende soorten schermlezersoftware die u op uw specifieke besturingssysteem kunt gebruiken. Als een Mac niet jouw favoriete machine is, zijn er opties voor Windows en Linux, maar ook voor Android-apparaten.
NVDA
NVDA is een schermlezer van NV Access. Het wordt momenteel alleen ondersteund op pc's met Microsoft Windows 7 SP1 en hoger. Voor meer toegang, bekijk de NVDA versie 2024.1 downloadpagina op de NV Access-website!
JAWS
“We hebben een betere schermlezer nodig”
- Anoniem
Als u de bovenstaande referentie heeft begrepen, bevindt u zich in goed gezelschap. Volgens de JAWS-website is dit in een notendop:
“JAWS, Job Access With Speech, is 's werelds populairste schermlezer, ontwikkeld voor computergebruikers wier gezichtsvermogen hen verhindert de scherminhoud te zien of met een muis te navigeren. JAWS biedt spraak- en braille-uitvoer voor de meest populaire computertoepassingen op uw pc. Je kunt op internet navigeren, een document schrijven, een e-mail lezen en presentaties maken vanaf je kantoor, op een externe desktop of thuis.”
Bekijk JAWS zelf en als die oplossing aan uw behoeften voldoet, probeer het dan zeker eens!
Verteller
Verteller is een ingebouwde schermlezeroplossing die wordt meegeleverd met WIndows 11. Als u ervoor kiest dit als uw favoriete schermlezer te gebruiken, is de onderstaande link bedoeld voor ondersteunende documentatie over het gebruik ervan.
Orca
Orca is een schermlezer die kan worden gebruikt op verschillende Linux-distributies waarop GNOME wordt uitgevoerd.
“Orca is een gratis, open source, flexibele en uitbreidbare schermlezer die toegang biedt tot het grafische bureaublad via spraak en verversbare braille.
Orca werkt met applicaties en toolkits die de Assistive Technology Service Provider Interface (AT-SPI) ondersteunen, de primaire ondersteunende technologie-infrastructuur voor Linux en Solaris. Toepassingen en toolkits die de AT-SPI ondersteunen, zijn onder meer de GNOME Gtk+ toolkit, de Swing-toolkit van het Java-platform, LibreOffice, Gecko en WebKitGtk. AT-SPI-ondersteuning voor de KDE Qt-toolkit wordt nagestreefd.”
Praat terug
Google TalkBack is de schermlezer die wordt gebruikt op Android-apparaten. Voor meer informatie over het inschakelen en gebruiken ervan, Bekijk dit artikel op de ondersteuningssite voor Android-toegankelijkheid.
Browserondersteuning
Als u op zoek bent naar daadwerkelijke browserondersteuning voor HTML-elementen en ARIA-attributen (Accessible Rich Internet Application), raad ik u aan caniuse.com voor HTML en Toegankelijkheidsondersteuning voor ARIA voor de laatste 4-1-1 over browserondersteuning. Houd er rekening mee dat als de browser de technologie niet ondersteunt, de kans groot is dat de schermlezer dat ook niet doet.
DigitaalA11Y kunnen helpen bij het samenvatten van browser- en schermlezerinformatie in hun artikel, Schermlezers en browsers! Wat is de beste combinatie voor toegankelijkheidstesten?
Kruisstukken
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
- PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
- PlatoESG. carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
- Plato Gezondheid. Intelligentie op het gebied van biotech en klinische proeven. Toegang hier.
- Bron: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
