To je 3. objava v majhni seriji, ki jo pripravljamo o dostopnosti obrazcev. Če ste zamudili 2. objavo, si oglejte Upravljanje osredotočenosti na uporabnika z :focus-visible. V tej objavi si bomo ogledali uporabo bralnika zaslona pri krmarjenju po obrazcu in tudi nekaj najboljših praks.

Kaj je bralnik zaslona?

Morda ste že slišali izraz »bralnik zaslona«, ko ste brskali po spletu. Morda trenutno celo uporabljate bralnik zaslona za izvajanje ročnih preizkusov dostopnosti izkušenj, ki jih gradite. Bralnik zaslona je vrsta AT ali podporne tehnologije.

Bralnik zaslona pretvori digitalno besedilo v sintetiziran govor ali izpis v Braillovi pisavi, ki ga običajno vidimo pri bralniku v Braillovi pisavi.

V tem primeru bom uporabljal Mac VO. Mac VO (VoiceOver) je vgrajen v vse naprave Mac; Sistemi iOS, iPadOS in macOS. Odpiranje VO se lahko razlikuje glede na vrsto naprave, v kateri uporabljate macOS. Macbook Pro, ki poganja VO, na katerem to pišem, nima vrstice na dotik, zato bom uporabljal tipke za bližnjice glede na strojno opremo.

Spinning Up VO na macOS

Če uporabljate posodobljen Macbook Pro, bo tipkovnica na vašem računalniku videti nekako tako, kot je prikazano na spodnji sliki.

Začeli boste tako, da držite cmd tipko in nato trikrat na hitro pritisnite Touch ID.

Če uporabljate MBP (MacBook Pro) z vrstico TouchBar, boste uporabili bližnjico cmd+fn+f5 za vklop VO. Če uporabljate tradicionalno tipkovnico z namiznim ali prenosnim računalnikom, morajo biti tipke enake ali pa boste morali vklopiti VO v nastavitvah dostopnosti. Ko je VO vklopljen, vas bo pozdravilo to pogovorno okno skupaj z vokaliziranim uvod v VO.

Če kliknete gumb »Uporabi VoiceOver«, ste na dobri poti, da uporabite VO za testiranje svojih spletnih mest in aplikacij. Ne pozabite, da je VO optimiziran za uporabo s Safarijem. Ob tem se prepričajte, da ko izvajate preizkus bralnika zaslona, ​​preverite, ali je Safari brskalnik, ki ga uporabljate. To velja tudi za iPhone in iPad.

Obstajata dva glavna načina, kako lahko uporabite VO od začetka. Osebno ga uporabljam tako, da se pomaknem na spletno mesto in uporabim kombinacijo tab, control, option, shift in puščične tipke, lahko samo s temi tipkami učinkovito krmarim po izkušnji.

Drug pogost način za krmarjenje po izkušnjah je uporaba VoiceOver Rotor. Rotor je funkcija, zasnovana za navigacijo neposredno do mesta, kjer želite biti v izkušnji. Z uporabo Rotorja se boste izognili prehodu skozi celotno spletno mesto, pomislite na to kot na »Izberite svojo lastno avanturo«.

Modifier Keys

Modifikacijske tipke so način uporabe različnih funkcij v VO. Privzeta modifikacijska tipka oz VO is control + option vendar ga lahko spremenite v Caps Lock ali pa izberete obe možnosti za uporabo med seboj.

Uporaba rotorja

Če želite uporabiti Rotor, morate uporabiti kombinacijo modifikacijskih tipk in črke "U". Zame je moj modifikacijski ključ caps lock. pritisnem caps lock + U in rotor se mi zavrti. Ko se pojavi rotor, se lahko pomaknem do katerega koli želenega dela izkušnje s puščicama levo in desno.

[Vgrajeni vsebina]

Krmarjenje po ravni naslova

Še en lep način za krmarjenje po izkušnji je raven naslova. Če uporabljate kombinacijo modifikacijskih tipk + cmd + H lahko prečkate strukturo dokumenta na podlagi ravni naslova. Po dokumentu se lahko premaknete tudi nazaj s pritiskom na shift v zaporedju tako, modifikacijske tipke + shift + cmd + H.

[Vgrajeni vsebina]

Zgodovina in najboljše prakse

Obrazci so eden najmočnejših izvornih elementov, ki jih imamo v HTML. Ne glede na to, ali nekaj iščete na strani, oddate obrazec za nakup ali oddate anketo. Obrazci so temelj spleta in so bili katalizator, ki je v naše izkušnje vnesel interaktivnost.

Zgodovina spletnega obrazca sega v september 1995, ko je bil predstavljen v Specifikacija HTML 2.0. Nekateri pravijo dobri stari časi spleta, vsaj jaz tako pravim. Stephanie Stimac je napisala izjemen članek o Smashing Magazine z naslovom "Standardizacija Select And Beyond: preteklost, sedanjost in prihodnost izvornih kontrolnikov obrazcev HTML".

Sledi 5 najboljših praks, ki jih morate upoštevati pri izdelavi dostopnega obrazca za splet.

