WEBアクセシビリティの基礎知識と最低限の実践ポイント

（2025.3.19）

WEBアクセシビリティの基礎知識と最低限の実践ポイント：目次

WEBアクセシビリティとは？
WEBアクセシビリティでまず実践すべきこと
アクセシビリティのかんたんチェック

WEBアクセシビリティ対応

私たちは「人」を中心にしたクリエイティブを企業アイデンティティとし、WEBアクセシビリティ対応をご支援しています。すべての人にとって心地よく使えるWEBサービスを目指し、豊かなユーザー体験でビジネスの可能性を広げ、誰もがつながる未来を創造します。

WEBアクセシビリティとは？

WEBアクセシビリティとは、例えば、『視覚障害者のためのスクリーンリーダー対応』や『聴覚障害者のための字幕やテキスト化』をするなど多様なユーザーに配慮し、すべてのユーザーが快適に使えるWEBサイト・アプリを目指すことです。

すべてのユーザーが快適に使えるWEBサイト・WEBアプリ

すべてのユーザーが快適に使えるWEBサイト・WEBアプリのデザインは、アクセシビリティの観点はもちろんユーザビリティやパフォーマンス、インクルーシブデザインの要素やデザインシステムも重要です。

ユーザビリティ

ユーザビリティとは JIS Z では以下のように定義しています。

日本産業規格 JIS Z 8521：2020

人間工学−人とシステムとのインタラクション− ユーザビリティの定義及び概念
3.1.1
ユーザビリティ（usability）
特定のユーザが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い。

参考：日本産業規格 JIS Z 8521：2020

このJIS Z 8521：2020は、国際標準化機構（ISO）を一部変更したもので、ISO（国際標準化機構）9241-11によると、『有効性』『効率性』『満足度』の3要素の度合いを示す言葉だと定義されています。

ユーザビリティは使いやすさに注目されがちで、『すぐれたUIを作ること』と混同してしまいがちですが、実のところは目標達成のための有効性、効率性そして満足度がどのようであるか？を指標としているところが重要です。

インクルーシブデザイン

イギリスの王立芸術大学院のロジャー・コールマン教授が提唱したインクルーシブデザインは、高齢者や障害者、外国人など、これまで製品やサービスのユーザー対象から外されたり、利用しにくかった人たちを、開発の上流工程から巻き込みデザインしていく手法です。開発の初期段階から、さまざまなバックグラウンドや能力を持つ人びとを考慮し、すべての人が使えることを前提に『だれも排除しない設計』をすることがポイントです。

『誰もが使えるようにするための技術的な調整』をすることがアクセシビリティですが、インクルーシブデザインは『最初から全員にとって使いやすいデザインをする』という違いがあります。UXデザイン全般を考える上でもインクルーシブデザインの視点は重要なので是非取り入れたいところです。

デザインシステム

デザインシステムとはWikiPediaでは以下のように記されていました。

Design system：Wikipedia（英語）
A design system is a comprehensive set of standards, documentation, and reusable components that guide the development of digital products within an organization. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects. A Design system may comprise, pattern and component libraries; style guides for font, color, spacing, component dimensions, and placement; design languages, coded components, brand languages, and documentation. Design Systems aid in digital product design and development of products such as mobile applications[1] or websites.

デザインシステムは、組織内でのデジタル製品の開発を導くための包括的な標準、ドキュメント、再利用可能なコンポーネントのセットです。これは、デザイナーと開発者にとって唯一の真実の情報源として機能し、プロジェクト間の一貫性と効率性を保証します。デザインシステムは、パターンとコンポーネントのライブラリ、フォント、色、間隔、コンポーネントの寸法、配置に関するスタイルガイド、デザイン言語、コード化されたコンポーネント、ブランド言語、ドキュメントで構成されます。デザインシステムは、モバイルアプリケーション[ 1 ]やWebサイトなどのデジタル製品の設計と開発に役立ちます。（日本語訳）

参考：Design system：Wikipedia

これを、私たちの開発プロジェクトにおいては『プロジェクトチーム全員が参照すべき、アプリケーションの運用思想、UIを構成するコンポーネントの・デザイン・コードについての唯一の情報源』と定めています。

また、ITプロダクト開発に関わるデザイナーやエンジニアをはじめ、すべてのクリエイターの方々におすすめしたいガイドラインをこちらに紹介しておきます。

WEBアクセシビリティでまず実践すべきこと

セマンティックHTMLを使う（見出し・リスト・ボタンの適切なタグ選び）

文章構造の骨組みになると同時に、レイアウトの骨格となる部分を成すコードです。

テキスト・コンテンツ関連タグ

タグ	意味・用途
<header>	ヘッダー部分（サイトやセクションの冒頭）
<nav>	ナビゲーション（サイト内リンクをまとめる）
<mai>	ページの主要コンテンツ
<article>	記事や独立したコンテンツ
<section>	章やセクションをまとめる
<aside>	補足情報（広告やサイドバーなど）
<footer>	フッター（著作権情報・リンクなど）

※レイアウトに関してはCSS（カスケ―ディングスタイルシート）を充てて別途処理する必要があります。

例：セマンティックなページ構造

<body>
  <header>
    <h1>サイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>記事タイトル</h2>
      <p>この記事の内容です。</p>
    </article>
  </main>

  <aside>
    <h3>おすすめ記事</h3>
    <ul>
      <li><a href="#">関連リンク1</a></li>
      <li><a href="#">関連リンク2</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2025 MyWebsite</p>
  </footer>
