Tillgänglighetsreferens

av Kayce basker
teknisk författare, Chrome DevTools & fyr

denna sida är en omfattande referens av tillgänglighetsfunktioner i Chrome DevTools.It är avsedd för webbutvecklare som:

  • ha en grundläggande förståelse för DevTools, till exempel hur man öppnar den.
  • känner till tillgänglighetsprinciper och bästa praxis.

syftet med denna referens är att hjälpa dig att upptäcka alla tillgängliga verktyg inDevTools som kan hjälpa dig att undersöka en sidas tillgänglighet.

se navigera i Chrome DevTools med Hjälpteknikom du letar efter hjälp med att navigera i DevTools med hjälp av en hjälpteknik som en skärmläsare.

översikt över tillgänglighetsfunktioner i Chrome DevTools

det här avsnittet förklarar hur DevTools passar in i din övergripande tillgänglighetsverktygslåda.

när du bestämmer om en sida är tillgänglig måste du ha 2 Allmänna frågor i åtanke:

  1. kan jag navigera på sidan med ett tangentbord eller skärmläsare?
  2. är sidans element korrekt markerade för skärmläsare?

i allmänhet kan DevTools hjälpa dig att åtgärda fel relaterade till Fråga #2, eftersom dessa fel är lätta att upptäcka på ett automatiserat sätt. Fråga # 1 är lika viktigt, men tyvärr DevToolscan ’ t hjälpa dig där. Det enda sättet att hitta fel relaterade till Fråga #1 är att försöka använda en sidamed ett tangentbord eller skärmläsare själv. Se hur du gör en Tillgänglighetsgranskning för att lära dig mer.

granska en sidas tillgänglighet

i allmänhet använder du granskningspanelen för att avgöra om:

  • en sida är korrekt markerad för skärmläsare.
  • textelementen på en sida har tillräckliga kontrastförhållanden. Se även Visakontrastförhållandet för ett textelement i färgväljaren.

för att granska en sida:

  1. gå till webbadressen som du vill granska.
  2. i DevTools klickar du på fliken revisioner. DevTools visar olika konfigurationsalternativ.

    Figur 1. Konfigurera revisioner

  3. för enhet väljer du Mobil om du vill simulera en mobil enhet. Det här alternativet ändrasdifferent din User agent sträng och ändrar storlek på visningsområdet. Om den mobila versionen av sidan visas annorlunda än den stationära versionen kan det här alternativet ha en betydande effekt påresultaten av din revision.

  4. se till att tillgängligheten är aktiverad i avsnittet revisioner. Inaktivera othercategories om du vill utesluta dem från din rapport. Lämna dem aktiverade om du villupptäck andra sätt att förbättra kvaliteten på din sida.

  5. med gasreglaget kan du gasa nätverket och CPU, vilket är användbart när du analyserarlastprestanda. Det här alternativet bör vara irrelevant för din tillgänglighetspoäng, så du kan använda vad du än föredrar.

  6. kryssrutan Rensa Lagring låter dig rensa all lagring innan du laddar sidan, eller bevara Lagring mellan sidbelastningar. Det här alternativet är förmodligen också irrelevant för din tillgänglighetspoäng, så du kan använda vad du föredrar.

  7. Klicka På Kör Revisioner. Efter 10 till 30 sekunder ger DevTools en rapport.Din rapport ger dig olika tips om hur du kan förbättra sidans tillgänglighet.

    Figur 2. En rapport

  8. klicka på en revision för att lära dig mer om den.

    Figur 3. Mer information om en revision

  9. klicka på Läs mer om du vill visa granskningens dokumentation.

    Figur 4. Visa en revisions dokumentation

Se även: aXe extension

du kanske föredrar att använda aXe extension snarare än Revisionspanelen.De ger i allmänhet samma information, eftersom yxa är den underliggande motorn som driver granskningspanelen. AXe-förlängningen har ett annat användargränssnitt och beskriver revisioner något annorlunda.En fördel som aXe-förlängningen har över Revisionspanelen är att den låter dig inspektera ochmarkera felaktiga noder.

