Einführung
Wenn Sie die Zugänglichkeit Ihrer Website verbessern möchten, aber der Meinung sind, dass Sie dafür etwas installieren oder sich um einen Dienst kümmern müssen, finden Sie hier eine Auswahl von 5 Tools, die im Chrome-Browser verfügbar sind und mit denen Sie schnell feststellen können, ob es Probleme mit gibt Verfügbarkeit.
Ein kleiner Haftungsausschluss: Ich weiß, dass viele von Ihnen DevTools aktiv verwenden. Ich möchte Sie jedoch daran erinnern, dass es bequem ist, die Tastenkombination Cmd + Umschalt + C / Strg + Umschalt + C zum Öffnen von DevTools zu verwenden.
Inspektor für Barrierefreiheit
Zusätzlich zum DOM erstellt der Browser einen Eingabehilfenbaum (AOM, Eingabehilfenobjektmodell) oder einen Eingabehilfenbaum ( hier etwas mehr ). Dementsprechend können Sie mit dem Eingabehilfen-Inspektor die Informationen in diesem Baum anzeigen, ähnlich wie Sie die DOM-Struktur des Verifizierers auf der Registerkarte Elemente anzeigen.
Zum größten Teil enthält das AOM Informationen aus den ARIA- und Rollenattributen. Auf diese Weise versuchen Screenreader, den Zweck eines DOM-Elements zu bestimmen.
Sie finden dies und das Tool auf der Registerkarte Elemente und auf der Registerkarte Barrierefreiheit.
DevTools , .
DevTools, . More tools, Rendering. , , “Emulate vision deficiencies”.
DevTools :
( ?)
- , .
- –, – .
-
, , , , - , . .
Lighthouse , . , Accessibility.
Lighthouse :
ARIA -
ROLE -
Lang HTML
Tabindex
alt
, , , alt. , - “”, “ ”, “”,
. , .
, DevTools , .
- DevTools, , CSS color
, :
()
()
Inspect element tooltip
, . , DevTools , . DevTools.
Inspect element tooltip , .
, ,
, , .– FronteersConf
Vielen Dank fürs Lesen. Ich hoffe, diese Tools helfen Ihnen dabei, Ihre Projekte ein wenig zugänglicher zu machen.