Dette er det 3. indlæg i en lille serie, vi laver om formulartilgængelighed. Hvis du gik glip af 2. indlæg, så tjek ud Håndtering af brugerfokus med :focus-visible. I dette indlæg skal vi se på brugen af en skærmlæser, når du navigerer i en formular, og også nogle bedste fremgangsmåder.
Hvad er en skærmlæser?
Du har måske hørt udtrykket "skærmlæser", mens du har bevæget dig rundt på nettet. Du bruger måske endda en skærmlæser i øjeblikket til at køre manuelle tilgængelighedstests på de oplevelser, du bygger. En skærmlæser er en type AT eller hjælpeteknologi.
En skærmlæser konverterer digital tekst til syntetiseret tale eller Braille-output, som normalt ses med en Braille-læser.
I dette eksempel vil jeg bruge Mac VO. Mac VO (VoiceOver) er indbygget i alle Mac-enheder; iOS-, iPadOS- og macOS-systemer. Afhængigt af den type enhed, du kører macOS på, kan åbningen af VO variere. Macbook Pro, der kører VO, jeg skriver dette på, har ikke berøringslinjen, så jeg vil bruge genvejstasterne i henhold til hardwaren.
Spinning Up VO på macOS
Hvis du bruger en opdateret Macbook Pro, vil tastaturet på din maskine ligne billedet nedenfor.
Du starter med at holde nede cmd og tryk derefter på Touch ID tre gange hurtigt.
Hvis du er på en MBP (MacBook Pro) med en TouchBar, skal du bruge genvejen cmd+fn+f5 for at slå VO til. Hvis du bruger et traditionelt tastatur med din stationære eller bærbare computer, skal tasterne være de samme, eller du bliver nødt til at slå VO til i tilgængelighedsindstillingerne. Når VO er slået til, vil du blive mødt med denne dialogboks sammen med en vokaliseret introduktion til VO.
Hvis du klikker på knappen "Brug VoiceOver" er du godt på vej til at bruge VO til at teste dine websteder og apps. En ting at huske på er, at VO er optimeret til brug med Safari. Når det er sagt, skal du sikre dig, når du kører din skærmlæsertest, at Safari er den browser, du bruger. Det gælder også for iPhone og iPad.
Der er to hovedmåder, du kan bruge VO fra starten på. Måden jeg personligt bruger det på er ved at navigere til en hjemmeside og bruge en kombination af tab, control, option, shift og piletaster, kan jeg navigere effektivt gennem oplevelsen alene med disse taster.
En anden almindelig måde at navigere i oplevelsen på er ved at bruge VoiceOver Rotor. Rotoren er en funktion designet til at navigere direkte derhen, hvor du ønsker at være i oplevelsen. Ved at bruge rotoren slipper du for at skulle krydse hele webstedet, tænk på det som et "Vælg dit eget eventyr".
ændringstaster
Ændringstaster er den måde, du bruger de forskellige funktioner i VO. Standardmodifikationstasten eller VO is control + option men du kan ændre det til caps lock eller vælge begge muligheder for at bruge i flæng.
Brug af rotoren
For at bruge rotoren skal du bruge en kombination af dine modifikationsnøgler og bogstavet "U". For mig er min modifikationsnøgle caps lock. jeg trykker caps lock + U og rotoren drejer op for mig. Når først rotoren kommer op, kan jeg navigere til enhver del af oplevelsen, som jeg ønsker, ved hjælp af venstre og højre pil.
Navigering efter overskriftsniveau
En anden smart måde at navigere i oplevelsen på er ved overskriftsniveau. Hvis du bruger kombinationen af dine modifikationstaster + cmd + H du kan krydse dokumentstrukturen baseret på overskriftsniveauer. Du kan også flytte dokumentet tilbage ved at trykke på shift i sekvensen som sådan, modifikatortasterne + shift + cmd + H.
Historie og bedste praksis
Formularer er et af de mest kraftfulde native elementer, vi har i HTML. Uanset om du søger efter noget på en side, indsender en formular for at købe noget eller indsender en undersøgelse. Formularer er en hjørnesten i nettet og var en katalysator, der introducerede interaktivitet til vores oplevelser.
Webformularens historie går tilbage til september 1995, da den blev introduceret i HTML 2.0 spec. Nogle siger nettets gode gamle dage, det siger jeg i hvert fald. Stephanie Stimac skrev en fantastisk artikel om Smashing Magazine med titlen “Standardisering af udvalg og hinsides: fortiden, nutiden og fremtiden for indbyggede HTML-formularkontroller".
Følgende er 5 bedste fremgangsmåder, du skal følge, når du bygger en tilgængelig formular til internettet.
- Sørg for, at du bruger et formularelement. Formularer er tilgængelige som standard og bør til enhver tid bruges over div'er.
<form>
<!-- Form controls are nested here. -->
</form>
- Sørg for at bruge
for,idattributter pålabels oginputså de er forbundet. På denne måde, hvis du klikker/trykker på etiketten, vil fokus skifte til input, og du kan begynde at skrive.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Hvis et felt er påkrævet for at formularen skal være fuldstændig, skal du bruge den påkrævede attribut og den aria-påkrævede attribut. Disse vil begrænse formularen i at blive indsendt. Den aria-påkrævede attribut fortæller eksplicit hjælpeteknikeren, at feltet er påkrævet.
<input type="text" id="name" name="name" required aria-required/>- Brug,
:focus,:focus-within,:focus-visibleCSS-pseudoklasser til at administrere og tilpasse, hvordan en bruger modtager fokus.
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
buttonbruges til at påkalde en handling, som at indsende en formular. Brug det! Opret ikke knapper ved hjælp afdiv's. ENdivper definition er en skillelinje. Det har ingen iboende tilgængelighedsegenskaber.
Demo
Hvis du vil tjekke koden ud, skal du navigere til VoiceOver Demo GitHub repo. Hvis du vil prøve demoen ovenfor med din valgte skærmlæser, så tjek ud Navigering af en webformular med VoiceOver.
Skærmlæser software
Nedenfor er en liste over forskellige typer skærmlæsersoftware, du kan bruge på dit givne operativsystem. Hvis en Mac ikke er din foretrukne maskine, er der muligheder derude for Windows og Linux, såvel som til Android-enheder.
NVDA
NVDA er en skærmlæser fra NV Access. Det er i øjeblikket kun understøttet på pc'er, der kører Microsoft Windows 7 SP1 og nyere. For mere adgang, tjek NVDA version 2024.1 downloadside på NV Access-webstedet!
JAWS
"Vi har brug for en bedre skærmlæser"
- Anonym
Hvis du forstod referencen ovenfor, er du i godt selskab. Ifølge JAWS hjemmeside er dette, hvad det er i en nøddeskal:
“JAWS, Job Access With Speech, er verdens mest populære skærmlæser, udviklet til computerbrugere, hvis synstab forhindrer dem i at se skærmindhold eller navigere med en mus. JAWS leverer tale og punktskrift til de mest populære computerprogrammer på din pc. Du vil være i stand til at navigere på internettet, skrive et dokument, læse en e-mail og oprette præsentationer fra dit kontor, fjernskrivebord eller hjemmefra."
Tjek selv JAWS ud og hvis den løsning passer til dine behov, så giv det bestemt et skud!
fortæller
Oplæser er en indbygget skærmlæserløsning, der leveres med Windows 11. Hvis du vælger at bruge denne som din foretrukne skærmlæser, er linket nedenfor til supportdokumentation om brugen.
Orca
Orca er en skærmlæser, der kan bruges på forskellige Linux-distributioner, der kører GNOME.
"Orca er en gratis, open source, fleksibel og udvidelsesbar skærmlæser, der giver adgang til det grafiske skrivebord via tale og genopfriskende braille.
Orca arbejder med applikationer og værktøjssæt, der understøtter Assistive Technology Service Provider Interface (AT-SPI), som er den primære hjælpeteknologiske infrastruktur til Linux og Solaris. Applikationer og værktøjssæt, der understøtter AT-SPI, inkluderer GNOME Gtk+-værktøjssættet, Java-platformens Swing-værktøjssæt, LibreOffice, Gecko og WebKitGtk. AT-SPI-understøttelse af KDE Qt-værktøjssættet forfølges."
Tal tilbage
Google TalkBack er den skærmlæser, der bruges på Android-enheder. For mere information om at tænde og bruge det, tjek denne artikel på Android Accessibility Support Site.
Browser Support
Hvis du leder efter faktisk browserunderstøttelse af HTML-elementer og ARIA-attributter (Accessible Rich Internet Application), foreslår jeg caniuse.com til HTML , Tilgængelighedsstøtte til ARIA for at få den seneste 4-1-1 om browsersupport. Husk, at hvis browseren ikke understøtter teknologien, er der stor sandsynlighed for, at skærmlæseren heller ikke gør det.
DigitalA11Y kan hjælpe med at opsummere browser- og skærmlæseroplysninger med deres artikel, Skærmlæsere og browsere! Hvilken er den bedste kombination til tilgængelighedstest?
Links
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
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
- PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
- PlatoESG. Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
- PlatoHealth. Bioteknologiske og kliniske forsøgs intelligens. Adgang her.
- Kilde: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
