第一の原則：悪いARIAよりARIAなし
ネイティブHTMLがほとんどの場合により良い選択である理由を学びます。
「第一の原則：悪いARIAよりARIAなし」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
ARIAとは何か
ARIAは、マークアップだけでは要素の種類や役割を伝えられない場合に、支援技術へそれらを伝えるHTML属性の集合です。
ARIAは動作を変更しない
注意すべき点があります。ARIAが変更するのは読み上げられる内容だけです。ARIAだけでクリック操作、フォーカス、キーボード対応が追加されることはありません。
<div role="button">Save</div>
<!-- looks like a button, does nothing -->ARIAの第一原則
公式の第一原則は、ネイティブHTML要素で実現できるなら、それを使うことです。ARIAで同じものを作り直してはいけません。
ネイティブ要素は最初から揃っている
本物のbuttonはフォーカス可能で、EnterとSpaceで動作し、役割も標準で読み上げられます。これらを自分で実装する必要はありません。
<button>Save</button>
<!-- focus, keyboard, role: all built in -->不適切なARIAがより悪い理由
誤ったroleはユーザーに積極的な誤情報を伝えます。悪いARIAはARIAがないよりましどころか、コンテンツを隠したり誤って説明したりするため、さらに害になります。
上書きの罠
ARIAはネイティブのセマンティクスを上書きします。見出しにrole=presentationを設定すると、スクリーンリーダーはそれを見出しとしてまったく扱わなくなります。
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->ARIAが提供する3つのもの
ARIAが提供する情報は、正確には3種類だけです。role（何であるか）、state、propertyです。これがすべての道具です。
ARIAはCSSに影響しない
要素にaria-hiddenを設定するとスクリーンリーダーからは隠れますが、画面上では完全に表示されたままです。この2つの層は別々です。
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->ARIAを使うべき場合
tablistやカスタムスライダーのように、適したネイティブ要素がない場合にARIAを使います。そのうえで、正確に設定してテストしてください。
ARIAとJavaScriptを組み合わせる
カスタムウィジェットを作らなければならない場合は、ARIAとJavaScriptを組み合わせます。ARIAが名前を示し、JSがフォーカスとキーボード操作のロジックを担います。
少ないほどよい
アクセシブルなページには、ARIAがほとんど必要ないことがよくあります。まずはセマンティックHTMLを使い、それだけでは足りない部分にのみARIAを追加してください。
確認問題
クリック可能なSaveコントロールが必要です。最もアクセシブルな選択肢はどれでしょうか。
まとめ：ARIAを適切に使う
ARIAは説明するだけで、動作は提供しないことを学びました。ネイティブHTMLを優先し、実際に不足している部分にのみARIAを追加して、毎回テストしてください。🎯
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「第一の原則：悪いARIAよりARIAなし」レッスンは無料ですか？
はい。「第一の原則：悪いARIAよりARIAなし」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「第一の原則：悪いARIAよりARIAなし」で何を学びますか？
ネイティブHTMLがほとんどの場合により良い選択である理由を学びます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「第一の原則：悪いARIAよりARIAなし」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 第一の原則：悪いARIAよりARIAなし
- ロールは対象が何であるかを定義します
- 状態とプロパティ：expanded、checked、disabled
- アクセシビリティツリーを読んでARIAをデバッグする