実践: アクセス可能なフロントエンドアプリケーションを構築する

アクセシビリティ (略して A11y) は、現代の Web 開発において非常に重要なトピックです。アクセシブルなフロントエンドアプリを構築するということは、障害のある人を含むすべてのユーザーがアプリにアクセスできるようにすることを意味します。これは道義的責任であるだけでなく、より幅広いユーザーベースを引き出し、ユーザーエクスペリエンスを向上させ、法律や規制の遵守にも役立ちます。

この記事では、セマンティック HTML、フォーカス管理、ARIA 属性、アクセシブルなフォームと画像など、アクセシビリティ対応のフロントエンドアプリケーションを構築するための基本的な概念とテクニックを紹介します。コード例を組み合わせて、実戦でのアクセシビリティに優れたフロントエンドアプリケーションを作成する方法を段階的に示します。

1. セマンティック HTML

セマンティック HTML は、アクセス可能なフロントエンドアプリケーションを構築するための基盤です。セマンティックマークアップを使用すると、スクリーンリーダーと検索エンジンにより多くの情報が提供され、Web サイトのコンテンツが理解しやすくなり、ナビゲートしやすくなります。一般的なセマンティックタグをいくつか示します。

<header>: ページまたはブロックのヘッダーを定義するために使用されます。
<nav>: ナビゲーションリンクを定義するために使用される領域。
<main>: ページのメインコンテンツ領域を定義するために使用されます。
<article>: スタンドアロンの記事またはコンテンツブロックを定義するために使用されます。
<section>: ドキュメント内のセクションまたはブロックを定義するために使用されます。
<aside>: ページのサイドバーのコンテンツを定義するために使用されます。
<footer>: ページまたはブロックのフッターを定義するために使用されます。

これらのセマンティックタグを使用すると、ページ構造がより明確になり、スクリーンリーダーや検索エンジンがページのコンテンツをよりよく理解できるようになります。

1.1 例: セマンティックタグを使用してページ構造を構築する

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>欢迎来到我们的网站</h2>
      <p>这里是网站的主要内容。</p>
    </section>

    <section>
      <h2>最新文章</h2>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
      <article>
        <h3>另一篇文章标题</h3>
        <p>文章内容...</p>
      </article>
    </section>
  </main>

  <footer>
    <p>版权所有 © 2023，可访问的前端应用</p>
  </footer>
</body>
</html>

上記の例では<header>、、<nav>、<main>、、などのセマンティックタグを使用して、ページの基本構造を構築しました。このような構造は読みやすく理解しやすいだけでなく、アクセシビリティにも役立ちます。<section><article><footer>

2. 集中管理

フォーカス管理は、アクセス可能なフロントエンドアプリケーションを構築する際のもう 1 つの重要なポイントです。フォーカス管理により、ユーザーはマウスに頼らずにキーボードとスクリーンリーダーを使用してアプリをナビゲートおよび操作できるようになります。適切なフォーカス管理を実現するには、インタラクティブな要素 (リンク、ボタン、フォームコントロールなど) に適切なフォーカススタイルを追加し、ユーザーの操作時にフォーカスが正しく移動することを確認する必要があります。

2.1 例: フォーカススタイルの CSS スタイルの追加

/* 在用户使用键盘导航时，为可交互元素添加焦点样式 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #007bff; /* 添加一个蓝色的边框作为焦点样式 */
}

上の例では<a>、、<button>、<input>、<select>など<textarea>の対話可能な要素にフォーカススタイルを追加しました。このように、ユーザーがキーボードを使用して移動すると、フォーカスには青い境界線が表示されるため、ユーザーは現在フォーカスがある要素を明確に知ることができます。

2.2 例:`tabindex`属性を使用してフォーカス順序を制御する

HTML では、tabindex属性を使用してフォーカスの順序を制御できます。tabindex属性の値はフォーカス順序における要素の位置を決定し、値が小さいほど早くフォーカスを取得します。同時に、tabindex="-1"要素が JavaScript スクリプトを通じてフォーカスを取得できるようにするために使用することもできますが、通常のフォーカス順序には参加しません。

<button>第一个按钮</button>
<button tabindex="-1">不参与焦点顺序的按钮</button>
<button>第二个按钮</button>

上の例では、2 番目のボタンに負の値が付いていますがtabindex、他のボタンのフォーカス順序に影響を与えることなく、JavaScript スクリプトを介してフォーカスを取得できます。

3. ARIA 属性の使用

ARIA (Accessible Rich Internet Applications) は、アクセシビリティを強化するために使用される HTML 属性のセットです。ARIA 属性を使用すると、スクリーンリーダーにさらに多くの情報を提供できるため、スクリーンリーダーはアプリをよりよく理解し、操作できるようになります。ARIA 属性は、意味論的な意味を持たないコンポーネントを修正したり、スクリーンリーダーにより多くのコンテキスト情報を提供したりするためによく使用されます。

3.1 例:`aria-label`属性を使用してアイコンに説明を追加する

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/" aria-label="回到首页">首页</a></li>
        <li><a href="/about" aria-label="查看关于页面">关于我们</a></li>
        <li><a href="/contact" aria-label="联系我们">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <!-- 页面内容... -->

