ウェブアクセシビリティって？リンク先の正しい説明と文章の正しい表示

ウェブアクセシビリティとは

ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
ウェブアクセシビリティ基盤委員会｜アクセシビリティとは

企業や団体など何をするにしてもウェブページは必要不可欠となっている世の中ですが、ウェブページを閲覧する人の中には目が見えない方や見えづらい方、「色覚異常」と言われている色の見分けがつきにくい方など様々いらっしゃいます。

なんの変哲もない普通のウェブページだと思って見ていたとしても、目が見えなかったり色の見分けがつきにくくなるだけで同じように閲覧することが難しくなる場合があります。

現在は公的機関のウェブページは必須となっているウェブアクセシビリティの改善は、基本的には民間企業のウェブページも対象内ではあるものの、まだまだ広く知られていないのが現状です。

なんの変哲もない普通のウェブページだと思って見ていたとしても、目が見えなかったり色の見分けがつきにくくなるだけで同じように閲覧することが難しくなる場合があります。

現在は公的機関のウェブページは必須となっているウェブアクセシビリティの改善は、基本的には民間企業のウェブページも対象内ではあるものの、まだまだ広く知られていないのが現状です。

アクセシビリティを理解することでHTMLで使用している様々なタグの使い方の理解も深まります。
どんな人が閲覧していても、正しく情報を伝えるためにウェブアクセシビリティを理解し、改善をしていきましょう！

リンク先の説明がされているか

ページ上に様々なリンクを表示するかと思いますが、そのリンク先に何が表示されるのか正しく説明しておくこともアクセシビリティ改善となります。

例えば、PDFファイルやExcelファイルテキストファイルなどのリンクであるのにどんなファイルへのリンクなのか記載されていないと勝手にダウンロード画面になってしまい、目が見えない方からするとどんな画面になっているのかわからなくなってしまうことがあります。

リンク先の説明が必要となるのは大きく分けて2種類あります。

・PDFファイルやExcelなどダウンロードが必要なファイルへのリンク
・自身のページ以外のウェブページへ移動するリンク（外部リンク）

自身のページ内でのリンクであれば説明は不要ですが、ファイルへのリンクや外部サイトへのリンクへはきちんと明記しておくと安心です。アイコンなどを用いている場合と用いていない場合で対策方法が変わるかと思うので2つの説明方法を紹介します。

リンクの中に直接明記する

これはaタグにそのまま記載するだけです。例えば、（PDFファイル）や（Excelファイル）（外部サイト）などを記載しておくだけで、目が見えない方や見ているがどこにリンクされているのか分からないと不安になる利用者への配慮となります。

<a href=”ファイルのパス”>ファイル（PDFファイル）</a>

ただし、配慮をアイコンでしている場合は以下の方法で説明することもおすすめです。

見えない要素を使用する

アイコンを表示しているから、できれば文字として表示させたくない時には見えない要素を使用して説明を入れてあげるのが効果的です。
やり方はaタグの中にspanタグやpタグなどを入れてstyle=”display:inline-block;width:0;height:0;clip:rect(0,0,0,0);overflow:hidden”を記載しPDFファイルや外部サイトなどの文言を入れてあげます。

そうするとアイコンが見える方からすると見た目は何も変わりませんが、読み上げ機能を使用したときには説明が読み上げられるのでデザイン性を損なわずにアクセシビリティ改善をすることが可能です。

<a href="ファイルのパス" class="任意のクラス名">
  ファイルリンク
  <span style="display:inline-block; width:0; height:0; clip:rect(0,0,0,0); overflow:hidden;">
    PDFファイル
  </span>
</a>

アイコンを表示する際に画像をimg要素で入れている場合は、altタグに入れるのも効果的です。

<a href=”ファイルのパス”>
  ファイルリンク
  <img src=”画像のパス” alt=”PDFファイル”>
</a>

文章は正しく表示されているか

基本的なことですが、デザイン的に認識しすぎて文章が正しい読み方をされないことがあるので注意が必要です。

例えば、テーブルなどで見出しを入れたとき文字の間隔を合わせるために空白を入れている場合がありませんか？このような書き方をすると、読み上げ機能を使用したときに正しい読み方にならないことがあります。

「日時」を「日　時」と表記すると本来ならば「にちじ」と読ませたいはずなのに「にちとき」と読まれてしまう可能性があるのです。

逆に人の名前を記載するときは苗字と名前の間に空白を入れることで正しく読んでもらうことができます。必要であればルビを入れてあげるとより改善されるかと思います。

見た目を気にすることは大切ですが、見た目を気にしすぎるがゆえに間違った情報が伝わってしまうことは避けなければいけません。cssなどで文字の間隔を調整するなどして正しく情報を伝えつつ、見た目を整えてあげるのがよいかと思います。

最後に

今回は基礎的な２つの改善箇所について解説していきました。まだまだ改善をしていける箇所はたくさんあります。

第２回でより改善の範囲が広くなりやすい色と画像のアクセシビリティ改善について解説できればと思います！