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.

[Innebygd innhold]

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.

[Innebygd innhold]

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.

1. 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>

2. Sørg for å bruke for og id attributter på label's og inputer 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/>

3. 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/>

4. 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;
}

5. A button brukes til å påkalle en handling, som å sende inn et skjema. Bruk det! Ikke lag knapper med div's. EN div per definisjon er en skillelinje. Den har ingen iboende tilgjengelighetsegenskaper.

Demo

[Innebygd innhold]

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

"Vi trenger en bedre skjermleser"

- Anonym

Hvis du forsto referansen ovenfor, er du i godt selskap. I følge JAWS-nettstedet er dette i et nøtteskall:

«JAWS, Job Access With Speech, er verdens mest populære skjermleser, utviklet for databrukere hvis synstap hindrer dem i å se skjerminnhold eller navigere med en mus. JAWS gir tale og punktskrift for de mest populære dataapplikasjonene på din PC. Du vil kunne navigere på Internett, skrive et dokument, lese en e-post og lage presentasjoner fra kontoret, eksternt skrivebord eller hjemmefra.»

JAWS nettsted

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.

Komplett guide til Forteller

Orca

Orca er en skjermleser som kan brukes på forskjellige Linux-distribusjoner som kjører GNOME.

«Orca er en gratis, åpen kildekode, fleksibel og utvidbar skjermleser som gir tilgang til det grafiske skrivebordet via tale og oppdaterbar blindeskrift.

Orca jobber med applikasjoner og verktøysett som støtter Assistive Technology Service Provider Interface (AT-SPI), som er den primære hjelpeteknologiske infrastrukturen for Linux og Solaris. Applikasjoner og verktøysett som støtter AT-SPI inkluderer GNOME Gtk+-verktøysettet, Java-plattformens Swing-verktøysett, LibreOffice, Gecko og WebKitGtk. AT-SPI-støtte for KDE Qt-verktøysettet forfølges."

Orca nettsted

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/