「コーディングWebアクセシビリティ」に習うボタン作成のすすめ

はじめに

この記事は書籍「コーディングWebアクセシビリティ」に書かれてあるチャプター２の内容を実際にコードに書いて確認するという内容です。

divタグやspanタグでボタンが作成されたサイトは以前と比べてとても減ったように感じますが、まだ見られる様です。

前提として

Web標準は「取り決め」にほかなりません。この取り決めに従うことによってはじめて、処理を行い、できるだけ多くの人が予測する通りに動作させることができるのです。要素に特定の動作を割り当てることによって、複数のブラウザベンダーがこの表示動作について見解をもつのです。
中略
支援技術ベンダーが制作者およびブラウザベンダーと協力して（HTMLコンテンツをアクセシブルにするべく）標準化されたインターフェイスによって提供される情報を利用しなければ、憂う目に遭うのはユーザーです。

コーディングWebアクセシビリティ　31ページから引用

つまり様々なユーザーに問題なくつかってもらうには正しいマークアップが必要になってきます。

以下は書籍に記載されていたCSSのみでボタンがアクセシブルかどうかを判定する内容になります。

test.scss

.button {
  display: inline-block;
  background-color: DarkSlateBlue;
  border-radius: 0.25em;
  bos-shadow: 0 4px 0 #222;
  color: white;
  cursor: pointer;

  // ボタン以外の要素に対して.buttonクラスを使用したらエラーメッセージが出る
  &:not(button):after {
    background: red;
    color: white;
    content: '警告: ここでは要素をボタンの様な外観にしようしています。この要素は本当にボタンですか？';
  }
}

// ボタンにtype属性がなければエラーメッセージが出る
button:not([type]):after {
  background: red;
  color: white;
  content: '警告: このボタンにはtype属性がありません。submitですか？resetですか？単純なボタンですか？';
}

// aタグやbuttonタグに中身がない、aria-alabelやalia-labelledbyが指定されていないとエラーメッセージが出る
a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after,
a:empty:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after {
  background: red;
  color: white;
  content: 'このボタンに関する情報が十分ではありません。ボタンの中にテキストを含めてください';
}

demo

See the Pen a11y-button by Makoto Ogata (@makoto-ogata) on CodePen.

アクセシビリティに関してまだ勉強中の身ではありますが、エンジニアとしてこれからも様々なユーザーに配慮して良いものを作っていきたいと思っています。

参考