プログラミング

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

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

関連記事

WordPress

WordPress のテーマ、プラグイン開発のためのデバッグ設定

WordPress のテーマ、プラグイン開発のためのデバッグ設定や Tips について、ここにまとめていこうと思います。 目次1. wp-config.php の設定WP_DEBUGWP_DEBUG_ …

web development

Layout Instability API を使ってレイアウト・シフトを検出する

目次1. Layout Instability API について2. サンプルコード3. インターフェイス情報PerformanceObserver interfaceLayoutShift inte …

Web Programming

アクセス元のグローバルIPアドレスが表示されるだけのWebページを作る (Content-Type を変えた2種類)(PHP利用)

目次1. はじめに2. 手順(HTMLバージョン)(1) ウェブサーバー上にディレクトリを用意します(2) index.php ファイルを作成します(3) この Webページにアクセスします3. 手順 …

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …