どんな対応が必要？スマートフォンサイトで考慮したいウェブアクセシビリティ対応を解説

まずは基本を押さえておきましょう。

現在はWCAG 2.2が最新ですが、スマートフォン関連に関してはWCAG 2.1で追加されています。

下記の項目が該当するとされているようです。

スマートフォン向けサイト特有の留意点の有無 | ウェブアクセシビリティ基盤委員会（WAIC）
https://waic.jp/qa/special-consideration-for-smartphones/

• 1.3.4 表示の向き (AA)
• 1.4.10 リフロー (AA)
• 1.4.13 ホバー又はフォーカスで表示されるコンテンツ (AA)
• 2.5.1 ポインタのジェスチャ (A)
• 2.5.2 ポインタのキャンセル (A)
• 2.5.4 動きによる起動 (A)
• 2.5.5 ターゲットのサイズ (AAA)
• 2.5.6 入力メカニズム非依存 (AAA)

中でも下記の項目は特にスマートフォン向けWebサイトとして気を付ける必要がありますが、わかりづらい部分もあると思うので例も加えて説明します。

1.4.10 リフロー (AA)

情報又は機能を損なうことなく、以下においてスクロールを必要とせずに提示できるというものですが、以下のどちらかを満たす必要があります。

縦向きで使うことが多いと思いますので、主に「横幅320px〜」をクリアすることが必要になると思います。

• 横幅320pxで表示して、縦スクロールのみ（横スクロールなし）で閲覧できる
• 高さ256pxで表示して、横スクロールのみ（縦スクロールなし）で閲覧できる

2.5.1 ポインタのジェスチャ (A)

スマートフォンは主にピンチインピンチアウトで拡大縮小を行いますが、拡大縮小が必要なコンテンツ（中身を拡大するなど）に関して、複数のタッチが行えない場合でも拡大縮小ができるようにする必要があります。

GoogleMapが良い例ですが、「+」「-」ボタンを用意することなどが具体的な解決策になります。

2.5.2 ポインタのキャンセル (A)

「クリック」「タップ」で実行される機能が、押し始めた後にキャンセルできるようにするというものですが、スマートフォンサイトが流行り始めた頃に、応答性を高めるためにクリック（touchend）での実装ではなく、touchstartでボタンクリックを実装する方法がよくありました。

この方法はNGとなり、タッチしたあとにタッチしながら別の場所に指を移動させ離すことでキャンセルができるようにする必要があります。

2.5.5 ターゲットのサイズ (AAA)

こちらはAppleのガイドラインでも過去に話題になっていましたが、ボタンなどのクリック（タップ）する対象のサイズを 44 × 44 ピクセル以上にする必要があります。（テキストリンクは例外）

スマートフォンサイトでは、挙動や実装方法など基本的な対応に関してPCサイトと違いはないのですが、スマートフォン特有の操作や閲覧状況に関して考慮する必要があります。

ここからは、具体的にどのようなことを考える必要があるかを解説します。

ブラウザサイズ

スマートフォンの画面サイズはデバイスによって異なります。

レスポンシブデザインを採用して、さまざまな画面サイズや解像度に対応することが重要です。

画面が小さい場合でもコンテンツが読みやすく、ナビゲーションが容易であることを確保する必要があります。

また、画面が小さいということは画面に表示される情報が限られます。

そのため、スクリーンリーダーを使用するユーザーにとっては、適切な構造化されたコンテンツや的確な代替テキストが重要になってきます。

タッチ操作に対する対応

スマートフォンはタッチ操作が主流ですので、タッチ操作に対する対応が重要です。

リンクやボタンなどの操作可能な要素は十分な大きさであり、適切な間隔があることを確保し、誤タッチを防止するために適切なタッチ領域を設定します。

また、input要素など入力が可能なUIの場合には、ソフトウェアキーボードが表示され画面の表示エリア中央にinput要素が来るようにスクロールすることもありますので、画面内に必要な情報が収まるようなレイアウトや、挙動を阻害をしないようにする必要もあります。

キーボード操作のサポート

一部のユーザーは、スマートフォンをキーボードで操作します。

そのため、PC同様にキーボード操作ができるようにする必要があります。

スマートフォンでは基本の操作がタッチなのでフォーカスが使われないと思いがちですが、フォーカス表示は必要になりますし操作の種類はPCサイトの時よりも多くなりますので、各UIの挙動に関しても注意深く設定する必要があります。

カラー・コントラストへの配慮

スマートフォンサイトに限らないですが、色に依存せずに情報を伝えるために、色による情報のみではなく、他の手段（例：パターンやアイコン）も使用して情報を提示することも必要です。

また、スマートフォンを野外で使用するケースを考えると、画面が暗い状況や画面の照り返しなども考慮したコントラスト比やカラー選定を考えると良いと思います。

スマートフォンでのWebサイト閲覧は、普通に使用しているだけでもPCとは違う動作や表示になります。

具体的な違いに関して、サンプルを用いて確認してみましょう。

縦横で画面が回転する

スマートフォンは基本的には縦横に回転することで、viewportを切り替えることができます。

ほとんどのWebサイトのターゲットは縦画面になると思いますが、横画面でも問題なく閲覧できる必要があります。

確認したいWebサイトで実際にスマートフォンで確認し、縦横に切り替えてみてください。

Chromeの開発ツール（F12）でレスポンシブの状態や、さまざまなデバイスサイズを確認することもできます。

縦の場合

※320pxでも不要なスクロールが発生しないように設定しましょう。

横の場合

※要素が大きくなりすぎないようにレスポンシブな状態をCSSで組む必要があります。

スクロール操作

スマートフォンではPCに比べてスクロールでの画面移動が頻繁に行われます。

