見出し画像

アクセシブルな表組み（table）の「実装」を考える前に見なおすべきポイント

バーンワークス株式会社

バーンワークス株式会社の加藤です。今回のショートコラムは、表組み（table）をアクセシブルにする方法に関するお話。

以前、会社のコラムで書いたことなのですが、それを少し簡略にまとめて再掲載してみたいと思います。

結論から先に言いますと、どのようなHTMLにすればアクセシブルな表組みになるのか、つまり、表組みの実装方法（HTMLのマークアップ）を考えることはもちろん重要なのですが、それ以前に、そもそも、その表組み自体がシンプルで、ユーザーや機械とってわかりやすい、理解しやすい構造になっていますか？そちらの確認が先ですよ、というお話です。

わかりやすく、理解しやすい表組みのヒント

このお話をするとき、私が参考資料としてよく使わせていただくのが、総務省が公開している下記の資料です。

上記資料は、HTMLのマークアップに関する資料ではなく、主にExcelやCSV形式のファイルにおける、機械判読可能（マシンリーダブル）なデータの表記方法を統一する目的で作られたものです。

よって、直接的にはウェブページなどのウェブコンテンツと関係ない資料なのですが、機械判読可能なデータという点で、その表組み自体の作り方、データの記述方法についてはとても参考になる資料です。

特に資料内の第2章では、Excelによって作成される統計表のレイアウト、データ記述形式に関して、「修正前」と「修正後」の比較を提示してくれています。要するに「Do（すべきこと）」と「Don't（すべきでないこと）」という形で具体的な例から学ぶことができます。

いくつか資料内から紹介しますと、特に以下の2点などは、重要なチェックポイントとなります。

  • 1セル 1データとなっているか

  • セルの結合をしていないか

例えば、「1セル 1データとなっているか」の例としては下記のようなものが紹介されています（上記資料から引用）。

画像：「1セル 1データとなっているか」の例1
修正前の表組みでは、仕入れ額と出荷額のセルに、年度ごとの複数データが入力されてしまっています。修正案で挙げられているように、年度ごとに列・行を分け、各セルにデータを分離して入力する方が視認性も機械による可読性も向上します。

下記のような例も同様です。

画像：「1セル 1データとなっているか」の例2
この例にある「売上金額（その内の仕入れ額）」のような書き方は、結構やってしまいがちな記述ですが、修正案のように、セルを分けることでわかりやすい表組みにすることができます。

「セルの結合をしていないか」の例としては下記のようなものが挙げられています。

画像：「セルの結合をしていないか」の例
わかりやすいと思ってセルの結合をすると、逆に機械による可読性が下がったり、HTMLの実装も非常に複雑で、アクセシブルな表組みにするのが難しくなる可能性があります。また、長大すぎる表組みも理解が難しくなる可能性があるので、必要に応じて表組みを分割してもよいでしょう。

どうでしょう？ウェブサイトに掲載する原稿を作ったりしている段階で、「修正前」に挙げられているような「わかりにくい表組み」を作ってしまっていませんか？

そもそもの表組みの設計が悪いと、どんなにHTMLの実装側で何とかしようとしても限界があります。

ウェブアクセシビリティというと、真っ先にHTMLをどうするか？という実装系の話に話題がいきがちなのですが、実装の前に、そもそも元の表組み自体が、人間にとっても、機械にとってもわかりやすく、理解しやすい構造になっているのか？という点は見落としがちなポイントですので、ぜひ念頭に置いてみてください。

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

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

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

それでは。

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

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

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

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

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

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

  • ウェブアクセシビリティガイドライン（JIS X 8341-3:2016 等）に適合、準拠、または配慮したウェブサイトの構築をお求めの企業・団体様

  • アクセシビリティ対応プロジェクトの各フェーズにおけるコンサルティングや外部アドバイザーをお求めの企業・団体様

  • アクセシビリティ対応実務（コンテンツ修正や改善実装）を高いレベルで遂行できる制作チームをお求めの企業・団体様

  • 外部アクセシビリティ専門家によるアクセシビリティ試験の実施や改善提案をお求めの企業・団体様

  • UX、ユーザビリティ、アクセシビリティに優れたウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様

  • CMSを活用した更新性の高いウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様

  • ヘッドレスCMSやJavaScriptフレームワークを活用した高パフォーマンスなウェブサイトの新規構築・リニューアル構築をお求めの企業・団体様

  • 上記のようなスキルを持ったパートナー企業をお探しの広告代理店様、システム開発会社、ウェブサイト制作会社様など

書いている人について

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

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

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

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

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