プログラミング

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

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

関連記事

Redux

Redux の非同期処理サンプルページを作りました

Redux で非同期処理を行うサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

normalizr の使い方

目次1. はじめに2. normalizr とは?3. 使い方ともう少し詳しい説明4. 関連 1. はじめに JavaScript のライブラリである normalizr の使い方を簡単に説明します。 …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …

Database

データベース(MySQL)とは?

目次1. データベースとは?2. レンタルサーバーにおけるデータベース2-1. データベースソフトウェアそのものを「データベースと呼ぶ」場合2-2. データベースソフトウェア内でデータを保存する単位と …

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …