跳到内容

无障碍

让所有人都能访问网站和应用程序。

We're highlighting up-and-coming features or libraries we think you should know about.

Feature Highlight: <search>

The <search> element is one of those easy wins that take very little effort to add to your list of best practices. Step 1: use it to denote any search field in your apps. Step 2: well that's it really!

And now that it's supported in all four major browsers, there's really no reason not to be using it.

Baseline: Newly Available

Learn more

无障碍功能

Landmark elements (<main>, <nav>, etc.) aren't very new or exciting but they remain a foundation of web accessibility.

通过...分组:

根据此项排序:

1
无障碍
96.7%
4,383
2
无障碍
88.2%
8%
4,381
3
无障碍
29.3%
29.1%
41.2%
4,377
4
无障碍
13%
22.5%
64.3%
4,378

经验

  • <span aria-hidden="true">🤓</span> 用过: 使用过此项目的受访者。
  • <span aria-hidden="true">👀</span> 有听说过: 听说过此项目,但没有使用过此项目的受访者。
  • <span aria-hidden="true">🤷</span> 没听说过: 从未听说过此项目的受访者。

情绪(态度)

  • 积极: 有兴趣了解此技术,或者愿意再次使用它的受访者
  • 中立: 未对此技术发表看法的受访者
  • 消极: 对此技术不感兴趣,或者使用此技术有糟糕体验的受访者

其他无障碍技术

While things like alt text or proper heading hierarchy have become second nature to most front-end developers, newer tools like the prefers- set of media queries have yet to truly become mainstream.

在您的常规无障碍策略中,还有哪些其他技巧?
Multiple
0%
20%
40%
60%
80%
100%
1
描述性 alt 文本
3,647
2
信息层次结构
3,452
3
表单控制标签
3,331
4
有意义的链接文本
+1
2,827
5
足够的对比度
+1
2,778
6
可视焦点环
+1
2,725
7
直观的键盘导航
-3
2,454
8
<fieldset><legend>
+2
2,250
9
不只依赖指针
2,194
10
不仅仅依赖颜色
-2
2,192
0%
20%
40%
60%
80%
100%
受访者百分比

用户残疾情况

It's nice to see that beyond accounting for users with vision impairments, more developers are also taking atypical color vision and mobility impairments into account compared to last year.

在制作网站时,您会考虑到哪些用户残疾问题?
Multiple
0%
20%
40%
60%
80%
100%
1
低视力
2,724
2
色觉异常
2,163
3
行动障碍
1,387
4
前庭失调
920
5
听力障碍
687
6
学习障碍
677
7
665
8
其他认知障碍
600
9
其他答案
52
0%
20%
40%
60%
80%
100%
受访者百分比

屏幕阅读器

Once again, easily accessible tools like VoiceOver or the Chrome DevTools win over more specialized options. Although many developers still don't use screen readers of any kind (also note that 39% of survey respondents skipped the question altogether).

您使用哪种屏幕阅读器进行无障碍性测试?
Multiple
0%
20%
40%
60%
80%
100%
+1
1,376
2
1,358
3
Chrome DevTools
-1
1,306
742
414
366
137
11
Firefox Accessibility Inspector
12
其他答案
51
0%
20%
40%
60%
80%
100%
受访者百分比

无障碍工具

Browser devtools have seen a huge jump in usage compared to last year's results, seeing them overtake Lighthouse to become the lead accessibility testing tool.

您使用什么工具进行无障碍性测试?
Multiple
0%
20%
40%
60%
80%
100%
1
Browser Devtools
+1
2,259
-1
1,983
1,145
4
Firefox Accessibility Inspector
1,033
5
-1
717
+1
648
7
-1
544
+1
188
10
-1
167
0%
20%
40%
60%
80%
100%
受访者百分比

无障碍痛点

While there are technical gaps when it comes to accessibility (e.g. cross-root ARIA), a recurring theme whenever we ask about it is that the main pain points are around the humans involved with issues around workplace priorities, education, and cognitive overhead topping the list.

在网络无障碍方面,您最大的痛点是什么?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations
0%
20%
40%
60%
80%
100%
1
Education
3
2
workplace
1
3
Cognitive overload
2
4
Debugging
1
5
Environments & Consumers
6
Screen reader issues
2
7
ARIA
1
8
Browser support
1
9
Low priority
-7
10
Tooling
2
11
Excessive complexity
-2
12
Keyboard navigation
13
Standards & Specs
1
14
Focus management
-3
15
16
Missing elements
17
Ecosystem issues
18
Content
1
19
Accessible visual design
20
Reliance on JavaScript
21
Access to screen readers
+3
22
Component-Based Architecture
23
Invalid/Spam
24
CSS Integration
25
26
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
Website Accessibility, v3
Jon Kuperman
Bloomberg

Website Accessibility, v3

Build content for everyone and become your company's accessibility expert! Learn the importance of semantic HTML and alt text for ensuring screen readers can navigate your site.
感谢合作伙伴对我们的支持! 了解更多。