Accessibility Reference

Tämä sivu on kattava viittaus Chromen esteettömyysominaisuuksiin DevTools.It on tarkoitettu web-kehittäjille, jotka:

• on perustiedot DevTools, kuten miten avata se.
• tuntevat esteettömyyden periaatteet ja parhaat käytännöt.

tämän viitteen tarkoituksena on auttaa sinua löytämään kaikki saatavilla olevat työkalut, joiden avulla voit tutkia sivun saavutettavuutta.

Katso Chrome Devtoolsin navigointi Apuvälineteknologialla jos etsit apua Devtoolsin navigointiin apuvälineteknologialla, kuten ruudunlukijalla.

yleiskatsaus Chrome Devtoolsin esteettömyysominaisuuksista

tässä osiossa kerrotaan, miten DevTools sopii yleiseen esteettömyystyökalupakkiisi.

kun määrität, onko sivu käytettävissä, sinun tulee muistaa 2 yleistä kysymystä:

1. Voinko navigoida sivulla näppäimistön tai ruudunlukijan avulla?
2. onko sivun elementit merkitty oikein ruudunlukijoita varten?

yleisesti DevTools voi auttaa korjaamaan kysymykseen # 2 liittyviä virheitä, koska nämä virheet on helppo havaita automaattisesti. Kysymys #1 on yhtä tärkeä, mutta valitettavasti DevTools ei voi auttaa sinua siinä. Ainoa tapa löytää kysymykseen #1 liittyviä virheitä on yrittää käyttää sivua näppäimistön tai ruudunlukijan kanssa itse. Katso, miten Saavutettavuuskatsaus tehdään.

Audit a page ’ s accessibility

in general, use the Audits panel to determine if:

• sivu on asianmukaisesti merkitty ruudunlukijoita varten.
• sivun tekstielementeissä on riittävät kontrastisuhteet. Katso myös Katso thecontrast-suhde tekstielementin värivalitsin.

tarkastamaan sivun:

1. Siirry URL, jonka haluat tarkastaa.

2. valitse Devtoolsissa tarkastukset-välilehti. DevTools näyttää erilaisia asetusvaihtoehtoja.

   

3. laitteen osalta valitse Mobile, Jos haluat simuloida mobiililaitteen. Tämä asetus muuttaa eri tavalla käyttäjän agenttijonoa ja muuttaa kuvaikkunan kokoa. Jos sivustosi mobiiliversio on erilainen kuin työpöytäversio, tällä valinnalla voi olla merkittävä vaikutus auditointisi tuloksiin.

4. Tarkista auditoinnit-osiossa, että saavutettavuus on käytössä. Poista muut luokat käytöstä, jos haluat poistaa ne raportistasi. Jätä ne käyttöön, jos haluat löytää muita tapoja parantaa sivun laatua.

5. Kuristusosion avulla voit kuristaa verkon ja suorittimen, mikä on hyödyllistä, kun analyzingload suorituskykyä. Tämän vaihtoehdon pitäisi olla merkityksetön saavutettavuuspisteillesi, joten voit käyttää mitä haluat.

6. Tyhjennä varastointi-valintaruudun avulla voit tyhjentää kaikki tallennustilat ennen sivun lataamista tai preservestorage sivujen latausten välillä. Tämä vaihtoehto on myös todennäköisesti merkityksetön saavutettavuuspisteessäsi,joten voit käyttää mitä haluat.

7. Valitse Suorita Tarkastukset. 10-30 sekunnin kuluttua DevTools antaa raportin.Raporttisi antaa sinulle erilaisia vinkkejä siitä, miten voit parantaa sivun saavutettavuutta.

   

8. klikkaa audit saadaksesi lisätietoja siitä.

   

9. Napsauta Learn More nähdäksesi tarkastuksen asiakirjat.

   

Katso myös: aXe extension

voit käyttää mieluummin aXe extensionia kuin Auditointipaneelia.Ne antavat yleensä samat tiedot, koska aXe on taustalla oleva moottori, joka antaa virtaa tarkastuspaneelille. AXe-laajennuksella on erilainen käyttöliittymä ja se kuvaa auditointeja hieman eri tavalla.Yksi etu, että aXe laajennus on yli Auditointipaneelin on, että sen avulla voit tarkastaa andhighlight epäonnistuneet solmut.

Esteettömyyspaneeli

Esteettömyyspaneeli on paikka, jossa voit tarkastella Dom-solmujen esteettömyyspuuta, ARIA-attribuutteja ja laskettuja esteettömyysominaisuuksia.

Esteettömyyspaneelin avaaminen:

1. Napsauta elementit-välilehteä.
2. valitse DOM-puusta elementti, jonka haluat tarkastaa.
3. Napsauta Esteettömyys-välilehteä. Tämä välilehti voidaan piilottaa useamman välilehden taakse.

Katso elementin sijainti esteettömyyspuussa

esteettömyyspuu on DOM-puun osajoukko. Se sisältää vain Dom-puusta peräisin olevia elementtejä, jotka ovat merkityksellisiä ja hyödyllisiä sivun sisällön näyttämiseksi ruudunlukijassa.

Tarkista kohteen sijainti esteettömyyspuussa Esteettömyysruudusta.

Katso elementin aaria-attribuutit

ARIA-attribuutit varmistavat, että ruudunlukijoilla on kaikki tarvitsemansa tiedot, jotta ne edustaisivat sivun sisältöä asianmukaisesti.

Tarkastele elementin ARIA-attribuutteja Esteettömyyspaneelissa.

Näytä elementin laskennalliset esteettömyysominaisuudet

jotkin esteettömyysominaisuudet lasketaan dynaamisesti selaimella. Näitä ominaisuuksia voidaan tarkastella Saavutettavuusruudun Computed Properties-osiossa.

Tarkastele elementin laskettuja esteettömyysominaisuuksia Esteettömyysruudussa.

tarkastellaan värivalitsimen tekstielementin kontrastisuhdetta

jotkut heikkonäköiset eivät näe alueita kovin kirkkaina tai hyvin tummina. Kaikki tukeutuu suunnilleen samaan kirkkauteen,mikä vaikeuttaa ääriviivojen ja reunojen erottamista.Kontrastisuhde mittaa tekstin etu-ja taustatekstin kirkkauseroa. Jos tekstissäsi on alhainen kontrastisuhde, nämä heikkonäköiset käyttäjät voivat kirjaimellisestikäydä sivustosi tyhjäksi näytöksi.

värivalitsin voi auttaa sinua varmistamaan, että tekstisi vastaa suositeltuja kontrastitasoja:

1. Napsauta elementit-välilehteä.

2. valitse DOM-puusta tekstielementti, jonka haluat tarkastaa.

   

3. Napsauta tyyli-ruudussa elementin color arvon vieressä olevaa väriruutua.

   

4. Tarkista värivalitsimen kontrastisuhde-osio. Yksi valintamerkki tarkoittaa, ettäelementti täyttää vähimmäissuosituksen.Kaksi tarkistusmerkkiä tarkoittaa, että se täyttää tehostetun suosituksen.

   

5. Napsauta kontrastisuhde-kohtaa nähdäksesi lisätietoja. Värivalitsimen yläreunassa olevassa visualpickerissä näkyy viiva. Jos nykyinen väri täyttää suositukset, niin mitkään samalla puolella linjaa täyttävät myös suositukset. Jos nykyinen väri ei täytä suosituksia, niin mitään samalla puolella ei myöskään täytä suosituksia.

   

palaute