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.
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
.
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.
- 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>
- Bodite prepričani, da uporabite
for
inid
atributi nalabel
je ininput
tako, 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/>
- Č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/>
- 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;
}
- A
button
se uporablja za priklic dejanja, kot je pošiljanje obrazca. Uporabi! Ne ustvarjajte gumbov z uporabodiv
's. Adiv
po definiciji je ločnica. Nima lastnih lastnosti dostopnosti.
Predstavitev
Č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
Če ste razumeli zgornjo referenco, ste v dobri družbi. Glede na spletno stran JAWS je to na kratko:
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.
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/