目次

はじめに
アクセシビリティとは
文字サイズはremで指定する
画像にはalt属性をつける
1. svgにはtitle要素を指定する
適切なタグを使用する
コントラストを高くする
1. 形で変化を示す
手を動かして確かめる
1. 文字サイズを変更する
2. キーボードで操作してみる
参考文献

はじめに

こんばんは。watnowに所属する3回生の藤堂ゆうかです。
watnowアドベントカレンダーの14日目を担当します。よろしくお願いします。

本記事では、アクセシビリティの輪読会を通して学んだことをより多くの人に共有すべく、より簡単で効果的なポイントをまとめてみました。フロントエンドやモバイルの開発をしている全ての方が対象です。

書いていて長くなってしまったので、詳細は開いてみる形式にしています。気になる方は読んでみてください。また、実装も行ったので関連リンクから試してみてください！

アクセシビリティとは

アクセシビリティとは、「利用のしやすさ」や「近づきやすさ」という意味で、サービスなどをどれだけの人が使えるようにするかという土台作りのようなものです。

アクセシビリティに対応させるメリット

目が見えないなどの障がいがある方や、何かの作業中で操作が困難である人など、あらゆる人があらゆる状況でサービスを快く使えるようにするためにはアクセシビリティに対する理解が必要です。アクセシビリティが向上すると、ユーザの増加が、ユーザビリティ(特定のユーザにおける「使いやすさ」)の向上にもつながります。

では、どのようにアクセシブルにしていくのか、実装からデザインまで様々な角度からご紹介します。

文字サイズはremで指定する

文字サイズは、font-sizeにてpxやremで指定できます。ユーザがデフォルトの文字サイズを変更した際、remではその変更が文字サイズに反映されますが、pxでは指定pxのままになります。

実装サンプル➀: 文字サイズの変更と見た目

老眼の方などがデフォルトの文字サイズを変更したとして、サイトの文字サイズが変わらなかったら読めないままですよね。

pxとremの違い

pxは1pxでデバイスの1ドット分を表し、絶対的な値を取ります。一方remはデフォルトの文字サイズ1文字分を表し、相対的な値を取ります。

デフォルトの文字サイズは、未変更の状態で1rem=16pxです。
少し大きいサイズなどはこの式から算出することが出来ます。

remで指定することで、ユーザが読みたい文字サイズに対応させたサイトを提供することができるのです。

画像にはalt属性をつける

目が見えない人々にとって画像からは何の情報も得られません。しかし、alt属性を指定することで、画像情報を文字に起こして伝えることが出来ます。

スクリーンリーダーなどを使用しているユーザには、画像が見えない代わりにalt属性が読み上げられます。よって、alt属性を適切に指定しておくことで、画像を見れないユーザにも必要な情報が届けられます。

聴覚障害者を助けるスクリーンリーダ

スクリーンリーダーとは、聴覚障害者などがコンテンツを音声で聞いて理解するために変換に使用されるツールです。
アクセシビリティにおいて、スクリーンリーダーに適切な情報を読み上げてもらうという工夫はとても大切になります。

svgにはtitle要素を指定する

画像のひとつとして、svgもあげられます。アイコンなどによく使われるsvgですが、title属性用いることで、代替テキストを付与することが出来ます。

適切なタグを使用する

HTMLのタグを適切に使うことも、アクセシビリティの向上においてとても大切です。

HTMLのセマンティクス

タグにはそれぞれ、セマンティクスという役割のようなものが定められています。これらにより、スクリーンリーダーや検索エンジンなどにより正確なコンテンツを伝えます。例えば、「h1タグは見出しを表す」などです。

よく使われるタグなど、効果的であろうタグをいくつか紹介します。

buttonタグ

ボタンはよく使われる要素のひとつです。buttonタグを用いて簡単に実装ができます。

ところが、押したら関数を呼ぶというのはonClickがある要素であれば、divタグなどでも実装可能です。(過去に私もdivタグで画面遷移を実装したりしていました。これは、aタグの節でも述べますが、かなり酷い実装です。)

buttonタグを使えば、マウスのホバー時にマウスポインタが変わったり、スクリーンリーダーにボタンの役割を持つ要素であることが伝わるなど、ボタンであることを明確に伝えることが出来ます。

実装サンプル➁: buttonタグによるボタンの実装

ボタンを見逃してしまわないためにも、ボタンにはbuttonタグを使いましょう。

WAI-ARIAでセマンティクスを補完する

buttonタグでなくとも、WAI-ARIAというものを用いてセマンティクスを補完させることもできます。
しかし、HTMLのネイティブセマンティクスの方が様々な点で優れているので、既存のタグで実装できるものはそちらで、HTMLでは用意されていないタブなどの実装時にはWAI-ARIAを検討して見てください。

aタグ

aタグはリンクを実装する際に使用します。
buttonタグと同様に、onClickを駆使して画面遷移の関数を実行すれば、aタグでなくとも画面遷移が実装可能です。しかし、リンクであることが機械には理解出来ず、リンク特有の操作が出来なくなります。

実装サンプル➂: aタグによるリンクの実装

リンク特有の操作

