referință accesibilitate

această pagină este o referință cuprinzătoare de caracteristici de accesibilitate în Chrome DevTools.It este destinat dezvoltatorilor web care:

• au o înțelegere de bază a DevTools, cum ar fi cum să-l deschidă.
• sunt familiarizați cu principiile accesibilității și cu cele mai bune practici.

scopul acestei referințe este de a vă ajuta să descoperiți toate instrumentele disponibile inDevTools care vă pot ajuta să examinați accesibilitatea unei pagini.

consultați navigarea Chrome DevTools cu tehnologie de Asistaredacă căutați ajutor pentru navigarea DevTools cu o tehnologie de asistare, cum ar fi un cititor de ecran.

Prezentare generală a caracteristicilor de accesibilitate din Chrome DevTools

această secțiune explică modul în care DevTools se încadrează în setul de instrumente de accesibilitate general.

când stabiliți dacă o pagină este accesibilă, trebuie să aveți în vedere 2 întrebări generale:

1. pot naviga pe pagină cu o tastatură sau un cititor de ecran?
2. sunt elementele paginii marcate corespunzător pentru cititoarele de ecran?

în general, DevTools vă poate ajuta să remediați erorile legate de întrebarea #2, deoarece aceste erori suntușor de detectat într-un mod automat. Întrebarea # 1 este la fel de importantă, dar, din păcate, Devtoolsnu vă poate ajuta acolo. Singura modalitate de a găsi erori legate de întrebarea #1 este să încercați să utilizați o paginăcu o tastatură sau un cititor de ecran. Vedeți cum să faceți o revizuire a Accesibilitățiipentru a afla mai multe.

auditarea accesibilității unei pagini

în general, utilizați panoul audituri pentru a determina dacă:

• o pagină este marcată corespunzător pentru cititoarele de ecran.
• elementele de text de pe o pagină au rapoarte de contrast suficiente. A se vedea, de asemenea, Vizualizarearaportul contrast al unui element de text în selectorul de culori.

pentru a audita o pagină:

1. accesați adresa URL pe care doriți să o auditați.

2. în DevTools, faceți clic pe fila audituri. DevTools vă arată diferite opțiuni de configurare.

   

3. pentru dispozitiv, Selectați mobil dacă doriți să simulați un dispozitiv mobil. Această opțiune se modificăîn mod diferit șirul agentului dvs. de utilizator și redimensionează portul de vizualizare. Dacă versiunea mobilă a paginiiafișează diferit decât versiunea desktop, această opțiune ar putea avea un efect semnificativ asupra rezultatelor auditului dvs.

4. în secțiunea audituri, asigurați-vă că accesibilitatea este activată. Dezactivați celelalte categorii dacă doriți să le excludeți din raport. Lăsați-le activate dacă dorițidescoperiți alte modalități de îmbunătățire a calității paginii dvs.

5. secțiunea de accelerare vă permite să accelerați rețeaua și CPU-ul, ceea ce este util atunci când analizațiperformanța de încărcare. Această opțiune ar trebui să fie irelevantă pentru scorul dvs. de accesibilitate, astfel încât să puteți utilizaorice preferați.

6. caseta de selectare ștergeți spațiul de stocare vă permite să ștergeți întregul spațiu de stocare înainte de a încărca pagina sau să păstrați stocarea între încărcările paginii. Această opțiune este,de asemenea, probabil irelevantă pentru scorul dvs. de accesibilitate, astfel încât să puteți utiliza orice preferați.

7. Faceți Clic Pe Executare Audituri. După 10 până la 30 de secunde, DevTools oferă un raport.Raportul dvs. vă oferă diverse sfaturi despre cum să îmbunătățiți accesibilitatea paginii.

   

8. Faceți clic pe un audit pentru a afla mai multe despre acesta.

   

9. Faceți clic pe Aflați mai multe pentru a vizualiza documentația auditului respectiv.

   

Vezi și: ax extension

puteți prefera să utilizați extensia ax decât panoul de audit.În general, acestea oferă aceleași informații, deoarece aXe este motorul de bază care alimentează panoul de audituri. Extensia aXe are o interfață de utilizare diferită și descrie auditurile ușor diferit.Un avantaj pe care extensia aXe îl are față de panoul de audit este că vă permite să inspectați și să evidențiați nodurile care nu reușesc.

Panoul de accesibilitate

panoul de accesibilitate este locul în care puteți vizualiza arborele de accesibilitate, atributele ARIA și proprietățile de accesibilitate calculate ale nodurilor DOM.

pentru a deschide Panoul accesibilitate:

1. Faceți clic pe fila Elemente.
2. în arborele DOM, selectați elementul pe care doriți să îl inspectați.
3. Faceți clic pe fila accesibilitate. Această filă poate fi ascunsă în spatele butonului Mai multe file.

vizualizați poziția unui element în arborele accesibilitate

arborele accesibilitate este un subset al arborelui DOM. Acesta conține numai elemente din arborele DOM care sunt relevante și utile pentru afișarea conținutului paginii într-un cititor de ecran.

inspectați poziția unui element în arborele accesibilitate din panoul accesibilitate.

Vizualizați atributele ariei unui element

atributele ariei asigurați-vă că cititoarele de ecran au toate informațiile de care au nevoie pentru a reprezenta corect conținutul unei pagini.

Vizualizați atributele ARIA unui element în Panoul accesibilitate.

Vizualizați proprietățile de accesibilitate calculate ale unui element

unele proprietăți de accesibilitate sunt calculate dinamic de browser. Aceste proprietăți pot fi vizualizate în secțiunea Proprietăți calculate din panoul accesibilitate.

Vizualizați proprietățile de accesibilitate calculate ale unui element în Panoul accesibilitate.

Vizualizați raportul de contrast al unui element text în selectorul de culori

unele persoane cu vedere redusă nu văd zonele ca fiind foarte luminoase sau foarte întunecate. Totul tinde săapar la aproximativ aceeași luminozitate, ceea ce face dificilă distingerea contururilor și marginilor.Raportul de Contrast măsoară diferența de luminozitate dintre prim-plan și fundalde text. Dacă textul dvs. are un raport de contrast scăzut, atunci acești utilizatori cu viziune scăzută pot literalmenteexperiență site-ul dvs. ca un ecran gol.

selectorul de culori vă poate ajuta să vă asigurați că textul dvs. îndeplinește nivelurile de contrast recomandate:

1. Faceți clic pe fila Elemente.

2. în arborele DOM, selectați elementul text pe care doriți să îl inspectați.

   

3. în panoul Stiluri, faceți clic pe pătratul de culoare de lângă valoarea color a elementului.

   

4. verificați secțiunea raportului de Contrast al selectorului de culori. O bifă înseamnă astaelementul îndeplinește recomandarea minimă.Două semne de verificare înseamnă că îndeplinește recomandarea îmbunătățită.

   

5. Faceți clic pe secțiunea Raport de Contrast pentru a vedea mai multe informații. O linie apare în vizualpicker în partea de sus a selectorului de culori. Dacă culoarea curentă îndeplinește recomandările, atuncianimic pe aceeași parte a liniei îndeplinește, de asemenea, recomandări. Dacă culoarea curentă nu îndeplinește recomandările, atunci nimic din aceeași parte nu îndeplinește recomandările.

   

Feedback