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.

[Beágyazott tartalmat]

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.

[Beágyazott tartalmat]

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.

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

2. Feltétlenül használja a for és a id attribútumok be labelés inputhogy ö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/>

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

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

5. 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ával div's. A div definíció szerint egy elválasztó. Nincsenek eredendő akadálymentesítési tulajdonságai.

Demó

[Beágyazott tartalmat]

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

„Jobb képernyőolvasóra van szükségünk”

- Névtelen

Ha megértette a fenti hivatkozást, akkor jó társaságba került. A JAWS honlapja szerint dióhéjban ennyi:

„A JAWS, a Job Access With Speech a világ legnépszerűbb képernyőolvasója, olyan számítógép-felhasználók számára fejlesztették ki, akiknek a látásvesztés miatt nem látják a képernyőn lévő tartalmat, vagy nem tudnak navigálni az egérrel. A JAWS beszéd- és Braille-kimenetet biztosít a számítógépen található legnépszerűbb számítógépes alkalmazásokhoz. Böngésszen az interneten, írhat dokumentumot, olvashat e-maileket és készíthet prezentációkat az irodájáról, távoli asztaláról vagy otthonról.

JAWS weboldal

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.

A Narrátor teljes útmutatója

Orca

Az Orca egy képernyőolvasó, amely különböző GNOME-ot futtató Linux disztribúciókon használható.

„Az Orca egy ingyenes, nyílt forráskódú, rugalmas és bővíthető képernyőolvasó, amely beszéddel és frissíthető Braille-írással hozzáférést biztosít a grafikus asztalhoz.

Az Orca olyan alkalmazásokkal és eszközkészletekkel dolgozik, amelyek támogatják az Assistive Technology Service Provider Interface-t (AT-SPI), amely a Linux és a Solaris elsődleges kisegítő technológiai infrastruktúrája. Az AT-SPI-t támogató alkalmazások és eszközkészletek közé tartozik a GNOME Gtk+ eszközkészlet, a Java platform Swing eszközkészlete, a LibreOffice, a Gecko és a WebKitGtk. Folyamatban van a KDE Qt eszközkészlet AT-SPI támogatása.”

Orca honlapja

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/