プログラミング

Web Development for Beginners を読む:レッスン3

投稿日:

web development

1. はじめに

Web Development for Beginners の 3日目 (Creating Accessible Webpages) です。

レッスン3 は アクセシビリティについてです。

※ 本記事は、ほぼ「個人的なメモ」です。

2. Lesson 3: Creating Accessible Webpages

Lesson 3: Creating Accessible Webpages

以下、要約だったりメモだったりが混ざっています。

Tools to use

Screen readers

Screen reader(スクリーンリーダー)は Webページの内容を読み上げてくれるツールであり、視覚に障害を持っている方が利用している。

スクリーンリーダーがコンテンツを正しく読み上げてくれるかチェックするために、Web開発者もこのツールに慣れるべきである。

Windows用のスクリーンリーダーとして JAWS というツールがある。Microsoft Edge ブラウザには標準で読み上げ機能がついている。

Contrast checkers

Webページ上の色のコントラストに気をつける。

Microsoft Edge には、WCAG Color contrast checker という拡張機能があり、コントラストをチェックすることができる。

Lighthouse

Microsoft Edge や Chrome についている開発者ツールには、Lighthouse というツールが含まれており、このツールでもアクセシビリティをチェックすることができる(それ以外の項目もチェックできる)。

Designing for accessibility

アクセシビリティを学ぶためのリソースは数多くあるが、ここでは Web Developers | Accessible U が紹介されている。

以下、主要な原則を示す。

Good display principles

Color safe palettes

Webサイトで使用する配色を決めるのを手助けするツールとして、Color Safe が紹介されている。

Properly highlight text

文字を装飾しても、それはスクリーンリーダーには伝わらない。文字を強調したいのであれば、<strong><em> といったHTMLタグを使うと、スクリーンリーダーにそれが伝わる。

Use the correct HTML

HTMLで表現できる要素は素直にHTMLのタグを使うこと。JavaScript や CSS で無理やり作っても、スクリーンリーダーには伝わらない。

Use good visual clues

CSS を使うといろいろな装飾ができてしまうが、枠のないテキストボックスを作ったり、下線のないハイパーリンクを作ったりして、機能を分からづらくしないこと。

The importance of link text

Screen readers and links

スクリーンリーダーに読まれたときに、分かりづらいリンクテキストは避けること。

The problem with using the URL

リンク先である URL そのものにリンクを貼ると、スクリーンリーダーが読み上げる時に分かりにくくなってしまう。

The problem with “click here”

大抵のスクリーンリーダーは、ハイパーリンクの部分だけを読み上げる機能を持っているが、”click here” がたくさんあると、ずっと “click here” が読み上げられてしまう。

Good link text

良いリンクテキストは、リンク先の内容を簡潔に説明する言葉になっていることである。(※ スクリーンリーダーは、文章をそのまま読むだけであり、どこがハイパーリンクになっているか分かるように読むわけではない。)

ハイパーリンクの良い例:

The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world.

良いハイパーリンクは、検索エンジンにとっても役に立つ。

ARIA

ARIA という仕様で決められた属性を使うと、スクリーンリーダーに追加情報を伝えることができる。

ARIA – Accessibility | MDN

Images

<img> には、alt 属性で「その画像が表していること」を記述すべきである。

検索エンジンのクローラーも alt 属性を利用している。

The keyboard

マウスやトラックパッドを使えない人もいる。

ユーザーがページをスクロールダウンしたとき、キーボードがそれぞれの要素にアクセスできるように、論理的な順番でコンテンツを提供することが重要である。

semantic markup でページを作成し、スタイルをCSSで当てているのであれば、キーボードで使いやすくなっているはずであるが、手動でテストすることは重要である。詳しくは、WebAIM: Keyboard Accessibility を参照すること。

いろいろなページを tabキーだけで閲覧してみよう。

Summary

一部の人だけがアクセスしやすいウェブは、新のWWWではない。

サイトを作成する時点で、ベストプラクティスを組み込んで利用しやすく作るのが一番よい。

Challenge

課題が載っているが、ちゃんとやると大変そうなので省略する。

3. 関連

  • Webページのアクセシビリティを評価するには、WebAIM が開発している WAVE というツールが便利です。ウェブ版とブラウザ拡張機能版があります。

4. おわりに

アクセシビリティについてはあまり詳しくないので、もう少し理解を進めていきたいと思っています。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

C言語のポインタを理解するためのお勧め書籍を紹介します

例え話をしないC言語のポインタの説明 | 右や左の旦那様 C言語のポインタについての記事が、はてなブックマークのトップページに載っていました。 私は業務・趣味のどちらにおいても C言語は使いません。し …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …

Babel とは?

目次1. Babel とは?2. JavaScript のバージョン3. プラグイン (plugins)4. プリセット (preset)5. 基本的な使い方6. Babel のイメージ 1. Bab …