Tilgjengelighetsreferanse

Denne siden er en omfattende referanse av tilgjengelighetsfunksjoner I Chrome DevTools.It er ment for webutviklere som:

• Ha en grunnleggende forståelse Av DevTools, for eksempel hvordan du åpner Den.
• er kjent med tilgjengelighetsprinsipper og beste praksis.

formålet med denne referansen er å hjelpe deg med å oppdage alle verktøyene som er tilgjengelige inDevTools som kan hjelpe deg med å undersøke en sides tilgjengelighet.

Se Navigere Chrome-Devtooler Med Hjelpeteknologihvis du trenger hjelp til å navigere DevTools med en hjelpeteknologi som en skjermleser.

Oversikt over tilgjengelighetsfunksjoner I Chrome DevTools

Denne delen forklarer Hvordan DevTools passer inn i det generelle tilgjengelighetsverktøyet ditt.

når du skal avgjøre om en side er tilgjengelig, må du ha 2 generelle spørsmål i tankene:

1. kan jeg navigere på siden med et tastatur eller en skjermleser?
2. er sidens elementer riktig merket for skjermlesere?

Generelt Kan DevTools hjelpe deg med å fikse feil relatert til spørsmål #2, fordi disse feilene er enkle å oppdage på en automatisert måte. Spørsmål # 1 er like viktig, Men Dessverre DevToolscan ‘ t hjelpe deg der. Den eneste måten å finne feil relatert til spørsmål #1 er å prøve å bruke en pagemed et tastatur eller en skjermleser selv. Se Hvordan Du Gjør En Tilgjengelighetsanmeldelseå lære mer.

Overvåk en sides tilgjengelighet

generelt bruker Du Revisjoner-panelet til å fastslå om:

• en side er riktig merket for skjermlesere.
• tekstelementene på en side har tilstrekkelig kontrastforhold. Se Også Vis kontrastforhold for et tekstelement i Fargevelgeren.

for å revidere en side:

1. Gå TIL NETTADRESSEN du vil overvåke.

2. i DevTools klikker du Kategorien Revisjoner. DevTools viser deg ulike konfigurasjonsalternativer.

   

3. For Enhet velger Du Mobil Hvis du vil simulere en mobil enhet. Dette alternativet endres annerledes brukeragentstrengen og endrer størrelsen på visningsporten. Hvis mobilversjonen av sidenspiller annerledes enn desktopversjonen, kan dette alternativet ha en betydelig effekt på resultatene av revisjonen din.

4. kontroller At Tilgjengelighet er aktivert i Delen Revisjoner. Deaktiver de andre kategoriene hvis du vil ekskludere dem fra rapporten. La dem være aktivert hvis du viloppdag andre måter å forbedre kvaliteten på siden din.

5. Throttling-delen lar deg strupe nettverket og CPU, noe som er nyttig når du analysererlast ytelse. Dette alternativet bør være irrelevant for tilgjengelighetspoengene dine, slik at du kan bruke uansett hva du foretrekker.

6. Avkrysningsruten Fjern Lagring lar deg fjerne all lagring før du laster inn siden, eller preservestorage mellom sidelastinger. Dette alternativet er også sannsynligvis irrelevant for tilgjengelighetsresultatet ditt, slik at du kan bruke det du foretrekker.

7. Klikk Kjør Revisjoner. Etter 10 til 30 sekunder Gir DevTools en rapport.Rapporten gir deg ulike tips om hvordan du kan forbedre sidens tilgjengelighet.

   

8. Klikk på en revisjon for å lære mer om den.

   

9. Klikk På Lær Mer for å vise dokumentasjonen for den revisjonen.

   

Se også: økseutvidelse

du foretrekker kanskje å bruke økseutvidelsen i stedet for Revisjonspanelet.De gir vanligvis den samme informasjonen, siden aXe er den underliggende motoren som driver theAudits panel. AXe-utvidelsen har et annet BRUKERGRENSESNITT og beskriver revisjoner litt annerledes.En fordel at aXe forlengelse har Over Revisjoner panel er at den lar deg inspisere andhighlight sviktende noder.

Tilgjengelighetsruten

Tilgjengelighetsruten er der du kan vise tilgjengelighetstreet, aria-attributter og beregnede tilgjengelighetsegenskaper FOR DOM-noder.

for å åpne Tilgjengelighetsruten:

1. Klikk Kategorien Elementer.
2. i DOM-Treet velger du elementet du vil inspisere.
3. Klikk På Tilgjengelighet-fanen. Denne kategorien kan være skjult bak Flere Faner – knappen.

Vise plasseringen til et element i tilgjengelighetstreet

tilgjengelighetstreet er et delsett AV DOM-treet. DEN inneholder bare elementer frahom-treet som er relevant og nyttig for å vise sidens innhold i en skjermleser.

Kontroller plasseringen til et element i tilgjengelighetstreet Fra Tilgjengelighetsruten.

Vis ARIA-attributter for et element

ARIA-attributter sikrer at skjermlesere har all informasjonen de trenger i rekkefølge for å representere innholdet på en side på riktig måte.

Vis ARIA-attributter for et element i Tilgjengelighetsruten.

Vis egenskapene for beregnet tilgjengelighet for et element

enkelte tilgjengelighetsegenskaper beregnes dynamisk av nettleseren. Disse egenskapene kan vises i Delen Beregnede Egenskaper I Tilgjengelighetsruten.

Vis egenskapene for beregnet tilgjengelighet for et element i Tilgjengelighetsruten.

Vis kontrastforholdet for et tekstelement I Fargevelgeren

noen personer med nedsatt syn ser ikke områder som svært lyse eller svært mørke. Alt har en tendens tilvises på omtrent samme lysstyrke, noe som gjør det vanskelig å skille konturer og kanter.Kontrastforhold måler forskjellen i lysstyrke mellom forgrunnen og bakgrunnsteksten. Hvis teksten din har et lavt kontrastforhold, kan disse svaksynte brukerne bokstavelig talt oppleve nettstedet ditt som en tom skjerm.

Fargevelgeren kan hjelpe deg med å sørge for at teksten oppfyller anbefalte kontrastforhold:

1. Klikk Kategorien Elementer.

2. i DOM-Treet velger du tekstelementet du vil inspisere.

   

3. klikk fargefeltet ved siden av elementets color – verdi i Stiler-ruten.

   

4. Kontroller Kontrastforhold-delen av Fargevelgeren. Et merke betyr detelementet oppfyller minimumsanbefalingen.To merker betyr at den oppfyller den forbedrede anbefalingen.

   

5. Klikk På Kontrastforhold-delen for å se mer informasjon. En linje vises i visualpicker øverst I Fargevelgeren. Hvis gjeldende farge oppfyller anbefalinger, sånoe på samme side av linjen oppfyller også anbefalinger. Hvis den nåværende fargen ikke oppfyller anbefalinger, oppfyller ikke noe på samme side også anbefalinger.

   

Tilbakemelding