みなさんコーディングをするときにアクセシビリティを考慮してコーディングをしていますか？

私は今までアクセシビリティというものを一切考慮せずにコーディングをしてきました。

しかし、実務を経ていくうちに利用者には色々な方がいて、
どんな人でもサイトを利用できるように制作することが重要だと実感しました。

そこで今回はアクセシビリティを考慮したコーディングについて解説していきたいと思います。

アクセシビリティとは？

そもそもアクセシビリティとはどういう意味なのでしょうか。

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。
引用元：ウェブアクセシビリティとは

とあります。

アクセシビリティのSEOへの影響

では、アクセシビリティの考慮の有無でSEOへ影響はあるのでしょうか。

Google検索セントラルのガイドラインの基本方針にはこのような項目があります。

訪問者がページを利用しやすいよう手助けする
引用元：ウェブマスター向けガイドライン

そのためアクセシビリティを考慮するということはSEOの評価でも重要視されていることが分かります。

アクセシビリティを考慮したコーディング

それではこれからアクセシビリティを考慮したコーディングの例をご紹介していきます。

アルファベット表記

まずは「アルファベット表記」について、今回は「WORKS」というアルファベットを例に紹介していきます。

ヘッダーメニューなどでアルファベット表記することがよくあると思いますが、
そのアルファベットを大文字で表記したいとき、みなさんはどうやっていますか？

私は今までずっとそのままアルファベットを全て大文字で「WORKS」と表記していました。

しかし、実はアルファベットをそのまま大文字で表記すると一部の音声読み上げソフトでは、
「W・O・R・K・S」と一文字ずつ読み上げられてしまうことがあるんです。

その場合はどうしたら良いでしょうか。

大文字にする最適な方法

まず、アルファベットの先頭の１文字だけを大文字にします。

あとはCSSの出番です。
text-transform を使用して大文字にします。

これで完了ですので、フロントを確認してみましょう。

コード上は先頭の１文字だけ大文字でそれ以外は小文字ですが、見た目は全て大文字になっていますね。

セマンティックHTML

次は「セマンティックHTML」です。
セマンティックHTMLというのは、簡単にいうと「タグは目的に沿った正しいものを使用しましょう」ということです。

「タグは目的に沿った正しいものを使用しましょう」とはいっても少し分かりづらいかもしれないので、
セマンティックHTMLとそうではない例を確認してみましょう。

上記のコードはセマンティックHTMLでしょうか？

いいえ、違います。
そんなわけないですよね笑

これは極端な例ではありますが、このようなコードではどこがheaderの終わりなのか分かりづらく、
コードを理解するのに時間を要してしまいます。

また、ナビゲーションのaタグの一階層上の親要素である.header-nav-itemにスタイルを当てるときも、
上記の例のようにHTMLで要素ごとにクラスを付与するか、
下記のようにCSSでセレクタを多用しなければならず、コーディングの際にも手間と時間を要してしまいます。

そして、検索エンジンのクローラーがサイトを訪問した際にサイトの構造を理解できず、評価が下がる原因にもなりえます。

それでは下記の例はどうでしょうか。

これがセマンティックHTMLを考慮して書いたものです。

先ほどの例と比較すると、とてもコードが読みやすく全体をすぐに把握できると思います。

また、スタイルを当てるときも次のように短縮して書くことができます。

セマンティックHTMLはとても初歩的なことですが、
これを守らないと可読性や保守性が悪くなったり検索エンジンのクローラーがサイトの構造を理解できず、
SEOでも不利になり「時間かけてサイトを制作したのに、検索で全く引っ掛からない！」ということになりかねません。

ですので、セマンティックHTMLを心掛けてコーディングをしましょう。

imgタグのalt属性

次はimgタグのalt属性についてです。
imgタグは画像を表示させるためのタグですが、alt属性は設定していますか？

そもそも、alt属性の役割はご存知でしょうか。
alt属性は何らかの理由で画像が表示されなかった際に画像の代わりに表示されるものです。

しかし、役割はそれだけではありません。
alt属性は音声読み上げソフトやスクリーンリーダを使用してサイトを閲覧している際に読み上げられるものでもあります。

そのため、imgタグにはalt属性を設定し、画像を説明する内容のテキストを入れるようにしましょう。
ただし、装飾などの意味のない画像の場合にはその限りではありません。

aタグ

次はaタグ、別名アンカータグについてです。
aタグはページ遷移するためのタグですが、アンカーテキストには何を設定していますか？

よく、「詳細はこちら」というような抽象的なアンカーテキストを設定しているサイトを見かけますが、
このような表現だと内容を確認するためにページ移動するという動作が発生してしまうためよくありません。

そのため、アンカーテキストはサイト利用者がリンク先の内容を理解したうえでリンク先をしっかり確認したいと思った人だけがクリックするようにリンク先の内容を簡潔かつ明確に設定しましょう。

また、aタグの部分であることをわかりやすくするために、
下記のように前後の文よりも装飾を少し目立たせ、かつリンクらしい装飾にすることも大切です。

サイト操作の数

次はサイト操作の数についてです。

サイトを利用するうえで操作というものは少なからず発生してしまうものです。
しかし、その操作の数が極端に多いとよくありません。

というのも、サイト利用者の中には体が不自由な方もいます。

そのような方でもストレスなく快適にサイトを利用できるよう、
必要な操作を少なくなるようなコーディングを心掛けましょう。

では、減らすべき必要な操作とはどのようなものがあるでしょうか。

代表的なものだと横スクロールがあります。

例えば、PCでサイトを閲覧しているとき、
縦スクロールはマウスホイールで簡単に操作することができますが、
横スクロールの場合、一般的なマウスだとスクロールバーで操作するしかありません。

また、スマートフォンでは左右にスワイプすると戻る・進むというジェスチャーが割り当てられており、
横スクロールが上手くできないことがあります。

そのため、横スクロールはできるだけ発生させないようにコーディングするということが重要です。
　

まとめ

ということで今回はアクセシビリティを考慮したコーディングについて解説しました。
いかがだったでしょうか？

私自身この記事を書くにあたってHTMLタグ一覧を確認してみたのですが、
知らないタグがいくつもあり、まだまだ勉強不足だなと実感しました。

それにしても、こんなにHTMLタグって種類があったんですね。

これから当分はHTMLタグ一覧の記事を確認しながらHTMLコーディングしたいと思います。

HTMLをしっかり理解していない方だけでなく完璧という方も、
もう一度、HTMLタグにはどのようなものがあり、それぞれどのような役割なのかを確認することをおすすめします。

最後までご覧いただきありがとうございました～。