Tämä on kolmas postaus pienessä sarjassa, jota teemme lomakkeiden saavutettavuudesta. Jos et missannut toisen postauksen, katso User Focusin hallinta :focus-visible -toiminnolla. Tässä viestissä tarkastelemme näytönlukuohjelman käyttöä lomakkeessa liikkumisessa sekä joitakin parhaita käytäntöjä.
Mikä on näytönlukija?
Olet ehkä kuullut termin "näytönlukija", kun olet liikkunut verkossa. Saatat jopa käyttää tällä hetkellä näytönlukuohjelmaa manuaalisten esteettömyystestien tekemiseen luomillesi kokemuksille. Näytönlukija on eräänlainen AT tai avustava tekniikka.
Näytönlukija muuntaa digitaalisen tekstin syntetisoiduksi puheeksi tai pistekirjoitukseksi, joka näkyy yleisesti pistekirjoituslukijassa.
Tässä esimerkissä käytän Mac VO:ta. Mac VO (VoiceOver) on sisäänrakennettu kaikkiin Mac-laitteisiin; iOS-, iPadOS- ja macOS-järjestelmät. VO:n avaaminen voi vaihdella sen mukaan, minkä tyyppisessä laitteessa käytät macOS:ää. Macbook Prossa, joka käyttää VO:ta, jolla kirjoitan tätä, ei ole kosketuspalkkia, joten käytän pikanäppäimiä laitteiston mukaan.
VO:n pyörittäminen macOS:ssä
Jos käytät päivitettyä Macbook Prota, koneesi näppäimistö näyttää suunnilleen alla olevan kuvan kaltaiselta.
Aloitat pitämällä cmd
-näppäintä ja paina sitten Touch ID -näppäintä nopeasti kolme kertaa.
Jos käytät MBP:tä (MacBook Prota), jossa on TouchBar, käytät pikakuvaketta cmd+fn+f5
kytkeäksesi VO:n päälle. Jos käytät pöytäkoneen tai kannettavan tietokoneen kanssa perinteistä näppäimistöä, näppäinten tulee olla samat tai sinun on kytkettävä VO päälle esteettömyysasetuksista. Kun VO on päällä, sinua tervehditään tässä valintaikkunassa ja äänellä johdatus VO:hun.
Jos napsautat "Käytä VoiceOveria" -painiketta, olet hyvin matkalla käyttämään VO:ta verkkosivustojesi ja sovelluksiesi testaamiseen. Yksi asia on pidettävä mielessä, että VO on optimoitu käytettäväksi Safarin kanssa. Varmista kuitenkin, että käyttämäsi selain on Safari, kun suoritat näytönlukutestiä. Tämä koskee myös iPhonea ja iPadia.
Voit käyttää VO:ta kahdella päätavalla alusta alkaen. Käytän sitä henkilökohtaisesti siirtymällä verkkosivustolle ja käyttämällä näiden yhdistelmää tab, control, option, shift
ja nuolinäppäimillä, voin navigoida kokemuksen läpi tehokkaasti pelkästään näillä näppäimillä.
Toinen yleinen tapa navigoida kokemuksessa on käyttää VoiceOver-roottori. Roottori on ominaisuus, joka on suunniteltu navigoimaan suoraan haluamaasi paikkaan. Käyttämällä roottoria sinun ei tarvitse kulkea koko sivuston läpi, ajattele sitä "Valitse oma seikkailusi".
Muuntonäppäimet
Muokkausnäppäimet ovat tapa, jolla käytät VO:n eri ominaisuuksia. Oletusmuutosnäppäin tai VO
is control
+ option
mutta voit vaihtaa sen caps lockiin tai valita molempia vaihtoehtoja käytettäväksi keskenään.
Roottorin käyttäminen
Jotta voit käyttää roottoria, sinun on käytettävä muokkausnäppäimien ja kirjaimen "U" yhdistelmää. Minulle muokkausavain on caps lock
. painan caps lock
+ U
ja roottori pyörii puolestani. Kun roottori tulee esiin, voin navigoida mihin tahansa haluamaani kokemuksen osaan käyttämällä vasenta ja oikeaa nuolta.
Navigointi otsikkotason mukaan
Toinen siisti tapa navigoida kokemuksessa on otsikkotaso. Jos käytät muokkausnäppäinten yhdistelmää + cmd
+ H
voit selata asiakirjan rakennetta otsikkotasojen perusteella. Voit myös siirtää asiakirjaa taaksepäin painamalla shift
vastaavassa järjestyksessä, muokkausnäppäimet + shift
+ cmd
+ H
.
Historia ja parhaat käytännöt
Lomakkeet ovat yksi tehokkaimmista alkuperäisistä elementeistä, joita meillä on HTML:ssä. Etsitpä jotain sivulta, lähetät lomakkeen ostaaksesi jotain tai lähetät kyselyn. Lomakkeet ovat verkon kulmakivi, ja ne toivat interaktiivisuutta kokemuksiimme.
Verkkolomakkeen historia juontaa juurensa syyskuuhun 1995, jolloin se otettiin käyttöön HTML 2.0 -spesifikaatio. Jotkut sanovat verkon hyviä päiviä, ainakin minä sanon niin. Stephanie Stimac kirjoitti mahtavan artikkelin aiheesta Smashing Magazine nimeltään ”Select and Beyond standardointi: alkuperäisten HTML-lomakehallintalaitteiden menneisyys, nykyisyys ja tulevaisuus".
Seuraavassa on viisi parasta käytäntöä, joita on noudatettava luotaessa esteetöntä verkkolomaketta.
- Varmista, että käytät lomakeelementtiä. Lomakkeet ovat oletusarvoisesti käytettävissä, ja niitä tulee käyttää div:ien päällä aina.
<form>
<!-- Form controls are nested here. -->
</form>
- Muista käyttää
for
jaid
attribuutit päällälabel
jainput
niin, että ne on linkitetty. Tällä tavalla, jos napsautat/napautat tarraa, kohdistus siirtyy syötteeseen ja voit aloittaa kirjoittamisen.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- Jos kenttä on pakollinen, jotta lomake on täydellinen, käytä vaadittua attribuuttia ja aria-required -määritettä. Nämä rajoittavat lomakkeen lähettämistä. Aaria-required -attribuutti kertoo avustavalle tekniikalle nimenomaisesti, että kenttä on pakollinen.
<input type="text" id="name" name="name" required aria-required/>
- Käytä,
:focus
,:focus-within
ja:focus-visible
CSS-pseudo-luokat, joiden avulla voit hallita ja muokata sitä, miten käyttäjä keskittyy.
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
käytetään toiminnan käynnistämiseen, kuten lomakkeen lähettämiseen. Käytä sitä! Älä luo painikkeita käyttämällädiv
's. Adiv
määritelmän mukaan on jakaja. Sillä ei ole luontaisia saavutettavuusominaisuuksia.
esittely
Jos haluat tarkistaa koodin, siirry kohtaan VoiceOver-demo GitHub-repo. Jos haluat kokeilla yllä olevaa demoa valitsemallasi näytönlukuohjelmallasi, tutustu Verkkolomakkeen selaaminen VoiceOverilla.
Näytönlukijaohjelmisto
Alla on luettelo erityyppisistä näytönlukuohjelmista, joita voit käyttää tietyssä käyttöjärjestelmässäsi. Jos Mac ei ole valintasi, vaihtoehtoja on tarjolla Windowsille ja Linuxille sekä Android-laitteille.
NVDA
NVDA on NV Accessin näytönlukuohjelma. Sitä tuetaan tällä hetkellä vain tietokoneissa, joissa on Microsoft Windows 7 SP1 tai uudempi. Jos haluat lisätietoja, katso NVDA version 2024.1 lataussivu NV Access -sivustolla!
JAWS
Jos ymmärsit yllä olevan viittauksen, olet hyvässä seurassa. JAWS-verkkosivuston mukaan tämä on pähkinänkuoressa:
Tutustu JAWSiin itse ja jos tämä ratkaisu sopii tarpeisiisi, kokeile sitä ehdottomasti!
Kertoja
Narrator on sisäänrakennettu näytönlukuohjelma, joka toimitetaan WIndows 11:n mukana. Jos päätät käyttää tätä näytönlukuohjelmana, alla olevasta linkistä löytyy sen käyttöä koskevia tukidokumentteja.
Orca
Orca on näytönlukuohjelma, jota voidaan käyttää eri Linux-jakeluissa, joissa on GNOME.
Puhua takaisin
Google TalkBack on näytönlukuohjelma, jota käytetään Android-laitteissa. Jos haluat lisätietoja sen käynnistämisestä ja käytöstä, tutustu tähän artikkeliin Androidin esteettömyystukisivustolla.
Selaintuki
Jos etsit todellista selaintukea HTML-elementeille ja ARIA (Accessible Rich Internet Application) -attribuuteille, suosittelen caniuse.com HTML:lle ja ARIA:n esteettömyystuki saadaksesi uusimmat 4-1-1 selaimen tuesta. Muista, että jos selain ei tue tekniikkaa, on mahdollista, että näytönlukuohjelmakaan ei tue sitä.
DigitalA11Y voivat auttaa tekemään yhteenvedon selaimen ja näytönlukuohjelman tiedoista artikkelissaan, Näytönlukijat ja selaimet! Mikä on paras esteettömyystestauksen yhdistelmä?
Linkit
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-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
- PlatoData.Network Vertical Generatiivinen Ai. Vahvista itseäsi. Pääsy tästä.
- PlatoAiStream. Web3 Intelligence. Tietoa laajennettu. Pääsy tästä.
- PlatoESG. hiili, CleanTech, energia, ympäristö, Aurinko, Jätehuolto. Pääsy tästä.
- PlatonHealth. Biotekniikan ja kliinisten kokeiden älykkyys. Pääsy tästä.
- Lähde: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
- :on
- :On
- :ei
- :missä
- $ YLÖS
- 09
- 1
- 11
- 12
- 13
- 16
- 1995
- 2024
- 22
- 27
- 2.
- 31
- 3.
- 500
- 7
- 8
- 9
- 91
- 98
- a
- pystyy
- edellä
- pääsy
- saavutettavuus
- saatavilla
- Mukaan
- Toiminta
- todellinen
- Kaikki
- yksin
- pitkin
- Myös
- am
- an
- ja
- android
- Kaikki
- omena
- Hakemus
- sovellukset
- sovellukset
- OVAT
- ilma
- noin
- artikkeli
- AS
- At
- attribuutteja
- takaisin
- baari
- perustua
- BE
- ollut
- ovat
- alle
- PARAS
- parhaat käytännöt
- Paremmin
- Jälkeen
- reunus
- sekä
- selain
- Rakentaminen
- sisäänrakennettu
- mutta
- nappia
- by
- CAN
- caps
- Katalysaattori
- mahdollisuudet
- muuttaa
- tarkastaa
- valinta
- Valita
- luokat
- napsauttaa
- koodi
- KOM
- yhdistelmä
- tulee
- Yhteinen
- yleisesti
- yritys
- täydellinen
- tietokone
- pitoisuus
- ohjaus
- valvonta
- kulmakivi
- voisi
- luoda
- CSS
- Tällä hetkellä
- räätälöidä
- Päivämäärät
- päivää
- oletusarvo
- ehdottomasti
- määritelmä
- esittely
- Riippuen
- suunniteltu
- pöytä-
- kehitetty
- laite
- Laitteet
- Vuoropuhelu
- erota
- eri
- digitaalinen
- suoraan
- Jakaumat
- asiakirja
- dokumentointi
- ei
- tekee
- Dont
- alas
- download
- tehokkaasti
- myöskään
- elementti
- elementtejä
- poistaa
- upotettu
- Jopa
- esimerkki
- experience
- Elämykset
- nimenomaisesti
- Ominaisuus
- Ominaisuudet
- ala
- sopii
- joustava
- Keskittää
- seurata
- jälkeen
- varten
- muoto
- lomakkeet
- Ilmainen
- alkaen
- tulevaisuutta
- saada
- GitHub
- Antaa
- tietty
- Goes
- menee
- hyvä
- tervehti
- ohjaavat
- Tarvikkeet
- Olla
- ottaa
- Otsikko
- kuuli
- auttaa
- tätä
- historia
- pito
- Koti
- Miten
- Miten
- HTML
- http
- HTTPS
- i
- ID
- if
- kuva
- in
- sisältää
- tiedot
- tiedot
- Infrastruktuuri
- luontainen
- panos
- interaktiivisuus
- liitäntä
- Internet
- tulee
- käyttöön
- esittely
- iOS
- iPad
- iPad
- iPhone
- IT
- SEN
- Jaava
- suu
- Job
- Pitää
- avain
- avaimet
- Merkki
- kannettava tietokone
- myöhemmin
- uusin
- vähiten
- vasemmalle
- kirjain
- Taso
- tasot
- pitää
- LINK
- liittyvät
- linkit
- linux
- Lista
- lukko
- katso
- näköinen
- pois
- mac
- kone
- MacOS
- tärkein
- tehdä
- hoitaa
- manuaalinen
- Saattaa..
- me
- Microsoft
- Microsoft Windows
- ehkä
- mielessä
- hukata
- hetki
- lisää
- eniten
- Suosituin
- liikkua
- liikkuvat
- mozilla
- my
- nimi
- syntyperäinen
- Navigoida
- navigointi
- suunnistus
- Tarve
- tarpeet
- Nro
- pähkinänkuori
- NV
- NVDA
- of
- Office
- on
- kerran
- ONE
- vain
- avata
- avoimen lähdekoodin
- avaaminen
- toiminta
- käyttöjärjestelmän
- optimoitu
- Vaihtoehto
- Vaihtoehdot
- or
- Orca
- tilata
- meidän
- ulos
- ääriviivat
- ulostulo
- yli
- oma
- sivulla
- osa
- Ohi
- PC
- Henkilökohtaisesti
- Platforms
- Platon
- Platonin tietotieto
- PlatonData
- Suosittu
- Kirje
- voimakas
- käytännöt
- esittää
- Esitykset
- painaa
- painamalla
- estää
- ensisijainen
- kohti
- ominaisuudet
- toimittaja
- tarjoaa
- osto
- QT
- nopeasti
- Lue
- lukija
- lukijoita
- vastaanottaa
- viite
- muistaa
- kaukosäädin
- tarvitaan
- rajoittaa
- Rikas
- oikein
- ajaa
- juoksu
- s
- safari
- Said
- sama
- sanoa
- Näytön
- näytönlukijat
- haku
- koska
- nähneet
- valita
- syyskuu
- Järjestys
- Sarjat
- palvelu
- Palveluntarjoaja
- settings
- siirtää
- alukset
- shouldnt
- näyttää
- paikka
- pieni
- So
- Tuotteemme
- Solaris
- vankka
- ratkaisu
- jonkin verran
- jotain
- lähde
- puhe
- pyörii
- Alkaa
- STEPHANIE
- Askeleet
- rakenne
- antaa
- toimitettu
- lähettämistä
- ehdottaa
- yhteenveto
- tuki
- Tuetut
- Tukea
- varma
- Tutkimus
- Keinu
- järjestelmä
- järjestelmät
- teknologia
- Elektroniikka
- kertoo
- termi
- testi
- Testaus
- testit
- teksti
- että
- -
- heidän
- Niitä
- sitten
- Siellä.
- Nämä
- ne
- asia
- ajatella
- tätä
- kolmella
- Kautta
- kertaa
- nimeltään
- että
- työkalupakki
- kosketa
- perinteinen
- ylitys
- totta
- yrittää
- VUORO
- Sorvatut
- Kääntyminen
- kaksi
- tyyppi
- tyypit
- ymmärsi
- päivitetty
- Käyttö
- käyttää
- käytetty
- käyttäjä
- Käyttäjät
- käyttämällä
- hyödyllisyys
- eri
- versio
- kautta
- visio
- W3
- haluta
- oli
- Tapa..
- tavalla
- we
- verkko
- Verkkosivu
- sivustot
- tervetuloa
- HYVIN
- olivat
- Mitä
- kun
- onko
- joka
- koko
- jonka
- tulee
- ikkunat
- Windows 11
- with
- toimii
- maailman
- kirjoittaa
- kirjoittaminen
- kirjoitti
- Voit
- Sinun
- youtube
- zephyrnet