Introduction
If you want to increase the accessibility of your site, but think that for this you need to install something or deal with some service, then here is a selection of 5 tools that are available in the Chrome browser, and with which you can quickly determine if there are problems with availability.
A small disclaimer, I know that many of you are actively using DevTools, however, I remind you that it is convenient to use the shortcut Cmd + Shift + C / Ctrl + Shift + C to open DevTools.
Accessibility inspector
In addition to the DOM, the browser builds an Accessibility Tree (AOM, Accessibility Object Model) or an Accessibility Tree (a little more here ). Accordingly, the Accessibility inspector allows you to view the information in this tree, similarly to how you view the DOM structure of the verifier in the Elements tab.
For the most part, the AOM contains information from the ARIA and role attributes, which is how screen readers try to determine the purpose of a DOM element.
You can find this and the tool in the Elements tab, in the Accessibility additional tab.
Bad vision emulator
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
Thanks for reading, I hope these tools will help you make your projects a little more accessible.