Chrome DevTools中的5个辅助功能工具

介绍

如果您想增加网站的可访问性，但认为为此需要安装某些软件或处理某些服务，那么这里提供了可供选择的5种在Chrome浏览器中可用的工具，您可以使用它们快速确定是否存在问题。可用性。  

一个小小的免责声明，我知道你们中的许多人都在积极使用DevTools，但是，我提醒您，使用快捷键Cmd + Shift + C / Ctrl + Shift + C打开DevTools很方便。

辅助功能检查器

除了DOM之外，浏览器还构建了一个可访问性树（AOM，可访问性对象模型）或可访问性树（此处更多）。因此，可访问性检查器允许您查看此树中的信息，类似于在“元素”选项卡中查看验证程序的DOM结构的方式。 

在大多数情况下，AOM包含来自ARIA和角色属性的信息，这是屏幕阅读器尝试确定DOM元素的目的的方式。  

您可以在“元素”选项卡的“辅助功能”附加选项卡中找到此工具。 

视力不好的模拟器

 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

感谢您的阅读，我希望这些工具能够帮助您使项目更易于访问。