アクセシビリティ対策を始めたお話

はじめに

私が担当している弊社のサービス「モッピー」では、「HTML構造」などには注意を払ってコーディングしていましたが、「アクセシビリティ」に関しては具体的な対策を意識的に行っていませんでした🫣💦

そこで、「障害者差別解消法の改正内容が適用された」ことや、「チーム内からの意見」を受けて、本格的に「アクセシビリティ対策」を始めることになりました。

具体的な対策方法は？

指針がないと対策することが難しいため、弊社のサービスでは2つの方法を取りました。

1️⃣ 検証ツールで確認する

PageSpeed Insights

Googleが提供する無料ツールで、モバイル端末とデスクトップ端末の両方におけるウェブページのパフォーマンスを分析するツールです。
https://pagespeed.web.dev/

検証したいURLを入力し、ユーザー補助の欄を確認し、改善箇所を確認します。

携帯電話・デスクトップをまとめて分析できるメリットはありますが、ログイン後の状態は分析できないデメリットもあります。

Lighthouse

同じく、Googleが提供するウェブサイトの品質を評価するための自動化ツールです。こちらは、Chromeから操作できるため、ログイン後の状態も分析することができます。

分析したいページを開き、開発者ツール > Lighthouse > デバイスを選択 > カテゴリの中からユーザー補助を選択し、ページ読み込みを分析するをクリックし、改善箇所を確認します。

ログイン前の状態では、どちらも同じ改善内容の結果が確認できました。ログイン後のページを確認したい場合は、Lighthouseの方がおすすめです。

2️⃣ スクリーンリーダーで実際に使用し確認する

以下のツールを使用して、実際に問題がないか確認していきます。
分析ツールだけでは気づけない問題を発見することができます。

OS	使用ツール
macOS	VoiceOver
Windows	ナレーター

具体的な対策・修正内容

検証ツールで見つけた改善箇所を元に、修正した内容を一部ご紹介します。

1️⃣ meta情報の見直し

[user-scalable="no"] が 要素で使用されているか、[maximum-scale] 属性が 5 未満に指定されています。

弊社サービスは長期間にわたり運用しているため、meta情報の更新が滞っていました。ズームを許可しないことでサイトのレイアウト崩れを防ぐ意図があったのですが、この設定ではズーム機能を無効にしてしまい、視覚障害を持つユーザーや小さな画面を使用しているユーザーにとって重要な機能が失われていました。そこで、以下のようにコードを修正し、ズームを許可することにしました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">

2️⃣ カルーセルのHTML構造の見直し

リストには、<li> 要素と、スクリプト対応要素（<script> と <template>）以外も含まれています。
リスト項目（<li>）が <ul>、<ol> または <menu> の親要素に含まれていません。

弊社サービスでは、複数のバナーを表示する箇所にカルーセルのプラグインを使用しています。以下のようなHTML構造は問題がないと思っていました。

<ul class="js-slider">
    <li>***スライド***</li>
    <li>***スライド***</li>
    <li>***スライド***</li>
</ul>

しかし、実際にはプラグインが出力するコードによって、HTML構造は崩れていました。そこで、公式のコードに従って<div>タグを使用するように変更しました。

<div class="js-slider">
    <div>***スライド***</div>
    <div>***スライド***</div>
    <div>***スライド***</div>
</div>

3️⃣ リンクに識別可能な名前を指定する

リンクに識別可能な名前が指定されていません

SVGのロゴにリンクを設定していましたが、識別可能な名前が指定されていませんでした。そこで、aria-labelを追加して、リンクを識別できるようにしました。

<a href="https://pc.moppy.jp/" aria-label="ポイ活するならモッピー">

4️⃣ altの付け方

画像要素に、重複する内容の[alt] 属性が含まれています。

画像とテキストの内容が同じ場合に、同一のテキストをalt属性に設定していました。このため、画像のalt属性とテキストが重複しないように見直し、修正しました。

5️⃣ プルダウン要素の見直し

一部の要素にラベル要素が関連付けられていません。

プルダウンの箇所にラベル要素を付けられていませんでした。

<select>
    <option>2025年4月</option>
</select>

そこで、テキストを表示させたくなかったため、aria-labelを追加し、修正しました。

<select aria-label="年月を選択">
    <option>2025年4月</option>
</select>

さいごに

いかがでしたでしょうか？

改善箇所がたくさん表示されると、どこから手を付ければよいか分からなくなりますが、検証ツールは複数の修正方法を提示してくれるので、その中からサイトに合った方法を選び、一つ一つ項目をクリアしていくことが大切だと思います。

弊社のサービスも、まだまだ改善の余地がある箇所やページが多く存在しますが、一つ一つの改善や実装方法の変更を通じて、より使いやすいサービスを目指していきたいと考えています。

本記事が、アクセシビリティ対策のきっかけとなれば幸いです😊