网络可访问性——这是什么?

设计的实践和建设网站和数字工具,各种能力的用户可以使用它们毫无困难被称为web可访问性。

web应用程序的复杂性和动态特性产生了一系列新的易访问性特征和问题。HTML已经收到了大量的语义扩展,包括“主要”和“部分”。Semantic HTML gives the web page significant meaning rather than concentrating solely on presentation. Users, web browsers, search engines, screen readers, and RSS readers can all understand this more easily as a result.

可访问性反应的应用程序的工具。

有很多工具可以帮助开发人员创建的web应用程序更容易因为大小和持续增长的生态系统的反应。

虽然您可以使用这些工具来发现一些常见的可访问性问题,他们不会为你完成这项工作。是你的责任作为一个开发人员从一开始就提出一个共同努力的项目创建更具包容性和可访问的数码产品。

1。eslint-plugin-jsx-a11y

这个插件运行的静态分析JSX发现在反应应用程序可访问性问题。因为它只在静态代码发现错误,使用它与@axe-core /反应测试的可访问性呈现DOM。总是设备上测试您的应用程序可以使用它们,并查看使用这些工具仅仅是一个步骤在一个较大的a11y测试过程。

如果您正在使用一个编辑产品毛羽插件,您可以立即确认你严格遵守一些可访问性标准的实时了解。有33个测试规则启用插件,包括label-has-for和alt文本。

Create-react-app已经有这个工具配置,当你使用它来创建一个反应项目,但它只有一些可配置的可访问性规则的默认启用。通过创建一个您可以启用更多的规则。eslintrc文件。

2。axe-core-react

当一个组件更新在Chrome DevTools控制台,一个反应项目在开发可以使用axe-core-react强调可访问性问题。

您可以使用axe-core-react插件默认设置或额外的选项。

3所示。react-aria-modal

这是一个功能齐全,适应性反应模态创建使用wai - aria创作实践。

因为这个模态库符合web可访问性标准,反应团队建议使用它。确保屏幕阅读器可以访问你的模态,它管理键盘焦点,键映射和咏叹调的角色。

4所示。网络目标颜色对比检查

Web内容可访问性指南国家AA级应该有一个正常的文本颜色对比度的4.5:1。的文本被认为是AAA级,对比度必须7:1。

5。谷歌的灯塔

您可以执行你的网站的可访问性审计使用谷歌Chrome DevTools灯塔。它产生一份报告,您可以用它来提高你的网站的缺陷。

包装起来

感谢你的阅读!在这个反应可访问性工具的详细教程,我们已经覆盖了各种方法,通过它,你可以让你的应用程序可以访问每个人的反应。

跟我来,Adarsh古普塔在中以betway娱乐官网及在Twitter上(@Adarsh____gupta)。

如果你愿意,你可以支持我y我买茶。

构建应用程序提供可重用的组件如乐高

位的开源工具帮助250000 +开发者构建应用程序和组件。

把任何UI,特性,或页面可重用组件在您的应用程序——并分享它。更容易合作和建立更快。

→了解更多

把应用程序分成组件来简化应用程序开发,并享受最好的体验你想要的工作流程:

→Micro-Frontends

→设计系统

→代码共享和重用

→Monorepo

了解更多