マウスホバー時に遷移先のURLが画面左下に表示される
右クリックで「新しいタブで開く」などの特有の操作が行える
ホイールクリックを押すと別タブで開かれる など

hタグ

見出しにはhタグを用います。hタグで指定されたテキストは、文字サイズが大きくなったり太字になったりします。
これを利用して、強調したいためだけにコンテンツの途中でhタグを用いたりしてしまう人もいます。

ですが、hタグには見出しというページの階層構造を示す役割があります。よって、強調のためだけにhタグを使ってしまうと、見出しを読み飛ばしたいスクリーンリーダーなどは不適切なコンテンツに導かれてしまいます。 全体像も把握しづらいです。

h1~h6タグを使って、適切にページ構造を構築してください。

不要なセマンティクスの削除

視覚表現のために役割と合わないタグを使用ふる際には、WAI-ARIAのrole=presentationを用いて不要なセマンティクスを削除することも出来ます。

inputタグ

入力フォームを実装する際には、inputタグを用います。

inputタグには多種多様なフォームが用意されています。これらは、type属性を指定することで利用することができます。type属性については、MDNのinputタグのサイトから確認することができます。

inputタグを用いずとも、チェックボックスなどをJavaScriptなどを駆使して自作することもできます。

実装サンプル➃: inputタグによる入力フォームの実装(ラジオボタン)

しかし、適切なフォームを使用することで、バリデーションなども自動的に行うことができ、多くのユーザが正しい値を入力できることにつながります。
適切な入力フォームで実装するようにしましょう。

labelタグ

labelタグはinputタグと共に使用できます。使い方は、下記のように囲うだけです。

<lavel>
    年齢
    <input type="number">
</label>

このメリットは、ラベルと入力フォームを紐づけられることです。スクリーンリーダは、フォームにフォーカスした際、ラベルが読み上げられます。

また、forとidで紐づけることもできます。

  <label for="apple">りんご</label>
  <input type="checkbox" name="apple" id="apple" />

上記コードでは、ラベルを押すだけでチェックボックスが押せるようになるなど、操作性の向上にもつながっています。

実装サンプル➄: labelタグによるinput要素との紐づけ

適切にlabelを記述し、入力要素をよりアクセシブルにするようにしましょう。

コントラストを高くする。

アクセシブルなサイトには、コントラストはとても大事です。
色の違いを見分けづらいユーザにとって、原色の赤色と青色などのコントラストに差がない色は同じ色と知覚します。

色が違うからといって、同じアイコンで違う色のボタンが複数あったとしましょう。色の知覚が難しいユーザにとって、これらのボタンは同じボタンと思うでしょう。色のみによる情報提供は、ユーザによってはアクセスできないことにつながる可能性があるのです。

コントラストを高くすることで、色相の違いやコントラストの違いを知覚しにくいユーザでも、その違いを知覚することができます。
よりコントラストの高い配色を心がけましょう。

形で変化を示す

より違いをはっきりさせるには、形を変えてしまうことが一番得策です。たとえば、二重線で囲ってみたり、複数のアイコンを用いてみたり、形を変えることで色に囚われずに視覚的な違いを生むことができます。

手を動かして確かめる

最後に、実際に自分で手を動かしてみてほしいという提案です。

これは、私自身がやるようになって気付けたことなのですが、アクセシブルじゃない状態で自らのサイトを使うのは、やはり使いずらいです。何なら、いらいらします。

折角なので、私が普段やっている確認を紹介します。

文字サイズを変更する

サイトによっては、そもそも文字がでかくならなかったりします。
文字サイズを変更し、下の二点を確認し、問題があれば修正します。

正しくコンテンツが拡大されていること
それによってデザインが崩れていないこと。

文字サイズの変更
chromeの場合は、設定画面(chrome://settings/appearance)からフォントサイズを変更することができます。リンクを張り付けて使ってみてください。

キーボードで操作してみる

キーボード操作のみでサイトがどのように閲覧できるかを確かめます。
入力フォームはもちろん、リンクなどが正常に認識されているか、飛びやすいかなどを手軽に確認することができます。

私の場合は、自分のサイトに限らずキーボード操作をするようにしています。癖がつくため、いつもとの操作感の違いも含めて確かめることができるのでおすすめです。

より使いやすいサイトにするために、実際に使いながら操作感を確かめつつ、よりアクセシブルな開発をできたらよいなと思います。

さいごに

長いですが、最後まで読んでいただきありがとうございました。
私はいつも、ユーザにとってより使いやすいサービスを作れるように頑張ってきました。アクセシビリティはその一つで、輪読会を通して仲間と共に学んできた大事な知見です。

アクセシビリティを考慮するということは、ユーザへの気遣いなのかなと思っています。使ってくれるユーザに少しでも使いやすいものを提供する努力、それが私のやりがいであり、楽しさです。

記事にすることで、少しでも多くの人がアクセシビリティを知り、文字サイズだけでもremにしてもらえたらいいなと思い、この記事を書きました。
世にあふれるサービスがよりアクセシブルになるといいなと、そしてその手伝いが少しでもできていたら良いなと思います。