動作を伝えるボタン
見えないユーザーにも操作内容が明確に伝わるラベルを付けます。
「動作を伝えるボタン」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
ボタンには名前が必要
ユーザーが何をするボタンか理解できなければ、buttonは役に立ちません。アクセシブルな名前は、押す前にスクリーンリーダーが読み上げる内容です。
テキストが名前になる
通常のbuttonでは、内部に表示されるテキストがアクセシブルな名前になります。明確な言葉を使えば、読み上げも明確になります。
<button>Save changes</button>操作を伝える
buttonには、Save、Delete、Add to cartのように実行する操作をラベルとして付けます。動詞を使うと、何が起きるのかを正確に伝えられます。
曖昧なラベルを避ける
複数のボタンでOK、Submit、Goなどを共有すると、ラベルが曖昧になります。それぞれが単独で意味を持つよう、具体的なactionを示してください。
アイコンだけの問題
テキストのないアイコンボタンにはアクセシブルな名前がありません。スクリーンリーダーが単に「ボタン」と読み上げるだけになり、ユーザーは何をするものか推測することになります。🤔
<button><svg>...</svg></button>アイコンボタンに名前を付ける
文字のないbuttonには、aria-labelで名前を付けます。これでアイコンの表示を保ったまま、支援技術が操作内容を読み上げられます。
<button aria-label="Close dialog"><svg>...</svg></button>装飾用アイコンを隠す
ラベルですでに操作内容を示している場合は、内部のiconにaria-hiddenを設定し、余計な情報として読み上げられないようにします。
<svg aria-hidden="true">...</svg>状態の変化を伝える
切り替え用のbuttonは状態を伝える必要があります。aria-pressedを使うと、オンかオフかをスクリーンリーダーに知らせられます。
<button aria-pressed="true">Mute</button>コンテンツを展開する
パネルを表示または非表示にするbuttonにはaria-expandedを設定し、開いているか折りたたまれているかをユーザーが聞けるようにします。
<button aria-expanded="false">Details</button>短く正確なラベルにする
適切なlabelは短く、かつ正確です。ボタンを押すと何が起きるのかをそのまま示し、予想外の結果が生じないようにします。
表示とアクセシブルな名前を一致させる
buttonに表示テキストがある場合は、その語句をアクセシブルな名前にも含めてください。音声操作のユーザーが、見えているラベルを話して操作できます。
確認問題
×だけが表示されたアイコン専用の閉じるボタンに、アクセシブルな名前を付けるにはどうしますか。
まとめ
すべてのbuttonに操作内容で名前を付け、アイコンだけのものにはラベルを付け、aria属性で状態を伝えます。これでユーザーは常にボタンの役割を理解できます。👍
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「動作を伝えるボタン」レッスンは無料ですか？
はい。「動作を伝えるボタン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「動作を伝えるボタン」で何を学びますか？
見えないユーザーにも操作内容が明確に伝わるラベルを付けます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「動作を伝えるボタン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。