</body>
</html>

上の例では、aria-label属性を使用してナビゲーションリンクに説明を追加しています。これにより、リンクを読むときにスクリーンリーダーがユーザーにリンクの動作をプロンプト表示し、アクセシビリティを向上させます。

3.2 例:`aria-labelledby`属性を使用してラベルの関連付けをフォーム入力ボックスに追加する

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" aria-labelledby="username">
    <button type="submit">提交</button>
  </form>
</body>
</html>

上の例では、aria-labelledby属性を使用して<input>要素を要素に関連付け<label>、スクリーンリーダーが入力ボックスを読み取るときにユーザーに入力ボックスのラベルの入力を求めるようにしています。

4. アクセシブルなフォーム

フォームは、Web アプリケーションで最も一般的な対話型要素の 1 つです。アクセシブルなフォームを構築すると、ユーザーはフォームの内容を入力したり、スクリーンリーダーを使用してフォームを正しく操作したりすることが容易になります。

4.1 例: フォーム要素へのラベルの追加

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name">

    <label for="email">邮箱：</label>
    <input type="email" id="email">

    <label for="message">留言：</label>
    <textarea id="message"></textarea>

    <button type="submit">提交</button>
  </form>
</body>
</html>

上の例では、各フォーム要素にラベルを追加しました。これにより、フォームを読むときにスクリーンリーダーがユーザーに各入力ボックスにラベルを付けるよう求め、アクセシビリティが向上します。

4.2 例:`aria-invalid`無効な入力を属性でマークする

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" aria-invalid="true">

    <button type="submit">提交</button>
  </form>
</body>
</html>

上の例では、aria-invalid属性を使用して無効な入力ボックス (必須フィールドが入力されていないなど) をマークしました。これにより、スクリーンリーダーが入力ボックスを読み上げるときに、入力ボックスの内容が無効であることをユーザーに通知します。

5. アクセシブルな画像

Webアプリケーションにおいて画像は重要なコンテンツの一つです。アクセシブルな画像を作成すると、スクリーンリーダーのユーザーは画像の内容を理解し、画像に適切な代替テキストを追加できるようになります。

5.1 例: 画像に代替テキストを追加する

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <img src="example.jpg" alt="示例图像">
</body>
</html>

上の例では、画像コンテンツを記述するために要素に属性を<img>追加しました。altこれにより、スクリーンリーダーが画像を読み上げるときに、ユーザーに画像の代替テキストの入力を求めるプロンプトが表示されます。

5.2 例: CSS を使用して純粋に装飾的な画像を非表示にする

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <style>
    .decorative-image {
      position: absolute;
      width: 1px;
      height: 1px;
      clip: rect(1px, 1px, 1px, 1px);
    }
  </style>
</head>
<body>
  <img src="decorative.jpg" alt="" class="decorative-image">
</body>
</html>

上の例では、CSS を使用してページ上の純粋に装飾的な画像を非表示にしました。こうすることで、スクリーンリーダーが画像を読み取って、ユーザーの読書体験を妨げることがなくなります。

6. アクセシビリティのテスト

アクセシブルなフロントエンドアプリケーションを構築するには、いくつかの属性やスタイルを追加するだけでなく、アプリケーションがさまざまな環境で適切に動作することを確認するためのテストも行われます。

6.1 アクセシビリティテストツールの使用

アプリのアクセシビリティをチェックするのに役立つアクセシビリティテストツールが多数あります。例えば：

Lighthouse : Lighthouse は Google によって開発されたテストツールで、アプリケーションのパフォーマンス、アクセシビリティ、ベストプラクティスなどをテストし、対応する改善提案を提供できます。
ax : ax はオープンソースのアクセシビリティテストツールで、開発ツールに組み込むことで、開発者がアクセシビリティの問題を適時に発見して修正できるようにします。
WAVE : WAVE は、ページ内のアクセシビリティの問題を確認し、修正のための詳細な提案を提供するオンラインアクセシビリティ評価ツールです。

6.2 アクセシビリティのユーザーエクスペリエンステストを実施する

アクセシビリティテスト用のツールを使用することに加えて、アクセシビリティ UX テストも実施する必要があります。障害を持つユーザーやスクリーンリーダーを何人か招待して、アプリをテストしてフィードバックをもらいます。彼らのフィードバックは、アプリのアクセシビリティを向上させるのに非常に役立ちます。

7. まとめ

アクセス可能なフロントエンドアプリケーションの構築は、最新の Web 開発に不可欠な部分です。セマンティック HTML、フォーカス管理、ARIA 属性、アクセシブルなフォーム、画像などの技術を使用することで、アプリケーションのアクセシビリティを向上させ、障害のある人を含むすべてのユーザーがアプリケーションを障壁なく使用できるようになります。同時に、アプリケーションがさまざまな環境で適切に動作できるかどうかをテストする必要もあります。

継続的な学習と実践を通じて、私たちはアクセスしやすいフロントエンドアプリケーションを構築する方法を知り、より包括的でフレンドリーな Web 世界の構築に貢献できる優れた開発者になることができます。この記事が、アクセス可能なフロントエンドアプリケーションの構築に役立つことを願っています。今後のご発展をお祈り申し上げます。