検査を通るページ

目標

アクセシビリティ検査を実際に通過するページを書きます。ブラウザーはありませんが、マークアップの構造は、ブラウザーなしでも真偽が分かれます。

作るもの

/root/work/html/index.htmlの1つだけです。CSSもJavaScriptも必要ありません。このラボが見るのは、どのタグを選んだかです。

検査ツール

前の7つのステップと同じルールを見る検査ツールが入っています。いつでも自分で実行してみてください。

cd /root/work/html
python3 /opt/lab/checks/html-lab/audit.py index.html

指摘ごとに、どの行の何がなぜ問題なのかを教えてくれます。

ステップ

骨組み・lang・viewport
ランドマーク(mainは1つ)
h1は1つ・レベルを飛ばさない
画像3つ・装飾はalt=""
フォームの入力欄3つ・ラベルの関連付け・type/autocomplete
リンク2つ(目的を伝える文字)・動作はbutton
表(caption/thead/scope)
自分で検査 → 08-audit.txt
まとめ → 09-notes.md

参考

画像ファイルが実際になくても構いません。マークアップだけを見ます。

自動検査は、問題の30–40%だけを検出します。残りは、マウスをどけてTabキーだけで最後までやってみると、ほとんどが明らかになります。

骨組みとlang

/root/work/html/index.htmlを作成してください。<!doctype html>、<html lang="ko">、<title>、<meta charset>、<meta name="viewport">が必要です。

mkdir -p /root/work/htmlを実行します。langがないと、スクリーンリーダーが韓国語を英語の発音規則で読み上げます。1文字を直すだけで得られるものの中で、最も効果が大きいものです。viewportがないと、モバイルでデスクトップの幅でレンダリングされます。

ランドマークで地図を描く

header・nav・main・footerを入れてください。mainはページに1つだけでなければなりません。

<div class="main">は、機械に何も教えません。スクリーンリーダーのユーザーはランドマークの間を飛びながら読み、mainがあって初めて「本文へスキップ」が動作します。

見出しは目次

h1を1つだけ置き、その下にh2を2つ以上使ってください。レベルを飛ばしてはいけません(h2の次にh4は禁止)。

見出しは文字の大きさではなく、文書の目次です。大きさを変えたいなら、CSSで変更してください。h3が見た目がよいからという理由で使うのが、最もよくあるアクセシビリティの問題です。

altを正しく選ぶ

画像を3つ入れてください。内容を伝えるものを2つ(意味のあるalt)、純粋な装飾を1つ(alt="")にします。すべてのimgにalt属性が存在する必要があります。

属性そのものを省くこととalt=""は別です。省くと、スクリーンリーダーがファイル名(IMG_20240103.jpg)を読み上げ、空にしておくと、静かに読み飛ばされます。装飾画像には、必ず空のaltを明示してください。ファイルが実際になくても構いません。マークアップだけを見ます。

ラベルのない入力欄は名前を持たない

入力欄が3つあるフォームを作成してください。それぞれにlabel(for/idの関連付け)が必要で、メール欄はtype="email"とautocompleteを持つ必要があります。送信はbuttonで行います。

placeholderはラベルではありません。入力すると消えてしまい、何を書く欄だったのかわからなくなります。ラベルを関連付けると、文字をクリックしても入力欄にフォーカスが移ります(モバイルで大きな違い)。typeを正しく指定すると、モバイルのキーボードが切り替わります。

リンクは移動、ボタンは動作

実際のアドレスに向かうリンクを2つ入れてください。リンクの文字は、それ自体で目的を伝える必要があります。「ここ」「もっと見る」「クリック」はいけません。そして、動作を行う場所には、a href="#"の代わりにbuttonを使ってください。

スクリーンリーダーのユーザーは、リンクだけを抜き出して一覧で見ます。「ここ」が20個ある一覧は、役に立ちません。div onclickも使わないでください。Tabキーで移動できず、Enterキーで押せません。

表には見出しセルがある

caption、thead、th scopeを備えた表を1つ入れてください。列の見出しにはscope="col"、行の見出しにはscope="row"を使います。

scopeがあって初めて、スクリーンリーダーが「1月、売上、1200」のように読み上げます。ないと、数字だけがだらだらと読み上げられます。レイアウトの用途で表を使ってはいけません。それはCSS Gridの仕事です。

自分で検査する

/opt/lab/checks/html-lab/audit.pyを自分で実行して、結果を08-audit.txtに残してください。指摘が0件である必要があります。

python3 /opt/lab/checks/html-lab/audit.py index.html | tee 08-audit.txtを実行します。この検査ツールが見るルールは、前の7つのステップと同じです。自動検査が問題の30–40%だけを検出するということも、一緒に覚えておいてください。残りは、キーボードだけで5分使ってみると明らかになります。

何が無料だったのか

09-notes.mdに3行以上書いてください。divで作ったボタンが失うもの2つ、alt=""とalt属性の欠落の違い、そして、自動検査が捕捉できないものをどのように確認するかを書きます。

本文に키보드、alt、랜드마크が含まれている必要があります(韓国語で「キーボード」と「ランドマーク」を意味する語を含みます)。核心は1つです。アクセシビリティは、あとから載せる機能ではなく、タグを選ぶ瞬間にほとんど決まります。