この記事はデジタルキューブ＆ヘプタゴン Advent Calendar 2024 の 12月13日分の記事として執筆しています。

7月に入社したトモコです。デジタルキューブに入るまでは、Webデザイナーをしたり、フリーランスのコーダーなどをしていました。
現在は、主にWordPress保守の他に、開発などの仕事を担当しています。

はじめに

今回は、サイトのアクセシビリティについて、コーダー目線で今すぐ実践できるTipsをご紹介します。今までの制作現場での経験や、大手企業のコーポレートサイトに携わった際、培ったノウハウをお伝えできればと思います。
納品前の少しの工夫で、サイトの品質が向上し、SEOにも貢献できるポイントがあります。参考にしてみてください。

アクセシビリティについてのおさらい

国際的なWebガイドライン

W3C

W3C（World Wide Web Consortium）は、Web技術の標準化を推進する国際的な組織です。すべてのユーザーにとって使いやすいWebコンテンツを目指し、WCAG（Web Content Accessibility Guidelines）というガイドラインを策定しています。この『Web標準』への準拠は、Webサイトの品質を判断する重要な基準の一つです。

日本版Webガイドライン

WCAG（ウェブアクセシビリティ基盤委員会）

日本では、WCAG（ウェブアクセシビリティ基盤委員会）が定めるJIS X 8341-3:2016が、アクセシビリティ対応においての指針となります。
アクセシビリティの達成レベルをAAAなどの数値化することで、すべてのユーザーにとって使いやすいウェブサイト作りに貢献しています。
公共機関、学校や銀行、病院などWebサイトでは、このガイドラインに準拠してあることが求められます。また、一般企業でも準拠の流れが進んでおり、アクセシビリティ対応が「付加価値」から「必須条件」になりつつあります。

アクセシビリティカンファレンス

近年、アクセシビリティに対して積極的に取り組もうという流れが広がっています。
つい先日の11月30日に、福岡でアクセシビリティカンファレンス2024が開催されました。

アクセシビリティカンファレンス2024

HTMLの品質チェックツール「Markuplint」の開発者であり、アクセシビリティスペシャリストのゆうてんさんが実行委員長を務められ、SmartHRさんが行っているアクセシビリティ対策などについて具体的なセッションが行われました。このイベントのセッション内容はYouTubeで公開されています。

すべてのマークアップ開発者のためのHTMLリンター

SmartHR Design System-アクセシビリティ

簡単にできるアクセシビリティ対応

色に意味を持たせない

人によって色の見え方が違うということを聞いたことがある人は多いと思います。
色覚特性を持っている日本人男性は20人に1人の割合と言われています。そう考えると、40人クラスの場合、クラスに1〜2人はいるとても身近なものです。

Webサイトを作る上で、色に関して気を付けるべきところは「色」に意味を持たせないということです。

簡単にいうと「重要な情報を赤い文字だけで強調しない」ということです。
赤い文字が判別できない人にとっては、どこが重要な場所なのか判断できないからです。
強調する場合、色だけでなく、それ以外の部分、たとえば下線、文字の太さや※マークなど記号でも、重要部分と判別できるようにしましょう。

すぐにチェックする方法として、オススメな方法があります。いったん、デザインを全部白黒にしてみることです。
FigmaやPhotoshopなどで、グレースケールにしてみると、デザインで問題がある箇所、色で情報を伝えようとしている場所が一目瞭然でわかります。

コントラスト比について

同じ色を使った場合でも、背景色とのコントラスト比が変わるだけでずいぶんと見やすくなるそうです。

色のコントラスト比を図るツールもいろいろあります。色を選ぶ際の指針にしてもよいかもしれません。

最近では、ブラウザの開発者ツールでもコントラスト比がチェックできます。またChromeなら、DevToolsの中にすでにLighthouseが入っているので、そちらでもコントラスト比をチェックできます。

Chrome DevTools

その他に、Chrome拡張機能などでも様々なアプリが無料で配布されているので、ぜひチェックしてみてください。

オススメChromeアドオン

WCAG Color contrast checker

WCAG 2.2準拠で、前景と背景のコントラストをチェックするツール

高すぎるコントラスト比は逆効果

そしてもう1つ。色のことについて忘れがちなのが、背景を#FFFの真っ白にして、文字を黒#000にするケース。避けた方がいいです。

コントラスト比が高すぎると、人は長時間画面を見続けるのが難しくなります。これは、回遊率が悪くなることにも繋がります。
とくに、目の色素が薄い人、たとえば、目の色が青や緑の人にとって真っ白のブラウザに黒文字は非常にツライという話を聞きます。多くの目にとまるグローバルなサイトはとくに、避けた方がよい配色かもしれません。
その際は、文字の色を少し彩度をおとした濃いグレーにしたり、サイト全体にダークテーマを導入するなどがオススメです。

読み手の多様性に配慮