Figur 5. Axe-tillägget

Tillgänglighetsfönstret

Tillgänglighetsfönstret är där du kan visa tillgänglighetsträdet, ARIA-attributen ochberäknade tillgänglighetsegenskaper för DOM-noder.

för att öppna Hjälpmedelsfönstret:

  1. klicka på fliken Element.
  2. Välj det element som du vill inspektera i DOM-trädet.
  3. klicka på fliken tillgänglighet. Den här fliken kan döljas bakom knappen fler flikar .
Figur 6. Inspektera elementet h1 på DevTools hemsida i Tillgänglighetsfönstret

visa ett Elements position i tillgänglighetsträdet

tillgänglighetsträdet är en delmängd av DOM-trädet. Den innehåller bara element FRÅNDOM-trädet som är relevant och användbart för att visa sidans innehåll i en skärmläsare.

Kontrollera ett Elements position i hjälpmedelsträdet från Hjälpmedelsfönstret.

Figur 7. Avsnittet Tillgänglighetsträd

visa ett Elements ARIA-attribut

ARIA-attribut säkerställer att skärmläsare har all information som de behöver för att korrekt representera en sidas innehåll.

visa ett Elements ARIA-attribut i Hjälpmedelsfönstret.

figur 8. Avsnittet ARIA attribut

visa ett Elements beräknade tillgänglighetsegenskaper

vissa tillgänglighetsegenskaper beräknas dynamiskt av webbläsaren. Dessa egenskaperkan visas i avsnittet beräknade egenskaper i Hjälpmedelsfönstret.

visa ett Elements beräknade tillgänglighetsegenskaper i Hjälpmedelsfönstret.

Figur 9. Avsnittet beräknade egenskaper (tillgänglighet)

Visa kontrastförhållandet för ett textelement i färgväljaren

vissa personer med nedsatt syn ser inte områden som mycket ljusa eller mycket mörka. Allt tenderar attvisas vid ungefär samma ljusstyrka, vilket gör det svårt att skilja konturer och kanter.Kontrastförhållande mäter skillnaden i ljusstyrka mellan förgrunden och bakgrundenav text. Om din text har ett lågt kontrastförhållande kan dessa användare med låg syn bokstavligenuppleva din webbplats som en tom skärm.

färgväljaren kan hjälpa dig att se till att din text uppfyller rekommenderade kontrastförhållandenivåer:

  1. klicka på fliken Element.
  2. markera det textelement som du vill inspektera i DOM-trädet.

    Figur 10. Inspektera ett stycke i DOM-trädet

  3. klicka på rutan färg bredvid elementets color – värde i fönstret stilar.

    Figur 11. Egenskapen color för elementet

  4. kontrollera kontrastförhållandet i färgväljaren. En bock betyder detelementet uppfyller minsta rekommendationen.Två bockar innebär att den uppfyller den förbättrade rekommendationen.

    Figur 12. Kontrastförhållandet i färgväljaren visar 2 bockar och ett värde på 16.10

  5. klicka på avsnittet kontrastförhållande för att se mer information. En rad visas i visualpicker högst upp i färgväljaren. Om den aktuella färgen uppfyller rekommendationerna, dånågot på samma sida av linjen uppfyller också rekommendationer. Om den aktuella färgen inte uppfyller rekommendationerna, uppfyller inte något på samma sida rekommendationerna.

    figur 13. Kontrastförhållandet i den visuella plockaren

Feedback

var den här sidan till hjälp?
Ja
vad var det bästa med den här sidan?
det hjälpte mig att slutföra mina mål
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

den hade den information jag behövde
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

den hade korrekt information
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

det var lätt att läsa
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

något annat
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

Nej
vad var det värsta med den här sidan?
det hjälpte mig inte att slutföra mina mål
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

det saknades information jag behövde
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

den hade felaktig information
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

det var svårt att läsa
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

något annat
Tack för feedbacken. Om du har specifika förslag på hur du kan förbättra den här sidan, skapa ett problem.

Lämna ett svar

Din e-postadress kommer inte publiceras.