桐生あんずです。 ここ最近は新卒研修のカリキュラムとしてオリジナルのWebサービスをRailsとAngularを使って開発していて、社内の人たちから毎日コードレビューを受けています。その中で、以下のようなやりとりがあって興味深かったので学んだことを書き残しておきます。
経緯(書いたコードと指摘の内容)
最初、以下のように<a>タグでAngularのRouterModuleで用意されているrouterLink属性を利用して画面遷移のリンクを用意するコードを書いたのだけれど、
<a routerLink="/rules/{{ rule.id }}">詳細を見る</a>
<button>タグのブラウザのCSSを使い回したくなったのと、この後の記述に<button>タグで用意した削除の処理のボタンをマークアップしていたのでどちらも<button>タグで書いた方がすっきりするのでは？と思いつき、以下のように書き換えたのだった。
<button class="a-rule-show__button" routerLink="/rules/{{ rule.id }}">詳細を見る</buttton>
このコードをプルリクで出したところ、以下のようなレビューコメントをいただき「なぜそうしてはいけないのか」について考えてみることになった。
「いきなり結論から書きますが、特別な理由がない限り、リンクナビゲーションを
<a>タグ以外で実装することは避けるべきです。 なぜなのかは、いったん自分で調べて考えてみてください。ちょっと難しいので考えても浮かびそうになければslackで聞いてください！」
そして色々調べて考えてみたところ、以下のような理由でこの記述はアンチパターンに当たることが改めて理解できたので紹介します。
セマンティクスに沿ったマークアップ設計はアクセシビリティを向上させる
HTMLで用意されている標準のタグ(<h1>, <nav>, <li>など)はそれぞれ意味が定義付けられており、今回使用した<button>タグならば「クリック操作を受け付ける」という意味を持っている。そして、<a>タグはナビゲーション、つまりリンクの行き先を示す時に使われる。
このように「○○は〜を表すものである」という考え方は セマンティクス(意味論) と呼ばれており、コードの断片に対して役割・意味を位置付けをするものである。
その考え方にしたがってブラウザの中で標準用意されたCSSはHTMLタグに対してそれぞれ文字のサイズや幅などのプロパティをセットしており、HTMLタグをマークアップするだけでユーザーがある程度想定している画面を用意してくれる。
ただ、標準のCSSをリセットしたり上書きをしてしまえばその見た目を打ち消すことは容易である。
(当たり前だけれど、多くのサービスのUI/UXは標準のCSSを打ち消してクラスを追加して綺麗なUI/UXを用意している)
そのようにCSSを打ち消した上でもHTMLタグを意味通りに使うことを正しく求められるのは、アクセシビリティに優れたページを作り上げる必要があることが一つの理由であると言える。 アクセシビリティについてはMDNの「アクセシビリティとは？」の記事の中で以下のように定義されている。
アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。
ここで自分のコードに立ち戻る。
<button>タグを使ってナビゲーションを用意しているが、もし読み上げ機能でHTMLのサイトを巡回している視覚障害者の方がいたと仮定する。
その場合、<button>タグを読み上げられても「クリック操作を受け付ける」ということしかわからず、「ナビゲーションリンクがある」という発想にたどり着くことまでに時間がかかってしまうことが予期される。
このシチュエーションはアクセシビリティが悪いという状態に陥っていると形容できる。この状況を改善するためには、本来「ナビゲーションリンクがある」という意味を持った<a>タグに置き換えることが求められるのである。
この具体例は断片に過ぎないので詳しくはMDNのアクセシビリティ関連の記事を読むのがお勧めです。
まとめ
一言で説明すると「使い方が定義付けられているHTMLタグをその意図に沿わずにマークアップを行うとアクセシビリティが低いサイトが出来てしまうのでやめましょう」ということなんだけれど、この結論に至るまでにはアクセシビリティとは何かについてまず考える必要がある。
その理解を深める中で、MDNの記事内で事細かになぜアクセシビリティを重視すべきかということが解説されていてWeb開発をやる上で一読しておくとすごく為になると思った。
そして、「正しいマークアップを行うだけでハンデを抱えた人が情報をインプットできる」という世界観があるのは結構すごい話だなと思っていて、これもWebの力だなあとエモい気持ちを感じた始めたところでそろそろ締めます。
補足
正しいマークアップを意識することはアクセシビリティを考える以外でも必要な理由があるので、補足説明としてそれらについても羅列しておきます。
MDNの「HTML: アクセシビリティの基礎」から引用
