アクセシビリティとは何か、なぜ重要なのか？」というレッスンを見たことがあれば、デジタルアクセシビリティが幅広い概念であり、その核心は、できるだけ多くの人がウェブを利用できるようにすることだとご存じでしょう。
法的およびビジネス上の側面もありますが、最も重要なのは、アクセシビリティガイドラインに従うことで、誰にとってもブラウジング体験が大幅に向上することです。
アクセシブルなテーマ、プラグイン、またはサイトを作成する最も簡単な方法は、最初からアクセシビリティについて考えることです。計画段階で取り入れ、同僚（およびクライアント）にもその重要性を理解してもらいましょう。そうすれば、初期段階でミスを見つけられるだけでなく、多くのミスを事前に回避できます。
このレッスンでは、アクセシブルなHTMLの基本を学び、それをWordPressテーマに適用する方法を理解します。
基本事項
HTMLは強力であると同時に、アクセシブルでもあります。
実際に試してみましょう。コードエディターを開き、ランドマーク、見出し、テキスト、ボタン、リンク、フォームなどで適切にマークアップされた、有効なHTMLページを作成してください。
必要であれば、以下のコードを使用できます。
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>私のウェブサイト</title>\n</head>\n<body>\n\n<header>\n <h1>私のウェブサイトへようこそ</h1>\n <nav>\n <ul>\n <li><a href="#home">ホーム</a>\n <li><a href="#about">概要</a>\n <li><a href="#services">サービス</a>\n <li><a href="#contact">お問い合わせ</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <article id="home">\n <h2>ホーム</h2>\n <p>これはホームセクションで、紹介コンテンツが表示されます。</p>\n <form name="Just a button">\n <button type="button">クリックしてください！</button>\n </form>\n </article>\n\n <article id="about">\n <h2>概要</h2>\n <p>このセクションには、ウェブサイトまたはその背後にいる個人・会社の情報が含まれます。</p>\n <p><a href="https://example.com">詳細なプロフィールを見る</a></p>\n </article>\n\n <article id="services">\n <h2>サービス</h2>\n <p>提供されているサービスの詳細はこちらで確認できます。</p>\n </article>\n\n <article id="contact">\n <h2>お問い合わせ</h2>\n <form action="#" method="post" name="contact" autocomplete="on">\n <fieldset>\n <legend>お話ししましょう</legend>\n <div><label for="name">名前：</label></div>\n <div><input type="text" id="name"></div>\n <div><label for="email">メールアドレス：</label></div>\n <div><input type="email" id="email"></div>\n <div><label for="message">メッセージ：</label></div>\n <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>\n <div><input type="submit" value="送信"></div>\n </fieldset>\n </form>\n </article>\n</main>\n\n<footer>\n <p>© 2024 私のウェブサイト</p>\n</footer>\n\n</body>\n</html>\n次に、Web Accessibility Checkerのようなオンラインツールでコードをテストし、アクセシビリティの問題が表示されないことを確認してください。
問題は通常、スタイル、スクリプト、またはメディアアセットを追加したときに始まります。現代のWordPressテーマ開発者として、主にこれらの技術を扱うことになります。たとえば、Reactベースのブロック、PHPで作成されたパターン、theme.jsonから生成されるCSSなどです。
重要なのは、コーディングやデザインを行う際にアクセシビリティを意識することです。
カスタムブロック、テンプレート、パターンを作成する際に、開発者やデザイナーが従えるいくつかの手法とベストプラクティスを見てみましょう。
セマンティックHTML
すべてを<div>要素で囲むのではなく、HTMLのセマンティック、つまり意味を持つ要素を使用してください。
これにより、不必要に複雑なコードや、「車輪の再発明」のような手間を避けられます。
ランドマーク
ランドマークは、ページの構造を定義する方法です。スクリーンリーダーがコンテンツをより簡単にナビゲートできるようにします。
たとえば、いくつかの<div>とそのクラスを使用する代わりに、次のようにします。
<div class="header">\n <h1>私のウェブサイトへようこそ</h1>\n</div>\n\n\n<div class="nav">\n <ul>\n <li><a href="#home">ホーム</a></li>\n <li><a href="#about">概要</a></li>\n <li><a href="#services">サービス</a></li>\n <li><a href="#contact">お問い合わせ</a></li>\n </ul>\n</div>適切なセクションにはランドマークを使用できます。
<header>\n <h1>私のウェブサイトへようこそ</h1>\n</header>\n\n\n<nav>\n <ul>\n <li><a href="#home">ホーム</a></li>\n <li><a href="#about">概要</a></li>\n <li><a href="#services">サービス</a></li>\n <li><a href="#contact">お問い合わせ</a></li>\n </ul>\n</nav>Site Editorでテーマをデザインまたは作成する場合は、そこでもランドマークを設定できます。
Group、Row、Stackブロックをコンテンツセクション分け要素として定義するには、ブロックを選択し、Settings を開いて、Advanced セクションを展開します。
下にスクロールし、ブロックの役割と位置に応じて、 HTML ELEMENTとしてheader、main、section、article、aside、またはfooterを選択します。
見出し
テンプレートに見出しを追加する際は、常に正しい順序で見出しを使用し、H2から始めて順番にH6まで進めてください。
Site Editorで、Document Overview > Outlineをクリックし、レベルが抜けていないか、すべてが正しく設定されているか確認してください。
ボタンとリンクの違い
ユーザーアクションをデザインする際は、ボタンとリンクの使い分けについて、次の点を考慮してください。
- ユーザーにアクションを完了してもらいたい場合は、button要素を使用します。
- 別のページへ移動してもらいたい場合は、anchor要素（<a>）を使用します。
- ランディングページのコールトゥアクションなど、リンクをボタンのように見せたい場合は、CSSでスタイルを設定します。
フォーム
テーマでフォームをデザインする場合は、次のガイドラインに従ってください。
フォームは必ずform要素の中に配置します。
入力フィールドには常に適切なtypeと対応する属性を設定します。たとえば、入力のtypeをtelとして定義すると、モバイルデバイスで数字キーパッドが表示されます。
<input type="tel" name="phone" id="phone" required>入力フィールドの用途を説明するために、placeholderテキストだけに頼らず、必ずアクセシブルなラベルを使用してください。
検索フォームにはsearch要素を使用します。
ログインフォームをデザインする際は、autocomplete属性を使用して、パスワードマネージャーによるフォーム入力を支援できます。
<input type="password" autocomplete="current-password">デフォルトでは、ほとんどのブラウザーがフォーカスされた要素にフォーカスリングを表示します。
このフォーカスリングの表示を変更したい場合は、:focus-visible疑似クラスを使用し、フォーカスリングを完全に削除しないでください。
色
十分なコントラストを備えたアクセシブルなカラーパレットを作成してください。
テンプレートを編集する際、十分なコントラストが得られないテキストと背景色を使用すると、WordPressが警告します。
情報を色だけで伝えないでください。たとえば、リンクを色だけで示すのではなく、フォーカス状態も同様に定義してください。迷った場合は、デフォルトのHTMLリンクとフォーカスのスタイルを確認し、それに従いましょう。
タイポグラフィ
フォントサイズを設定する際は、pxの使用を避け、remなどの相対単位を使用してください。
コンテンツの幅は50〜70文字に制限してください。この目的にはcharacterまたはch単位が最適です。
フォントサイズに応じて、十分な行間を使用してください。
ユーザーの好みを優先する
レスポンシブデザインの基本はmedia queriesです。これはユーザー体験の向上に役立ちます。
prefers-color-schemeやprefers-reduced-motionなどのmedia queryはアクセシビリティに直接関係します。また、pointer、hover、scriptingなどのqueryを使用して、デバイスに応じてコンポーネントの動作を調整できます。
ARIAの回避策
ARIAはAccessible Rich Internet Applications frameworkの略称で、HTMLコンテンツをスクリーンリーダーにとってよりアクセシブルにする手軽な方法として、しばしば紹介されます。
ただし、ARIAを使用する際の最も重要なルールは、本当に必要な場合にのみ使用することです。理想的には、スクリーンリーダーにコンテンツの意味を伝えるため、常にHTML固有の機能を使用すべきです。
ARIA属性を誤って使用するとアクセシビリティが低下するため、HTMLを制御できない場合や動的コンテンツを扱う必要がある場合を除き、使用を避けてください。
詳しくは、MDNのWAI-ARIA basicsをご覧ください。
まとめとさらなる学習
アクセシビリティは継続的なプロセスです。小さな改善でもサイト訪問者に大きな違いをもたらす可能性があり、悪影響はありません。ユーザー体験を損なうことは決してありません。
さらに学ぶには、 W3C Web Accessibility Initiative (WAI) Tutorialsをご覧ください。