近年、グローバル化がすすみ、すべての人が読んで理解できるコンテンツ作りが求められています。
サイトでは、できるだけ優しい日本語、わかりやすい日本語を使いましょう。
とくに、敬語を多用するのをやめて、簡潔で分かりやすい表現を心がけましょう。丁寧にしようとすると、逆に意図が伝わりにくい場合があります。

「例：ご配慮いただけますように → しないでください／禁止です」　など、わかりやすく表現する

また、英語、カタカナを文章内で多用しないようにしましょう。読みやすくするために、文章の区切りを多く取るようにしましょう。3行以上つながった文章は頭に入りづらいことがあります。
これは、アクセシビリティの観点からだけでなく、マーケティングの観点からも考えるべきことだと言われています。

「コンテンツの内容を短文に変えたら集客アップに繋がった」
「選択肢が7個以上だと人間は選択すること自体をやめてしまう」

など、アクセシビリティに対応すると、同時に、マーケティングにも配慮した、多くの人に読まれる文章にもなります。

フォントに注意

明朝体などのセリフ体フォントは使わないようにしましょう。明朝体では読みにくく、内容が頭に入りづらいと感じる人がいます。
俳優のトム・クルーズなど、読字障害（ディスレクシア）を公表している方もおり、ご存じの方もいらっしゃると思いますが、こうした症状を持つ方にとって、明朝体はとくに読みにくいとされています。

幅広い方の目にとまるウェブサイトにはUDフォントを使うようにしましょう。
UDフォントは「ユニバーサルデザイン」のコンセプトに基づいた誰にとっても見やすく読みやすいフォントで、学校の教科書などにも広く採用されています。

無料で利用できるUDフォントもありますので、必要に応じてダウンロードしておくと便利です。フォントに対する配慮は、Webサイトに限ったことではありません。スライドやPDF配布資料でも同じことが言えます。

「その後の動作」をわかりやすく（ポップアップ、ダウンロードなど）

サイト内では、ユーザーが予期しない動きをしないように配慮しましょう。
ボタンにはアイコンなどを付けることで、クリック後の挙動をできるだけ明記するようにしましょう。

「詳しくはこちら」といった漠然としたボタンテキストを使っていませんか？できるだけ、ボタンにはクリック後遷移するページの内容がわかるよう、具体的な内容を示すテキストにしましょう。

ボタンクリック後に突然PDFのダウンロードが始まる
Wi-Fi 環境ではない場所で動画が自動再生され、大量のデータ通信が発生する
ページ読み込み時に、大音量の音声が突然流れる

こうした体験をされた方も多いと思います。
場合によってはサイトの離脱や悪印象にもつながります。ユーザーにとってストレスのない、予測可能な動作を持つコンテンツ作りを心がけたいものです。

さまざまなデバイスに配慮

さまざまなサイズのデバイスに対応するレスポンシブデザイン。ブラウザ幅を固定にせず、リキッドレイアウトにという流れはどのサイトもすでに対応済みとなってきた印象です。

ですが、忘れがちなのが、max-width。メインビジュアルなどによくあるコンテンツの幅いっぱいに画像を指定している場合、画像の最大幅を指定しましょう。

大きなモニターの場合、指定していないと画像が拡大されてレイアウトが崩れます。デザイナーから支給されたデータ外のことになるので、コーダーの裁量で忘れず指定します。

アニメーションの過度の使用は避ける

たとえば、スクロールしないとコンテンツが表示されないスクロール連動型のWebサイト。リッチなイメージですが、ユーザーが必要な情報へすぐにアクセスができません。

また、読み込み時にも時間がかかり、通信量も多くなるので、アクセシビリティの観点では注意が必要です。

2度目以降はアニメーションを実行しない：一度表示したコンテンツは、再訪時にスムーズにアクセスできるように
モバイルでは控えめに：ユーザーエージェントを活用して、モバイルデバイスではアニメーションを簡略化または非表示に
メインコンテンツには動きをつけない：アニメーションは背景などに限定し、主要な情報の妨げにならないように

このように、マークアップの際にアクセシビリティに配慮した実装にしましょう。

アニメーションを採用する場合は、本当にそれがユーザーにとってベストなアニメーションかを一度考えてみる必要があります。

Alt属性について

画像に、Alt属性を入れましょう。スクリーンリーダーによる読み上げ目的以外にも、クローラーが何の画像か理解するために必要な情報なので、画像には Alt属性が入っているか必ずチェックします。

ただし、Alt属性をいれなくていい場合もあります。

画像の下にキャプションとして写真の説明をテキストで表示している場合と、装飾的な画像で、あってもなくてもコンテンツに影響しない画像の場合です。

不必要なAlt属性は、情報過多を引き起こし、アクセシビリティを損ねる場合があります。
装飾用の画像の場合は、alt=""を設定します。（空にすることで、スクリーンリーダーが読み上げをスキップします）

人の顔写真などで下に名前や説明をテキストで入れている場合もAlt属性を省きます。
ですが、画像の内容を具体的に説明したい場合はAlt属性を入れても構いません。

例: 写真のAlt属性「クリスマスプレゼントを抱える男の子の写真」
その下のPタグ「兵庫県の山田太郎くん」

マークアップ実例

マークアップ実例 1 : Outlineで見出しのレベルを整える、`h1`の正しい使い方

サイトのロゴをすべてのページでh1に設定していませんか？

これはSEOやアクセシビリティの観点で好ましくありません。
下層ページでは、ページタイトルをh1に設定し、サイト全体の構造を適切に整えるのが理想です。

`header`コンポーネントにあるロゴに`h1`をつけている場合、条件分岐でページトップ以外は`div`タグなどに変更するように設定しよう。

WordPressコード例

PHP

<?php if (is_home() || is_front_page()) : ?>
  <h1 class="logo">
    <a href="<?php echo esc_url(home_url()); ?>">
      <img src="<?php echo esc_url(get_theme_file_uri('img/logo.png')); ?>" alt="<?php bloginfo('name'); ?>">
    </a>
  </h1>
<?php else: ?>
  <div class="logo">
    <a href="<?php echo esc_url(home_url()); ?>">
      <img src="<?php echo esc_url(get_theme_file_uri('img/logo.png')); ?>" alt="<?php bloginfo('name'); ?>">
    </a>
  </div>
<?php endif; ?>

この設定により、下層ページではh1がそのページタイトルとなり、SEOやアクセシビリティが向上します。

Reactコード例

Reactでも同じように、プロパティ（props）を使用して現在のページを判定し、タグを動的に切り替えることができます。

React

const Logo = ({ isHomePage }) => {
  const Tag = isHomePage ? 'h1' : 'div'; // ホームページならh1、それ以外はdivに設定

  return (
    <Tag className="logo">
      <a href="/">
        <img src="/img/logo.png" alt="サイト名" />
      </a>
    </Tag>
  );
};

export default Logo;

マークアップ実例 2 : 英語の取り扱い

大文字だけの英語をデザイン的に使う場合は、CSSを使って大文字にしましょう。

大文字だけの英語は、スクリーンリーダーで読み上げられる際にアルファベット単体として認識されます。

例えば、BLOGという文字がある場合、スクリーンリーダーでは「ビーエルオージー」と読み上げられます。

よくない例

<p>BLOG</p>

HTML

以下のように記述します。

- <p>BLOG</p>
+ <p class="text-uppercase">Blog</p>

HTMLでは適切な表記（例: Blog）を記述し、CSSで大文字化します。

CSS

.text-uppercase {
    text-transform: uppercase; /* テキストを大文字に変換 */
}

ブラウザ上では「BLOG」と大文字で表示されますが、HTMLの内容は正しい文脈を保持しているため、スクリーンリーダーでは「ブログ」と自然に読み上げられます。

マークアップ実例 2 : 英語の取り扱いその２

飾りの英語を適切に扱う

見出しで英語と日本語を併記するデザインはよくあります。

よくない例

<h1><span>Contact</span>お問い合わせ</h1>

このように記述すると、英語（Contact）と日本語（お問い合わせ）がスクリーンリーダーで二重に読み上げられる場合があります。

これを防ぐため、英語部分をデザイン要素として分離し、日本語部分を見出しの主たる内容として扱う方法が適切です。

HTML改善例

- <h1><span>Contact</span>お問い合わせ</h1>
+ <h1 data-title="Contact">お問い合わせ</h1>

CSS例

[data-title]::before {
    content: attr(data-title); /* デザイン用の英語を表示 */
    text-transform: uppercase; /* 必要なら大文字化 */
}

英語部分（Contact）を「デザイン要素」として扱い、日本語（お問い合わせ）を見出しの主たる内容として認識させるようにします。

日本語部分がh1の主要なコンテンツとして認識されるため、スクリーンリーダーでも正しく「お問い合わせ」と読み上げられます。
このように、英語のデザインをdata-titleを使ってCSSで調整します。

最後に

おすすめのツール、チェッカー一覧

Markuplint

HTMLの構文チェッカー

W3C Markup Validation Service

超定番のバリデーター。画像のAlt属性やタグエラー、アウトラインもチェックできる。

CSSバリデーター

WCAG Color contrast checker

コントラスト比チェッカー

HTML Outline

アウトラインがChrome拡張機能でチェックできる

PHPCodeSnifferとPHP CS Fixer、ESLintなどの言語ごとのリンターで構文チェック

まとめ

手動チェックは大変なので、このような便利なツールを活用して、効率的にさくっとチェックしましょう。少しの工程でサイトの品質が向上し、SEOにも効果を発揮します。

また、アクセシビリティ対応を少しずつでも始めることで、より多くのユーザーにとって価値のあるサイト作りが実現します。ぜひ実践してみてください。

一緒に、ユーザーにとって、よりよいコンテンツ作りをめざしましょう！