また、画面サイズの関係もあり、画面内に収まらないメニューやテーブルがあることもあります。

そのような場合には、スクロールができるようにすることや、レスポンシブルにレイアウトを調整する必要があります。

レスポンシブルなテーブル

下記のように、画面サイズに合わせてカラムが落ちるようなレイアウトにします。

一見アクセシビリティ的によくないのではないかと思いますが、tableタグをしっかりと使うことで、スクリーンリーダーでも問題なく読み上げることができます。

デザインパターン1

https://codepen.io/itahana-depart/pen/YzbXqxe

デザインパターン2

https://codepen.io/itahana-depart/pen/XWwbdeK

スクロールができるテーブル

よくスマートフォンサイトでテーブルが表示されている部分にスクロールができることを知らせる表示がされていることがあります。

それ自体はとてもわかりやすくて良いのですが、キーボードのみで操作ができなくてはいけません。

ですのでテーブルにフォーカスを当て、キーボードの左右でスクロールできる機能をつける必要があります。

簡易的に実装を行なった例

https://codepen.io/itahana-depart/pen/pomJjWP

上記のテーブルの実装に関しては、いずれもHTMLを書くだけではなく実装が大変な部分もあります。

そういったこともあり、スマートフォンサイトではテーブルが敬遠されul,liタグやdl,dt,ddタグが使われがちですが、tableタグは非常に優れた情報伝達機能を持っているので、どのように実装するか検討すると良いと思います。

タッチ操作

例えば、スマートフォンサイトではハンバーガーメニューを実装することがあると思います。

PCサイトではヘッダーのナビゲーションは全て表示されていたり、メニューにマウスオーバーすることで下層のリンクが出現する場合もあると思います。

しかしスマートフォンでは、指の基本操作としてはマウスオーバーというアクションはタッチ（マウスオーバーと同等の操作）になりますが、一般的には画像の保存などの操作以外ではほとんど意識されませんので、タップ（クリック相当）として設定されることが多くなります。

PCではマウスオーバー、スマートフォンではタップ（クリック相当）、というように同じUIに別々のアクションをつけてしまうと、バグが発生したり実装自体が大変にもなりますので、両方クリック（タップ）で動作するように設計する方が良いでしょう。

同じボタンにクリックとホバーを設定した例

https://codepen.io/itahana-depart/pen/KKLpzBw

スマートフォンとPCでの違いは、Webサイトの内容だけではありません。

Webを閲覧するブラウザそのものにも機能や操作の違いがあります。

ブラウザのUI

スマートフォンのブラウザは、URLバーとナビゲーションバーがPCブラウザとは大きく異なります。

最近では、URLバーはページをスクロールすると上部に隠れるような動きをしますし、ナビゲーションバーも下に隠れるような動きをします。

それによりViewportのサイズが変わり、Webサイトの方も縦100％の表示などの設定をしている要素があれば、それに合わせて調整をしなければならないです。

CSSでは、そのURLバーの挙動に合わせてくれる記述方法もありますが、HTMLとCSSの状態や、スマートフォンのOSバージョンによっては正しく機能しないことがあります。

ソフトウェアキーボード

スマートフォンにはソフトウェアキーボードが搭載されています。

いくつかの点でPCブラウザとは違う部分があります。

フォームに入力しようとinputにフォーカスすると出現しますが、OSのバージョンによって画面に追従するように配置している要素が、その時の画面サイズに合わせて要素が動いてしまうことがあります。

全てが画面サイズを基準としたサイズ設計をしてしまわないように注意が必要です。

inputのフォーカス時には、フォントサイズが16px以上の設定になってないないと自動でピンチイン（拡大）されます。

16px以上のフォントサイズが読みやすいとされていますので、input部分に関しても必ず設定を確認しましょう。

また、inputが表示エリアの中央に来るようにスクロールをしますので、モーダルを開いて直ぐにフォーカスを当てるなどの実装を行う場合には、必ず確認して欲しい内容が画面外に出てしまうこともありますので注意が必要です。

そして、フォームを実装する時に、リアルタイムバリデーションを実装することがあると思います。間違っている時に入力中に直ぐにエラーを知らせてくれる機能ですが、スマートフォンのソフトウェアキーボードの場合、確定をさせた後にバリデーションが行われます。

大きな影響はないと思いますが、タイミングが違うことを理解しておきましょう。

ドラッグ or スワイプ

インタラクティブなコンテンツの場合、ドラッグ操作を行うUIを実装することがあります。

PCではマウスダウンを続けることでドラッグをしているという判定になりますが、スマートフォンでは、スワイプ動作もあり、タッチ後に要素を直ぐ移動させようとした場合、ドラッグなのかスワイプなのかを判断することが難しい場合がありますので、あまり長すぎない程度にドラッグ開始までの時間を設定する必要があります。

また、アクセシビリティ対応として、ドラッグ操作に関しては別の操作で代替できることが望ましいです。

「移動モード」のような状態を作り、要素を選択してフォーカスで移動先を探し、移動決定を行うような手段が必要になります。

スマートフォンサイトのアクセシビリティを考慮するには、WCAG 2.1のガイドラインを確認しておきましょう。

特に、リフローの確保やポインタのジェスチャ対応など、スマートフォン独自の操作や閲覧状況に焦点を当てる必要があります。

実装においては、カラー・コントラストの配慮や、タッチ操作やソフトウェアキーボードの挙動にも留意し、適切なレスポンシブデザインと操作性を確保することが重要です。

株式会社デパートではウェブアクセシビリティへ深い知見と対応実績を持つエンジニアが在籍し、ご要望に応じてアクセシビリティの達成基準に準拠したWebサイト制作を行っています。

企業としての取り組み内容からのご相談も可能ですので、お気軽にご相談ください。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています