Ez a 3. bejegyzés abban a kis sorozatban, amelyet az űrlapok hozzáférhetőségéről készítünk. Ha lemaradtál a 2. bejegyzésről, nézd meg A User Focus kezelése a :focus-visible segítségével. Ebben a bejegyzésben megvizsgáljuk a képernyőolvasó használatát az űrlapon való navigálás során, valamint néhány bevált gyakorlatot.
Mi az a képernyőolvasó?
Lehet, hogy hallotta már a „képernyőolvasó” kifejezést, miközben az interneten mozog. Jelenleg még az is előfordulhat, hogy képernyőolvasót használ, hogy manuális kisegítő lehetőségeket teszteljen az általa épített élményeken. A képernyőolvasó egyfajta AT vagy kisegítő technológia.
A képernyőolvasó a digitális szöveget szintetizált beszéddé vagy Braille-kimenetté alakítja, amelyet általában Braille-olvasóknál használnak.
Ebben a példában Mac VO-t fogok használni. A Mac VO (VoiceOver) minden Mac-eszközbe be van építve; iOS, iPadOS és macOS rendszerek. A macOS-t futtató eszköz típusától függően a VO megnyitása eltérő lehet. A VO-t futtató Macbook Pro, amelyen ezt írom, nem rendelkezik érintősávval, ezért a hardvernek megfelelő gyorsbillentyűket fogom használni.
A VO felpörgetése macOS-en
Ha frissített Macbook Pro-t használ, a gépe billentyűzete az alábbi képhez hasonlóan fog kinézni.
A gomb lenyomva tartásával kezdheti cmd
gombot, majd gyorsan háromszor nyomja meg a Touch ID gombot.
Ha MBP-t (MacBook Pro) használ TouchBarral, akkor a parancsikont fogja használni cmd+fn+f5
a VO bekapcsolásához. Ha hagyományos billentyűzetet használ asztali számítógépéhez vagy laptopjához, a billentyűknek azonosaknak kell lenniük, különben be kell kapcsolnia a VO funkciót a Kisegítő lehetőségek között. A VO bekapcsolása után ez a párbeszédpanel és egy hangjelzés fogadja Önt. bevezetés a VO-ba.
Ha rákattint a „VoiceOver használata” gombra, jó úton halad a VO használatával webhelyei és alkalmazásai tesztelésére. Egy dolgot szem előtt kell tartani, hogy a VO a Safarival való használatra van optimalizálva. Ennek ellenére a képernyőolvasó tesztjének futtatásakor győződjön meg arról, hogy a Safari az Ön által használt böngésző. Ez vonatkozik az iPhone-ra és az iPadre is.
Két fő módja van a VO használatának a kezdetektől fogva. Én személy szerint úgy használom, hogy egy webhelyre navigálok, és a következők kombinációját használom tab, control, option, shift
és a nyílbillentyűket, csak ezekkel a billentyűkkel hatékonyan navigálhatok az élményben.
Az élményben való navigálás másik gyakori módja a VoiceOver Rotor. A Rotor egy olyan funkció, amelyet arra terveztek, hogy közvetlenül oda navigáljon, ahová szeretne eljutni az élményben. A Rotor használatával kiküszöböli, hogy az egész helyszínt bejárja, gondolja úgy, mint „Válassza ki a saját kalandját”.
Modifier Keys
A módosító billentyűk segítségével használhatja a VO különböző funkcióit. Az alapértelmezett módosító billentyű ill VO
is control
+ option
de megváltoztathatja caps lockra, vagy kiválaszthatja mindkét lehetőséget, hogy felváltva használja.
A rotor használata
A Rotor használatához a módosító kulcs(ok) és az „U” betű kombinációját kell használnia. Nekem a módosító kulcsom az caps lock
. megnyomom caps lock
+ U
és a Rotor felpörög értem. Amint a Rotor feljön, a bal és jobb nyilak segítségével navigálhatok az élmény tetszőleges részére.
Navigálás címsorszint szerint
Az élményben való navigálás másik ügyes módja a címsorszint. Ha a módosító billentyűk + kombinációját használja cmd
+ H
fejlécszintek alapján járhatja be a dokumentum szerkezetét. A gomb megnyomásával vissza is léphet a dokumentumban shift
az ehhez hasonló sorrendben, módosító billentyűk + shift
+ cmd
+ H
.
Történelem és legjobb gyakorlatok
Az űrlapok az egyik legerősebb natív elem a HTML-ben. Akár keres valamit az oldalon, akár űrlapot küld el valami vásárlásához, akár felmérést küld be. Az űrlapok a web sarokkövei, és katalizátorként vezették be az interaktivitást az élményeinkbe.
A webes űrlap története 1995 szeptemberéig nyúlik vissza, amikor is a HTML 2.0 specifikáció. Egyesek azt mondják, hogy az internet jó ideje volt, legalábbis én ezt mondom. Stephanie Stimac írt egy fantasztikus cikket Smashing Magazine címmel:A Select and Beyond szabványosítása: A natív HTML űrlapvezérlők múltja, jelene és jövője".
Az alábbi 5 bevált gyakorlatot kell követni, amikor hozzáférhető űrlapot készítünk az internethez.
- Győződjön meg arról, hogy űrlapelemet használ. Az űrlapok alapértelmezés szerint elérhetők, és mindig div felett kell használni.
<form>
<!-- Form controls are nested here. -->
</form>
- Feltétlenül használja a
for
és aid
attribútumok belabel
ésinput
hogy összekapcsolódjanak. Így ha rákattint/koppint a címkére, a fókusz a bevitelre kerül, és elkezdheti a gépelést.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- Ha a mező kitöltése kötelező az űrlap kitöltéséhez, használja a kötelező attribútumot és az aria-required attribútumot. Ezek korlátozzák az űrlap elküldését. Az aria-required attribútum kifejezetten közli a segítő technológiával, hogy a mező kötelező.
<input type="text" id="name" name="name" required aria-required/>
- Használja a,
:focus
,:focus-within
és a:focus-visible
CSS pszeudoosztályok a felhasználó fókuszának kezeléséhez és testreszabásához.
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
művelet meghívására szolgál, például űrlap beküldésére. Használd! Ne hozzon létre gombokat a használatávaldiv
's. Adiv
definíció szerint egy elválasztó. Nincsenek eredendő akadálymentesítési tulajdonságai.
Demó
Ha meg szeretné tekinteni a kódot, navigáljon a VoiceOver Demo GitHub repo. Ha ki szeretné próbálni a fenti bemutatót választott képernyőolvasójával, nézze meg Navigálás egy webes űrlapon a VoiceOver segítségével.
Képernyőolvasó szoftver
Az alábbiakban felsoroljuk az adott operációs rendszeren használható különféle típusú képernyőolvasó szoftvereket. Ha nem Mac gépet választ, akkor a Windows és a Linux, valamint az Android készülékek számára is vannak lehetőségek.
NVDA
Az NVDA az NV Access képernyőolvasója. Jelenleg csak a Microsoft Windows 7 SP1 vagy újabb rendszert futtató számítógépeken támogatott. További hozzáférésért tekintse meg a Az NVDA 2024.1-es verziójának letöltési oldala az NV Access webhelyén!
JAWS
Ha megértette a fenti hivatkozást, akkor jó társaságba került. A JAWS honlapja szerint dióhéjban ennyi:
Nézze meg a JAWS-t saját maga és ha ez a megoldás megfelel az Ön igényeinek, mindenképpen próbálja ki!
Narrátor
A Narrátor egy beépített képernyőolvasó megoldás, amely a WIndows 11-hez tartozik. Ha ezt választja képernyőolvasóként, az alábbi linken a használattal kapcsolatos támogatási dokumentációt talál.
Orca
Az Orca egy képernyőolvasó, amely különböző GNOME-ot futtató Linux disztribúciókon használható.
TalkBack
A Google TalkBack az Android-eszközökön használt képernyőolvasó. A bekapcsolással és használattal kapcsolatos további információkért: tekintse meg ezt a cikket az Android kisegítő lehetőségek támogatási webhelyén.
Böngésző támogatás
Ha tényleges böngészőtámogatást keres a HTML elemekhez és az ARIA (Accessible Rich Internet Application) attribútumokhoz, azt javaslom caniuse.com HTML-hez és a ARIA kisegítő lehetőségek támogatása hogy megkapja a legfrissebb 4-1-1 böngészőtámogatást. Ne feledje, ha a böngésző nem támogatja ezt a technológiát, valószínűleg a képernyőolvasó sem támogatja.
DigitalA11Y cikkükkel segíthet összefoglalni a böngészővel és képernyőolvasóval kapcsolatos információkat, Képernyőolvasók és böngészők! Melyik a legjobb kombináció a kisegítő lehetőségek teszteléséhez?
Linkek
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 által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- PlatoData.Network Vertical Generative Ai. Erősítse meg magát. Hozzáférés itt.
- PlatoAiStream. Web3 Intelligence. Felerősített tudás. Hozzáférés itt.
- PlatoESG. Carbon, CleanTech, Energia, Környezet, Nap, Hulladékgazdálkodás. Hozzáférés itt.
- PlatoHealth. Biotechnológiai és klinikai vizsgálatok intelligencia. Hozzáférés itt.
- Forrás: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/