</body>

テキスト・コンテンツ関連タグ

テキストやコンテンツの役割を示すタグです。主にMAINタグの中で使われることが多いです。

タグ	意味・用途
<h1>～<h6>	見出し（重要度順）
<p>	段落（パラグラフ）
<blockquote>	引用
<strong>	重要な強調（太字・意味的に強調）
<em>	強調（斜体・語調の強調）
<mark>	ハイライト（検索結果の強調など）
<code>	コードの表記

例：適切な見出し構造

<h1>旅行ガイド</h1>
  <h2>ヨーロッパ</h2>
    <h3>フランス</h3>
      <p>フランスは美しい景色と歴史的建造物が魅力です。</p>
    <h3>イタリア</h3>
      <p>イタリアは美食と芸術の国です。</p>

<h1>はページのメインタイトルや大見出し、<h2>や<h3>はそれぞれ中見出し、小見出しを示します。また、意味を持たない<div>や<span>などだけでページを構成したり、重要な見出しに充てたりすると、機械（コンピューター）にとって意味が解かりにくい構造になってしまいアクセシビリティやSEOに対しての評価が下がってしまうので気を付けましょう。

セマンティックHTMLは「タグに意味を持たせること」が重要
適切なタグを使うことで、SEO・アクセシビリティ・可読性が向上
スクリーンリーダーやキーボード操作を考慮するため必須

これらに気を付けてセマンティックHTMLを意識することで、誰にとっても使いやすいWEBサイトにすることができます。

キーボード操作を意識する

ユーザーによってはキーボードのみでWEBサイトを閲覧したい、WEBサービスを使いたいと思うかもしれません。そこでもやはり気を付けなければならないことがあります。

TABで移動できるか？

ユーザーはTABキーやカーソルキーを使いページ内を移動することがあります。その際、適切にページ内を移動できるようにコード設計をしなければなりません。また、WEBサイト内で何度も繰り返される同じ内容のナビゲーションなどはSKIPできる様にする必要もあります。特に気を付けたいのはモーダルやポップアップなどの動きです。きちんと対応しておかなければ、ユーザーがポップアップを開いた後に閉じ込められてしまい、キーボードだけでは移動できなくなってしまいます。

フォーカスは適切か？

TABキーで移動する際、キーを押したときに意図した要素にフォーカスがあたるかどうか？も考えなければなりません。例えばページ内の表示をTABボタンで切り替えるなどのレイアウトです。そんな時は、tabindex属性を使えば、タブの移動順を変更することができます。

tabindex="0"：通常のタブ順に従って移動
tabindex="-1"：タブの移動対象から外す（例えば、非表示要素）
tabindex="n"（nは正の整数）：特定の順番で移動（通常は避けるべき）

そのようなUIコンポーネント（その他にも、モーダルダイアログ、アコーディオン）を作成する際には、タブ移動を手動で制御することが必要な場合があります。

<div role="tablist">
<button role="tab" aria-selected="true" tabindex="0">タブ1</button>
<button role="tab" aria-selected="false" tabindex="1">タブ2</button>
<button role="tab" aria-selected="false" tabindex="2">タブ3</button>
</div>

上記のようなケースだとJavaScriptを使い、aria-selectedの値を動的に切り替える必要があります。

色だけに頼らない

WEBサイトには様々なバックボーンを持つユーザーが訪問します。もし色覚に障害のある方が色を使って情報を伝えるページを閲覧したら、内容を正確に把握することができません。

例えば、年代を色別にして表現したグラフなどです。そのような場合は、グラフの描写に代替情報を埋め込む必要があります。例えば<IMG>であればALT属性に情報を書き加えます。それだけで情報が伝わらない場合は、別途表組をグラフの周辺に配置するなどして適切に対応しましょう。

メールフォームなども気を付けなければなりません。例えばエラーがあった際、その情報を色のみで伝えるとなると多様なユーザーに配慮した状態とは言えません。その場合は、エラー箇所にきちんと文言を添えることで、色覚に障害のある方にも正しく情報を伝えることができます。

アクセシビリティのかんたんチェック

WEBアクセシビリティのためのセマンティックはHTMLがかけたら、次は本当にそのHTMLがWEBアクセシビリティに対応して機能しているかどうかを確認します。確認は目確認だけではなく、専用のチェックツールをつかいます。有料・無料、様々なサービスがありますが、ここでは無料のツールを２つ紹介します。

Lighthouse

LighthouseはGoogleが提供するブラウザ用の拡張機能で、chrome や Edge などで使うことができます。

インストールした拡張機能を選択する画面

対象のWEBサイトのURLを画面に入力すると分析結果がわかります。分析は『パフォーマンス』『ユーザー補助（アクセシビリティ）』『おすすめの方法』『SEO』の4つの観点で行われます。

ご参考までにケイツー・インタラクティブの調査結果を紹介します。トップのアニメーションが重いこともあり、パフォーマンスがもう一つと言ったところでしたが、改善のためのアドバイスなども分析結果に合わせて提示してくれます。

WEBサイトを調査した結果の画面

WAVE

WAVEは対象のWEBサイト上でプラグインを展開すると、アクセシビリティ該当箇所に様々な情報をオーバーレイしてくれます。次の画像にはARAIの位置などが示されているのがわかります。また、エラーや注意しなければならないことがある場合は該当箇所をマークしてくれて、対応のヒントも吹き出しで教えてくれます。ただし、現時点では、日本語対応はされていないようです。

WAVEの分析結果画面