制作者はウェブサイトを「キーボードで操作してみる癖」をつけよう

バーンワークス株式会社

2024年12月10日 11:19

バーンワークス株式会社の加藤です。今回のショートコラムは、リンクやボタンなどのウェブページ上でユーザーが頻繁に操作するUI（ユーザーインタフェース）において、キーボード操作に関連して発生しがちなウェブアクセシビリティ上の問題について。

先日、会社のコラムで「ウェブアクセシビリティ試験で問題ありと指摘することが多い達成基準と実装例トップ 5」という記事を書きました（下記リンク参照）。その中でも触れた内容ですが、再編集してご紹介しようと思います。

キーボードで操作できないUI問題

ウェブアクセシビリティ試験などを担当していると、キーボードで操作できないUIに遭遇することがとても多いです。

よくあるパターンとしては下記のようなものがあります。

アコーディオンUIの開くボタンに相当する部分が、div要素やspan要素、あるいは見出し要素に直接イベントリスナを登録して実装してある（見出しをクリックすると続くセクションが開閉するような実装）
スマートフォン向けのメニューなどで、初期状態では閉じられたメニューのサブ階層を開く「+」ボタンなどがspan要素などで実装されている
ポインティングデバイスでの操作（マウスオーバー）でしか展開しないサブメニュー（他にナビゲーションの代替手段があれば多少は許容できるが......）
ヒントなどをポップアップ表示するような「?」アイコンがdiv要素やspan要素で実装されている、おまけにマウスオーバーでしかヒントが表示されない

私がお仕事で、特に実装を担当される職種の方々（要するにフロントエンドエンジニアと呼ばれるような方々）やウェブアクセシビリティを含めた品質管理を担当される方々に助言などをさせていただく場合、「キーボードでウェブページを操作してみる癖をつけましょう」と必ずお伝えするのですが、マウスでの操作や、タッチデバイスでの実機確認しかしていないと、この問題に気がついていないケースが多いです。

このようなUIを実装する場合、その操作（開閉など）に使用するボタン類は、必ずbutton要素を使用して実装する、そして、マウスオーバー時（:hover）だけでなく、フォーカス時（:focus / :focus-within）にも同様の動作をするように実装することを徹底するだけでこのような問題点の多くは解決します。

ちなみに、ある要素へのフォーカス時に自動でポップオーバー（ページにオーバーレイして表示されるコンテンツ）などを表示する場合は、フォーカス時ではなく、フォーカス後にエンターキーの押下など、ユーザーのアクションで処理が実行されるようにしましょう。フォーカスしただけでポップオーバーが表示されたり、ページの内容が大きく変更されるような実装は、別のウェブアクセシビリティ上の問題となります。

また、例えば、よくある質問と答え（FAQ）の各項目において、質問部分をクリックしたら答え部分をアコーディオンUIで展開して表示したい、といったニーズについては、details要素を使用することで、今どきは JavaScript 不要で実装できますので、そういった知識を持つことも大切です。

details要素については過去に私個人のブログや、GitHubリポジトリでソースコードのサンプルを公開していますのでご参考まで。

さて、今回のコラムはここまで。

最後までお読みいただいてありがとうございます。もし今回の内容が少しでも参考になった、気に入っていただけた、という場合はぜひフォローしていただければ幸いです。

また次回のコラムでお目にかかりましょう。

それでは。

バーンワークス株式会社のショートコラムは、バーンワークス株式会社代表の加藤が、ウェブアクセシビリティやユーザビリティ、HTMLやCSSなど、フロントエンド技術に関する話題を、あまり長くならない範囲で更新していくコンテンツです。一部は、バーンワークス株式会社の公式サイトにおいて、過去に公開されたコラムなどの内容を再編集、再構成したものも含まれます。

なるべく小難しくならないように書こうと努力はしていますが、できるだけ正確な用語を使用し、公式なドキュメントを参照しつつ書こうとすると、ちょっとわかりにくい言い回しになってしまったり、リンク先が英語のドキュメントになってしまったりすることがあります。ご容赦ください。

バーンワークス株式会社について

バーンワークス株式会社は、ユーザー体験を最大化する情報デザインとウェブアクセシビリティ対応を専門分野にサービスを提供する『ウェブアクセシビリティに強いウェブサイト制作会社』です。

弊社では、より本質的な視点に立ったウェブサイトの構築、アクセシビリティ対応などの関連サービス、ウェブシステム開発などを創業以来、10年以上にわたり企業、公的機関向けに提供しています。

下記のようなサービスをお求めの企業・団体様、ぜひお気軽にご相談ください。

ウェブアクセシビリティガイドライン（JIS X 8341-3:2016 等）に適合、準拠、または配慮したウェブサイトの構築をお求めの企業・団体様
アクセシビリティ対応プロジェクトの各フェーズにおけるコンサルティングや外部アドバイザーをお求めの企業・団体様
アクセシビリティ対応実務（コンテンツ修正や改善実装）を高いレベルで遂行できる制作チームをお求めの企業・団体様
外部アクセシビリティ専門家によるアクセシビリティ試験の実施や改善提案をお求めの企業・団体様
UX、ユーザビリティ、アクセシビリティに優れたウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
CMSを活用した更新性の高いウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
ヘッドレスCMSやJavaScriptフレームワークを活用した高パフォーマンスなウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様
上記のようなスキルを持ったパートナー企業をお探しの広告代理店様、システム開発会社、ウェブサイト制作会社様など

書いている人について

加藤善規（かとうよしき）

埼玉県出身（東京都生まれ埼玉育ち）。専門学校でメカトロニクスを専攻後、製造業での生産、品質管理や、全国チェーン物販店での店舗開発などに従事する傍ら、独学で学生時代から続けていた趣味が高じてIT業界に。

フリーランスによるウェブサイト制作業務等を経て、2004年より都内ウェブサイト制作会社に所属。同社取締役ウェブサイト制作部門統括。2014年、バーンワークス株式会社を設立、同社代表取締役に就任。

ウェブフロントエンド技術、およびIA（情報設計）、アクセシビリティ、ユーザビリティを主な専門分野とし、ウェブサイト制作ディレクション業務、コンサルティング業務の他、セミナー等での講演、書籍の執筆などを行っています。

好きなことはサッカー、フットサル（観戦 / プレー）、モータースポーツ観戦、インターネット、音楽鑑賞、筋トレ、ギター、腕時計鑑賞。サッカー4級審判員、ウオッチコーディネーター（上級 CWC）資格認定者。