入力欄にautocompleteを指定する：氏名とメールの用途を照合する
氏名やメールの入力欄に、自動補完のための用途を指定します。架空の見学会を題材に、label・type・autocompleteの違い、候補が出ないときの切り分け、氏名を分割する場合の確認を説明します。
#アクセシビリティ #入力欄にautocompleteを指定する
CATEGORY / アクセシビリティ
アクセシビリティの記事一覧
アクセシビリティについて学べるWeb制作スクール「0→1」の記事一覧。実践的な制作方法やポイントを分かりやすく解説します。
今いるページをナビゲーションに示す：現在地とフォーカスを分ける
ナビゲーションの現在地が色だけになっていませんか。架空の資料室の三ページを使い、aria-currentと表示文を対応させます。複製時の印の残りと、Tab操作のフォーカスとの違いを確認する練習です。
#アクセシビリティ #今いるページをナビゲーションに示す
HTMLのlangで文章の言語を指定する：ページ全体と英文の範囲を分ける
日本語のページにひな形のlang="en"が残っていませんか。架空の展示室案内で、文書全体の言語と英語一段落の指定を分けます。親からの継承、指定範囲の広げすぎ、文字コードとの違いを確認する練習です。
#アクセシビリティ #HTMLのlangで文章の言語を指定する
progressで進み具合を示す：0件と割合不明の状態を分ける
進捗が分からないときに0%と表示していませんか。架空の資料整理画面で、全体量と完了量をそろえ、valueを省く状態と0を指定する状態を比較します。名前の関連付けと説明文も確認する練習です。
#アクセシビリティ #progressで進み具合を示す
入力欄の補足説明を関連付ける：項目名と入力のヒントを分けよう
入力欄のそばに注意文を置くだけで終えていませんか。架空の作品応募欄を使い、項目名と入力のヒントを分け、aria-describedbyで補足説明を関連付ける手順を紹介します。
#アクセシビリティ #form
ラジオボタンをfieldsetでまとめる：質問と選択肢の関係を残す
「午前」「午後」だけが並ぶと、何について選んでいるか分からなくなります。架空の体験会を使い、fieldsetとlegendで質問ごとにまとめ、nameとlabelの役割も分けて確認します。
#フォーム #fieldset #ラジオボタン
動きを減らす設定にCSSで対応する：静止した状態を基本にする
装飾のアニメーションを、動きを減らしたい人の設定に合わせて切り替えます。架空の展示案内を使い、静止した状態を先に作り、no-preferenceの場合だけ動きを加えるCSSを紹介します。
#CSS #アニメーション #アクセシビリティ
HTMLの表に見出しを付ける：行と列の意味をscopeで示す
表の数字は読めても、何の値か分からない状態を見直します。架空の工作室の時間割を使い、表の名前、行見出し、列見出しをHTMLで表し、数値との対応を確認する練習です。
#HTML #表 #アクセシビリティ
Tabキーで今どこにいるか、フォーカスの表示を直そう
マウスでは使えるのに、Tabキーで進むと現在位置が見えない。架空の施設案内を例に、消された枠を見直し、focus-visibleで表示を付け、順方向と逆方向の操作を確認します。
#アクセシビリティ #キーボード #フォーカス
画像のaltに何を書くか、ページでの役割から決めよう
すべての写真に詳しい説明を書くべきか迷ったら、画像の役割を確認します。架空の園芸教室を例に、情報を伝える写真、飾り、リンクの画像を分け、代替テキストを考える練習です。
#アクセシビリティ #画像 #alt
長いメニューを飛ばして本文へ進む、スキップリンクを作ろう
毎ページ同じメニューをTabキーで通る負担を減らすため、本文への入口を用意します。架空の地域資料館を例に、リンクと移動先の作り方、フォーカス移動まで含めた確認手順を紹介します。
#アクセシビリティ #スキップリンク #ページ構造
TRY A LESSON
読んだら、
少し作ってみよう。
課題とレビューで学ぶ、
15本の無料レッスン。