1. Prepričajte se, da uporabljate element obrazca. Obrazci so privzeto dostopni in jih je treba vedno uporabljati namesto elementov div.

<form>
  <!-- Form controls are nested here. -->
</form>

2. Bodite prepričani, da uporabite for in id atributi na labelje in inputtako, da so povezani. Na ta način, če kliknete/tapnete oznako, se fokus premakne na vnos in lahko začnete tipkati.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Če je polje zahtevano, da je obrazec popoln, uporabite zahtevani atribut in zahtevan atribut aria. To bo omejilo pošiljanje obrazca. Atribut aria-required pomožni tehnologiji izrecno pove, da je polje obvezno.

<input type="text" id="name" name="name" required aria-required/>

4. Uporabi, :focus, :focus-within in :focus-visible Psevdo razredi CSS za upravljanje in prilagajanje, kako uporabnik prejme 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 se uporablja za priklic dejanja, kot je pošiljanje obrazca. Uporabi! Ne ustvarjajte gumbov z uporabo div's. A div po definiciji je ločnica. Nima lastnih lastnosti dostopnosti.

Predstavitev

[Vgrajeni vsebina]

Če želite preveriti kodo, pojdite na VoiceOver Demo GitHub repo. Če želite preizkusiti zgornjo predstavitev s svojim izbranim bralnikom zaslona, ​​preverite Krmarjenje po spletnem obrazcu z VoiceOver.

Programska oprema za bralnik zaslona

Spodaj je seznam različnih vrst programske opreme za branje zaslona, ​​ki jo lahko uporabljate v danem operacijskem sistemu. Če Mac ni vaša izbira, so na voljo možnosti za Windows in Linux ter naprave Android.

NVDA

NVDA je bralnik zaslona podjetja NV Access. Trenutno je podprt samo v osebnih računalnikih z operacijskim sistemom Microsoft Windows 7 SP1 in novejšim. Za več dostopa si oglejte Stran za prenos NVDA različice 2024.1 na spletni strani NV Access!

JAWS

"Potrebujemo boljši bralnik zaslona"

- Anonimno

Če ste razumeli zgornjo referenco, ste v dobri družbi. Glede na spletno stran JAWS je to na kratko:

»JAWS, Job Access With Speech, je najbolj priljubljen bralnik zaslona na svetu, razvit za uporabnike računalnikov, ki zaradi izgube vida ne morejo videti vsebine zaslona ali krmariti z miško. JAWS zagotavlja govor in Braillov izpis za najbolj priljubljene računalniške aplikacije na vašem računalniku. Lahko boste brskali po internetu, pisali dokument, brali e-pošto in ustvarjali predstavitve iz svoje pisarne, oddaljenega namizja ali od doma.«

Spletna stran JAWS

Preverite JAWS sami in če ta rešitev ustreza vašim potrebam, jo ​​vsekakor poskusite!

Pripovedovalec

Pripovedovalec je vgrajena rešitev bralnika zaslona, ​​ki je priložena sistemu WIndows 11. Če se odločite, da ga boste uporabljali kot izbrani bralnik zaslona, ​​je spodnja povezava za podporno dokumentacijo o njegovi uporabi.

Celoten vodnik po Pripovedovalcu

Orca

Orca je bralnik zaslona, ​​ki ga je mogoče uporabljati v različnih distribucijah Linuxa, ki izvajajo GNOME.

»Orca je brezplačen, odprtokoden, prilagodljiv in razširljiv bralnik zaslona, ​​ki omogoča dostop do grafičnega namizja prek govora in osveževalne brajice.

Orca deluje z aplikacijami in kompleti orodij, ki podpirajo vmesnik ponudnika storitev podporne tehnologije (AT-SPI), ki je primarna infrastruktura podporne tehnologije za Linux in Solaris. Aplikacije in kompleti orodij, ki podpirajo AT-SPI, vključujejo komplet orodij GNOME Gtk+, komplet orodij Swing platforme Java, LibreOffice, Gecko in WebKitGtk. Prizadevamo si za podporo AT-SPI za komplet orodij KDE Qt.«

Spletna stran Orca

TalkBack

Google TalkBack je bralnik zaslona, ​​ki se uporablja v napravah Android. Če želite več informacij o vklopu in uporabi, preberite ta članek na spletnem mestu za podporo dostopnosti za Android.

Browser Support

Če iščete dejansko podporo brskalnika za elemente HTML in atribute ARIA (Accessible Rich Internet Application), predlagam caniuse.com za HTML in Podpora za dostopnost za ARIA da dobite najnovejše 4-1-1 o podpori brskalnika. Ne pozabite, da če brskalnik ne podpira te tehnologije, je verjetno, da je tudi bralnik zaslona ne podpira.

DigitalA11Y lahko s svojim člankom pomaga povzeti informacije o brskalniku in bralniku zaslona,  Bralniki zaslona in brskalniki! Katera je najboljša kombinacija za testiranje dostopnosti?

Moj meni

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

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
• PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
• PlatoESG. Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
• PlatoHealth. Obveščanje o biotehnologiji in kliničnih preskušanjih. Dostopite tukaj.
• vir: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/