Dette er det tredje innlegget i en liten serie vi gjør om skjematilgjengelighet. Hvis du gikk glipp av det andre innlegget, sjekk ut Administrere brukerfokus med :focus-visible. I dette innlegget skal vi se på bruk av en skjermleser når du navigerer i et skjema, og også noen beste fremgangsmåter.
Hva er en skjermleser?
Du har kanskje hørt begrepet "skjermleser" mens du har beveget deg rundt på nettet. Du kan til og med bruke en skjermleser for øyeblikket for å kjøre manuelle tilgjengelighetstester på opplevelsene du bygger. En skjermleser er en type AT eller hjelpeteknologi.
En skjermleser konverterer digital tekst til syntetisert tale eller blindeskrift, ofte sett med en blindeskriftleser.
I dette eksemplet skal jeg bruke Mac VO. Mac VO (VoiceOver) er innebygd i alle Mac-enheter; iOS-, iPadOS- og macOS-systemer. Avhengig av typen enhet du kjører macOS på, kan åpningen av VO variere. Macbook Pro som kjører VO jeg skriver dette på har ikke berøringslinjen, så jeg vil bruke hurtigtastene i henhold til maskinvaren.
Spinning Up VO på macOS
Hvis du bruker en oppdatert Macbook Pro, vil tastaturet på maskinen din se omtrent ut som bildet nedenfor.
Du starter med å holde nede cmd
og trykk deretter på Touch ID tre ganger raskt.
Hvis du er på en MBP (MacBook Pro) med en TouchBar, vil du bruke snarveien cmd+fn+f5
for å slå på VO. Hvis du bruker et tradisjonelt tastatur med din stasjonære eller bærbare datamaskin, bør tastene være de samme, eller du må slå på VO i tilgjengelighetsinnstillingene. Når VO er slått på, vil du bli møtt med denne dialogboksen sammen med en vokalisert introduksjon til VO.
Hvis du klikker på "Bruk VoiceOver"-knappen, er du på god vei til å bruke VO for å teste nettsidene og appene dine. En ting å huske på er at VO er optimalisert for bruk med Safari. Når det er sagt, sørg for når du kjører skjermlesertesten at Safari er nettleseren du bruker. Det gjelder iPhone og iPad også.
Det er to hovedmåter du kan bruke VO fra starten av. Måten jeg personlig bruker det på er ved å navigere til et nettsted og bruke en kombinasjon av tab, control, option, shift
og piltastene, kan jeg navigere gjennom opplevelsen effektivt med disse tastene alene.
En annen vanlig måte å navigere i opplevelsen på er å bruke VoiceOver Rotor. Rotoren er en funksjon designet for å navigere direkte dit du ønsker å være i opplevelsen. Ved å bruke rotoren slipper du å gå gjennom hele området, se på det som et "Velg ditt eget eventyr".
Spesialtaster
Modifikatortaster er måten du bruker de forskjellige funksjonene i VO. Standard modifikasjonstast eller VO
is control
+ option
men du kan endre den til caps lock eller velge begge alternativene for å bruke om hverandre.
Bruk av rotoren
For å bruke rotoren må du bruke en kombinasjon av modifikasjonstasten(e) og bokstaven "U". For meg er endringsnøkkelen min caps lock
. jeg trykker caps lock
+ U
og rotoren snurrer opp for meg. Når rotoren kommer opp, kan jeg navigere til hvilken som helst del av opplevelsen jeg vil bruke ved å bruke venstre og høyre pil.
Navigere etter overskriftsnivå
En annen fin måte å navigere i opplevelsen på er etter overskriftsnivå. Hvis du bruker kombinasjonen av modifikasjonstastene + cmd
+ H
du kan krysse dokumentstrukturen basert på overskriftsnivåer. Du kan også flytte dokumentet opp igjen ved å trykke shift
i sekvensen slik, modifikatortastene + shift
+ cmd
+ H
.
Historie og beste praksis
Skjemaer er et av de kraftigste native elementene vi har i HTML. Enten du søker etter noe på en side, sender inn et skjema for å kjøpe noe eller sender inn en spørreundersøkelse. Skjemaer er en hjørnestein i nettet, og var en katalysator som introduserte interaktivitet til våre erfaringer.
Historien til nettskjemaet går tilbake til september 1995 da det ble introdusert i HTML 2.0-spesifikasjon. Noen sier de gode gamle dagene med nettet, i det minste sier jeg det. Stephanie Stimac skrev en fantastisk artikkel om Smashing Magazine med tittelen “Standardisering av utvalg og utover: fortiden, nåtiden og fremtiden for innfødte HTML-skjemakontroller".
Følgende er 5 beste fremgangsmåter du bør følge når du bygger et tilgjengelig skjema for nettet.
- Pass på at du bruker et skjemaelement. Skjemaer er tilgjengelige som standard og bør brukes over div-er til enhver tid.
<form>
<!-- Form controls are nested here. -->
</form>
- Sørg for å bruke
for
ogid
attributter pålabel
's oginput
er slik at de er koblet sammen. På denne måten, hvis du klikker/trykker på etiketten, vil fokus skifte til inndata og du kan begynne å skrive.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- Hvis et felt kreves for at skjemaet skal være fullstendig, bruker du det påkrevde attributtet og det aria-påkrevde attributtet. Disse vil begrense at skjemaet sendes inn. Det aria-påkrevde attributtet forteller eksplisitt hjelpeteknikken at feltet er påkrevd.
<input type="text" id="name" name="name" required aria-required/>
- Bruke,
:focus
,:focus-within
og:focus-visible
CSS-pseudoklasser for å administrere og tilpasse hvordan en bruker mottar 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
button
brukes til å påkalle en handling, som å sende inn et skjema. Bruk det! Ikke lag knapper meddiv
's. ENdiv
per definisjon er en skillelinje. Den har ingen iboende tilgjengelighetsegenskaper.
Demo
Hvis du vil sjekke ut koden, naviger til VoiceOver Demo GitHub repo. Hvis du vil prøve demoen ovenfor med den valgte skjermleseren, sjekk ut Navigere i et nettskjema med VoiceOver.
Skjermleserprogramvare
Nedenfor er en liste over ulike typer skjermleserprogramvare du kan bruke på ditt gitte operativsystem. Hvis en Mac ikke er din valgte maskin, finnes det alternativer der ute for Windows og Linux, så vel som for Android-enheter.
NVDA
NVDA er en skjermleser fra NV Access. Det støttes foreløpig bare på PC-er som kjører Microsoft Windows 7 SP1 og nyere. For mer tilgang, sjekk ut NVDA versjon 2024.1 nedlastingsside på NV Access-nettstedet!
KJEVER
Hvis du forsto referansen ovenfor, er du i godt selskap. I følge JAWS-nettstedet er dette i et nøtteskall:
Sjekk ut JAWS selv og hvis den løsningen passer dine behov, prøv det definitivt!
fortelleren
Narrator er en innebygd skjermleserløsning som leveres med Windows 11. Hvis du velger å bruke denne som din foretrukne skjermleser, er lenken nedenfor for støttedokumentasjon om bruken.
Orca
Orca er en skjermleser som kan brukes på forskjellige Linux-distribusjoner som kjører GNOME.
Snakke tilbake
Google TalkBack er skjermleseren som brukes på Android-enheter. For mer informasjon om hvordan du slår den på og bruker den, sjekk ut denne artikkelen på Android Accessibility Support Site.
nettleser~~POS=TRUNC
Hvis du ser etter faktisk nettleserstøtte for HTML-elementer og ARIA-attributter (Accessible Rich Internet Application), foreslår jeg caniuse.com for HTML og Tilgjengelighetsstøtte for ARIA for å få den nyeste 4-1-1 på nettleserstøtte. Husk at hvis nettleseren ikke støtter teknologien, er sjansen stor for at skjermleseren ikke gjør det heller.
DigitalA11Y kan hjelpe med å oppsummere nettleser- og skjermleserinformasjon med artikkelen deres, Skjermlesere og nettlesere! Hva er den beste kombinasjonen for tilgjengelighetstesting?
lenker
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-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
- PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
- PlatoESG. Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
- PlatoHelse. Bioteknologisk og klinisk etterretning. Tilgang her.
- kilde: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/