メインコンテンツにスキップ

アクセシビリティ

すべての人がアクセス可能なサイトとアプリの作成

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

Accessibility Experience & Sentiment

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

Experience

  • <span aria-hidden="true">🤓</span> 使ったことがある: Respondents who have used an item.
  • <span aria-hidden="true">👀</span> 知っている: Respondents who have heard about an item, but haven't used it.
  • <span aria-hidden="true">🤷</span> 知らない: Respondents who have never heard about an item.

Sentiment

  • Positive: Respondents who are interested in learning more about a technology; or are willing to use it again.
  • Neutral: Responents who did not indicate any sentiment about a technology.
  • Negative: Respondents who are not interested in learning more about a technology; or have used it and had a negative experience.

その他のアクセシビリティテクニック

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> and <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.

Webサイト制作時に、どのようなユーザーの障害を考慮していますか?
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.

Webアクセシビリティに関する最大の問題点は何ですか?
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.
パートナーのサポートに感謝しています! 詳細をみる。