［連載］徹底解説！インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン (6)

こんにちは、freeeの伊原です。先日のInside Frontend #2というイベントで「freeeのアクセシビリティ、いまとこれから」と題して登壇してきました。事業会社の中からアクセシビリティをやっていこうとすると、受託でWebデザインをやっていたころとはまたいろいろ違った取り組みが必要だなーと感じる日々です。リニューアルを機にいろいろ整備できるような状況ではないときに、日々少しずつ良くしていくためには、継続的なアプローチが生まれるような土壌づくりが重要な気がしています。なかなか一足飛びには行かないものですが、じわじわ続けていきますので、また進展があればどこかで報告したいと思います!

また、本連載のテーマである「インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」ですが、おかげさまでamazonレビューが増えてきました。拝見する限り、いくばくかは手に取った方のお役に立てているようで、ホッとしています。このメルマガをご覧のみなさま、短くてもシンプルでも構いませんので、ぜひレビューを頂ければありがたいです！

それでは今回も、書籍から内容をダイジェストでご紹介いたします！

7章：メニューボタン

前回はページ上部にある横並びのナビゲーション、いわゆる「グローバルナビゲーション（グロナビ）」を取り上げました。しかし、現在はスマホやタブレットにおけるUIの流れが逆輸入？され、こういった横並びナビを使わないケースも増えてきました。ではどんなナビが使われているのでしょうか？横じゃなくて縦？それももちろんありますが、やはりよく見かけるのは「ハンバーガーメニュー」、すなわち、オスとメニューが出るというスタイルのものです（ちなみに最近リニューアルされた東京ドームのサイトは、画面幅が広いと縦ナビ、狭いとハンバーガーメニューになります）。

ボタンを押してメニューを出すという仕組みは、簡単なようで意外と奥が深いのです。どのようにすれば、それがメニューボタンだとわかるか。実際に押すことができるか。押したあとにどうなったかがわかるか。そういったあたりをひとつずつ解決してこそ、インクルーシブなハンバーガーメニューになろうというものです。それではさっそくそのやり方を追ってみましょう。

つづきはメルマガで……。