Webアクセシビリティ! 配慮されたWebサービス作り

2024年4月1日から「障害を理由とする差別の解消の推進に関する法律」（以下、障害者差別解消法）の改正によって、障害のある人への合理的配慮の提供が、民間の事業者も義務化された。合理的配慮の提供とは、社会の中にあるバリア（障壁）によって生活しづらい場合がある障害のある人から、そのバリアを取り除くための対応を求められた場合、事業者は負担が重すぎない範囲で対応することが求められている。それに加え、合理的配慮を的確に行うための「環境の整備」が努力義務になっており、WebサイトやサービスもWebアクセシビリティを確保することが必要とされている。今回は、このWebアクセシビリティの基本と求められる対応、実際の事例に至るまでを紹介する。多様なユーザーの声に応えるWebサービス作りの参考にしてほしい。

Webアクセシビリティという言葉を聞いたことはあっても、実際にそれを説明することは難しいだろう。本記事ではWebアクセシビリティの概要から、日本のWebアクセシビリティ対応に向けたガイドラインを紹介し、実際にアクセシブルなWebサイトを設計するメリットを解説していこう。

「Webアクセシビリティ」とは何だろうか。「アクセシビリティ」はAccess（近づく、アクセス）とAbility（能力、〜できること）から成る言葉であり、「（製品やサービスを）利用できること、またはその到達度」を表わす。このWebアクセシビリティは、その名の通りWebにおける利用のしやすさであり、利用者が障害の有無や程度、年齢や利用環境にかかわらず、Webで提供されている情報やサービスを利用できることや、その到達度を意味している。例えば、目が見えなくてもスクリーンリーダーで情報を得られたり、操作できたりすることや、一部の色が識別できなくても情報を正しく得られるような対応が求められる。

　一方で、障害と一口に言ってもさまざまな特性がある。利用状況によっても求める対応は変わるだろう。そうしたWebアクセシビリティへの対応を網羅的に体系化されたガイドラインとして、インターネットの各種規格を策定しているW3C（World Wide Web Consortium）が勧告している「Web Content Accessibility Guidelines」（略称：WCAG）がある。1999年に「WCAG 1.0」、2008年に「WCAG 2.0」が勧告されており、現在の最新バージョンは2023年10月に勧告となった「WCAG 2.2」だ。

　日本ではWebのアクセシビリティやWebアプリケーションに関するJIS規格「JIS X 8341-3」がある。2004年に一般的なアクセシビリティの課題に加え、日本固有の課題を解決するための要件が盛り込まれたJIS X 8341-3が発行され、改正を重ねて来た。2016年にはWCAG 2.0と一致規格となる「JIS X 8341-3:2016」が登場している。この規格に準拠することで、高齢者や障害のある人を含む全ての利用者が、使用している端末やWebブラウザー、支援技術などに関係なく、Webコンテンツを利用できるWebアクセシビリティが担保できる。

　このJIS X 8341-3の理解と普及を促進するため、2010年8月のJIS X 8341-3改正とともに情報通信アクセス協議会内に誕生したのが、ウェブアクセシビリティ基盤委員会（Web Accessibility Infrastructure Committee：WAIC）だ。ウェブアクセシビリティ基盤委員会はJIS X 8341-3の策定に携わっており、理解と普及を進めるための関連ガイドラインの策定や、W3C関連文書の日本語訳、公的機関や民間企業Webサイトの実態調査などを行っている。

　Webアクセシビリティが求められる背景について、ウェブアクセシビリティ基盤委員会 作業部会2副査 諸熊浩人氏は「ユーザビリティという言葉がありますが、これは特定の利用者、あるいは特定の利用シーンで使った場合の使いやすさを定義しています。これに対してアクセシビリティは、より幅広い利用者、利用シーンで使えるようにしていくという考え方です。例えば障害の有無にかかわらず、高齢者は視力が落ちて対象が見えにくくなったり、手足が自由に動きにくくなったりします。私は全盲なのですが、目が見えないとマウスを使って画面でマウスポインターを動かすような操作ができません。そこで、代わりにキーボードを使ってPCを操作しています。逆に言うとキーボードで使えるように設計できていないWebサイトやサービスは使えません」と実体験を交えて語る。障害者がWebサービスを使う機会は多く、例えば諸熊氏のように視覚に障害があると、程度によっては運転免許の取得ができない。車が必要となる大型の製品を買い物するときなどは、Webサイトで買い物をすることが多いと話し、「生活の中でWebサイト、サービスが浸透しています。だからこそ誰もが使えるよう、Webアクセシビリティの需要が高まっています」と諸熊氏は指摘した。

　それでは、Webアクセシビリティに配慮されたWebサイトはどのように作っていけば良いのだろうか。前述したJIS X 8341-3:2016に対応した設計をすることが肝要であり、詳細はウェブアクセシビリティ基盤委員会が公開している各種ガイドライン（https://waic.jp/guideline/#jis）を参照してほしい。

　ウェブアクセシビリティ基盤委員会 作業部会1副査 柴田宣史氏は「アクセシビリティの知識がある人がWebサイトの制作に関わると良いでしょう。障害のある当事者もそうですが、障害に対する知識を持っている人など、アクセシビリティに対する想像力がある人を入れることで、アクセシビリティへの対応がスムーズになります」と語る。見えない・見えにくい利用者、聞こえない・聞こえにくい利用者、上肢や器用さに難のある利用者、認知に障害のある利用者、それに高齢者など、さまざまな特性のある利用者が存在する。そうした利用者が、それぞれOSの機能や支援技術を活用することでWebサイトを利用しているのだ。多様な利用方法を意識した制作を心がけることで、特定の利用者を排除しないWebサイトを構築できるだろう。

　Webアクセシビリティは民間事業者のWebサイトはもちろんのこと、Webブラウザー上で動作するクラウドサービスを提供する上でも配慮が必要だ。諸熊氏は「実際にいくつかのサービスを使った印象ではありますが、大手企業が提供している製品はアクセシビリティ対応のものが増えつつあります。しかし、それでも全体の2〜3割程度という印象です。Webアクセシビリティが担保できていないサービスの場合、自身で手続きができず別の人に全てお任せすることになってしまい、その分無駄な作業時間が発生しています」と指摘する。

　例えば障害者雇用を行ってる企業では、Webアクセシビリティに配慮されていないクラウドサービスを使うことが逆に業務効率の低下を招いてしまう可能性があるのだ。今後、労働人口の減少が進む日本企業においては、障害者や高齢者といった多様な人材が労働に参加できるようにする環境作りは非常に重要であり、そういった視点から見てもWebアクセシビリティへの対応は喫緊の課題と言えるだろう。実際、今回の取材はTeamsを活用したオンライン取材で行ったが、諸熊氏によるとTeamsはアクセシビリティに優れており、キーボードのみで操作ができるという。

「物理的な会議では現地に行く必要がありますが、オンライン会議であれば自宅から参加できます。Teamsをはじめとしたオンライン会議ツールには字幕生成の機能も搭載されているため、聴覚に障害がある人でも会議に参加しやすくなります。物理的な会議では存在する制約を、オンラインであれば取り払えるのです」と柴田氏は語る。

　ウェブアクセシビリティ基盤委員会では今後、WCAG 2.2に対応したJIS X 8341-3の改定を進めていく。「アクセシビリティの向上は、健常者にとっても利便性の向上につながります。特定の人が頑張っても達成できない取り組みですので、Webサイトに関わる事業者全体が共有の意識を持って対応を進めてもらえたらと思います」と諸熊氏は語った。

クラウド人事労務ソフト「SmartHR」を提供するSmartHRは、同社の製品を“誰もが”使えることを目指し、アクセシビリティの向上に取り組んでいる。「仕組みで解決できることを、優しさで解決しない」ことをキーメッセージに、ソフトウェアの設計から社内制度に至るまで実践する、同社のアクセシビリティに関する取り組みについて、話を聞いた。

　SmartHRは、2022年1月からプロダクトデザイン統括本部内に、プログレッシブデザイングループを立ち上げた。現在はこのグループの名称をアクセシビリティ本部に変更し、全社的なアクセシビリティへの対応を推進している。

　SmartHR プロダクトデザイン統括本部 アクセシビリティ本部 本部長 アクセシビリティスペシャリスト 桝田草一氏は、その取り組みを次のように語る。「第一に、『SmartHR』が誰にとっても使いやすい製品であるように、Webアクセシビリティに配慮したUIを採用している点です。『SmartHR』はクラウド型の人事労務ソフトですので、導入した企業の全ての従業員が利用します。多様なユーザー企業で導入が進む中で、視力に障害がある人や、手足などの障害がある人も『SmartHR』を使います。そのため、文字通り“誰もが”使えるWebアクセシビリティへの対応が不可欠です」と語る。

「SmartHR」を開発する上での、Webアクセシビリティへの対応は主に「見やすさ・視認性」「カラーユニバーサルデザイン」「キーボード、音声読み上げによる操作」の三つだ。

　見やすさ・視認性の部分では、文字の大きさや色の基準を定めることで、視力が弱い人でも見やすい文字サイズや配色を採用している。具体的には、コントラストが低かった色を調整し、視認性の向上を図ったことで、ロービジョン（弱視）の人や高齢者でも操作を行いやすくした。こうした工夫は、健常者がまぶしい環境でスマートフォンを操作する場合にも有効だ。

　カラーユニバーサルデザインでは、色弱などの色覚特性があり、色の違いが分かりにくい人でも情報が伝わりやすいよう、白黒でも伝わる配色を採用している。こうした工夫をすることで、画面を白黒で印刷する場合にも理解しやすいのだ。

　キーボード、音声読み上げによる操作では、画像やアイコンにテキスト情報を付与したり、キーボードだけで操作できるように設計したりしている。こうした対応によって、スクリーンリーダーなどの音声読み上げ環境でも操作が可能になる。スクリーンリーダーは画面を音声で読み上げるツールだが、例えばダイアログがポップアップした場合、それが読み上げに反映されない場合も多い。SmartHRではダイアログ表示や、合意ボタンなどの読み上げもきちんと行うため、迷わず操作ができる。また、アラートや通知は優先的に読み上げられるように設計されており、視覚障害を持つ人でも入社手続きなどを自身で行うことが可能だ。

　こうしたアクセシブルな製品設計を実現する上で、SmartHRは「アクセシビリティテスタープロジェクト」を行っている。これは、障害がある従業員がそれぞれの障害特性を生かして「SmartHR」の機能をテストし、その問題点をフィードバックすることによって、「SmartHR」のアクセシビリティの改善につなげているのだ。桝田氏は「これまでの障害者雇用は、単純作業などの業務の切り出しや、障害のある人でもできる仕事を割り振るといった業務が主でした。しかしアクセシビリティテスタープロジェクトは障害特性を生かした仕事のため、やりがいを感じられますし、アクセシビリティの専門性を高められます」と語る。

　SmartHRでは、全盲で目が見えない人や、眼鏡で視力の矯正ができないロービジョン（弱視）の人、四肢に障害がある人などをアクセシビリティテスターとして雇用し、製品のテストを行っている。そのテスト結果を開発チームにフィードバックすることで、アクセシビリティの改善につなげているのだ。桝田氏は「『SmartHR』のような人事労務ソフトが担う入社手続きや年末調整といった作業に生じるデータ入力は、以前は障害者の仕事の一つでもありました。これらの仕事をデジタル化することにより、利便性の向上が実現できる半面、障害者がこれまで行ってきた仕事を奪うことにもつながります。だからこそアクセシビリティテスターのような、障害特性を生かした仕事を創出することで雇用を増やしていくことも必要だと感じています」と語る。

　SmartHRでは、誰もが働きやすい仕組みづくりにも取り組んでいる。フルフレックス、フルリモートの勤務形態を採用しているため、移動が難しい障害を持つ人や、通院や入院があっても柔軟に勤務が可能だ。また、オフィスに出社した場合でも働きやすいよう、会議室や設備に点字ラベルを貼るなど、オフィス内のバリアフリー化を推進している。

　桝田氏は「課題として、当社が入居しているビルのエントランスフロアに点字ブロックがなく、そこの移動が難しいという意見があります。オフィスの中はバリアフリー化が進められても、そこ以外の場所の環境整備は難しいのが実情です。社会全体で環境整備に取り組む必要があるでしょう」と指摘した。

　SmartHRでは、今後も製品のアクセシビリティの向上に取り組んでいく。例えば年末調整などの事務作業は、精神障害や知的障害があったり、日本語が得意でなかったりする人にとっては理解が難しいケースもある。「SmartHR」では、年末調整を簡単なアンケートに回答するだけで完了できるUXを実装しており、誰でも使える使いやすさにこだわった開発を続けている。

「Webサービスがアクセシブルでなくても、これまで問題として扱われたことはありません。しかし、例えば米国ではWebアクセシビリティ関連で年間5,000件弱の訴訟があるほか、他の先進国でも罰則規定が存在します。Webサービスをグローバルに展開していくことを視野に入れている場合、Webアクセシビリティへの対応は必須といえますし、こうした罰則化の流れは将来的に日本にもやってくることが想定されます。今の内にWebアクセシビリティに配慮したサービス作りに取り組むことが必要です」と桝田氏は語った。

Web上の情報の中には、PDFファイルの形式で公開されているものも多い。Webサイト運営者は、Webコンテンツのみならず、そこで公開されるPDFファイルのアクセシビリティにも配慮する必要があるだろう。アドビは、PDFファイルのアクセシビリティを向上させるための機能を、PDF作成・編集ソフトウェア「Adobe Acrobat」で提供している。PDFファイルのアクセシビリティを向上させるための取り組みを見ていこう。

　2023年12月4日、アドビは同月3日から始まる「障害者週間」に合せて「PDFファイルのアクセシビリティに関する調査」の結果を公表した。同調査はWebサイト運営に直接関わる会社員300名を対象に実施したものだ。それによると、Webサイト運営者の約6割がPDFのアクセシビリティ機能を利用していることが分かった。ここでのアクセシビリティ機能とは、アクセシブルなPDFであるかを判定するためのチェック機能や、読み上げ順序の設定、文書構造のタグ付けによって、PDF内の情報を整理したり、データ化したりしてアクセシビリティを強化する機能のことだ。

　上記のアクセシビリティ機能について、「頻繁に利用している」が24.2％、「ときどき利用している」が35.5％と、合わせて約6割（59.7％）のWebサイト運営者が利用している結果となった。また、作成・提供しているPDFコンテンツに、WCAG（Web Content Accessibility Guidelines）などのアクセシビリティのガイドラインが適用されているかという問いに対しては、「全てのPDFに適用されている」が28.7％、「一部のPDFにのみ適用されている」が29.7％の回答で、合わせて約6割（58.4％）の企業がアクセシビリティガイドラインを適用していることが分かった。いずれも従業員300名以下の企業と、301名以上の企業では対応に差があり、大企業ほどPDFファイルのアクセシビリティへの対応が進んでいることが分かった。

「鉄道業や金融業などの大企業は、より多くの人々に情報を伝える必要があるため、アクセシビリティを担保したPDFファイルを作成する需要が高いのだと思います。本調査では特に『代替テキストや説明文の付与』や『しおり／ブックマークの付与』『カラーコントラストの調整』『文書内の検索可能なテキストを作成』といった設定を、アクセシビリティ向上のため行っている割合が多かったですね。中でもしおりやブックマークの付与は、本来WCAGのガイドラインでは必須ではありませんが、長い文章の場合付けることが推奨されています」とアドビ デジタルメディア事業統括本部 営業戦略本部 ドキュメントクラウド戦略部 シニアソリューションコンサルタント 伊東礼一氏は語る。

　アドビが提供するAcrobatでは、上記のようなアクセシビリティ向上のための設定の有無をチェックする機能「アクセシビリティチェッカー」が利用できる。Acrobatのツールタブから「アクセシビリティ」を選択し、左パネルから「アクセシビリティチェック」を選択、オプションダイアログで必要に応じてオプションを選択して「チェック開始」を選択すればよい。チェックが完了すると、アクセシビリティの問題を示すパネルが右側に表示されるため、それぞれ推奨手順に従って修正をすることで、アクセシブルなPDFファイルに仕上げることが可能になる。

　また、アドビのAI機能「Adobe Sensei AI」を活用した「Adobe PDF Accessibility Auto-Tag API」によって、PDFのコンテンツ構造に対するタグ付けのプロセスの自動化や拡張も実現する。本APIは見出し、段落、リスト、テーブルなどの構造をタグ付け、または識別することで、スクリーンリーダーなどの支援技術に適した正しい読み上げ順序を指示してくれる。Webアクセシビリティのガイドライン（WCAG）に沿ってPDFデータをアクセシブルにするための作業の負担を大幅に低減し、多様な人が情報にアクセスできるようサポートしてくれる。

　PDFデータを閲覧するユーザー側にとって便利なアクセシビリティ機能もAcrobatは備えている。スクリーンリーダーや拡大鏡といった機能はもちろん、色弱のユーザー向けにハイコントラスト色に変更する設定も可能だ。伊東氏は「米国のモバイル版Acrobatでは、PDFの可読性を高める『Liquid Mode』（リキッドモード）がすでに実装されています。これはAIのAdobe Senseiによって、見出しや段落、画像などをモバイル端末向けに再構成して表示する機能です。Webブラウザーに搭載されているリーダーモードに近いかもしれません。PDFはフォーマットが決まっていて、ロービジョンのユーザーが読みやすいように拡大すると、横や縦にスクロールしなければ全体を把握できませんが、このLiquid Modeを活用すれば、スマホからでもPDFを見やすく表示できます」と語る。

　また、情報を取得する際にハードルとなるのは、視覚などの身体的な障害ばかりではなく、知能や精神などに生じる障害もある。例えば、数百ページにわたるPDF文書から必要な情報を正しく読み取るのは、知的障害がある人にとっては困難だ。

「米国では、Acrobat ReaderとAcrobatのワークフローに統合された生成AIベースの対話型エンジン『Acrobat AI Assistant』の一般提供がスタートしています。Acrobat AI Assistantはドキュメントの内容に関する要約や質問への回答などを行えるAIツールです。単一のドキュメントだけでなく複数のドキュメントを組み合わせて、要約やインサイトを生成することも可能です。この機能を活用すれば、長い文章を読みこなすことが難しい発達障害がある人や、日本語に不慣れな人でもPDFから情報を読み取ることが可能になるでしょう。Acrobat AI Assistantは現在日本語版を開発していますので、今後は日本のユーザーも活用できる環境を整えていきたいですね」と伊東氏。

　一方で、PDFの構造から情報を読み取るAcrobat AI Assistantを有効に活用するためには、文字検索ができないPDFなどをなくし、アクセシブルな文書にしていく必要があるだろう。多様な人が使えるアクセシブルなPDFを普及していくためには、PDFを扱うユーザー1人ひとりの意識を変えていく必要もありそうだ。

Webサイトで情報を得る際に目にするテキスト。アクセシビリティに配慮されたWebサイトではそれらのサイズを変えたり、文字や背景の色を変更したりできるようにする必要がある。一方で、WCAG 2.0の達成基準では、フォントに関する厳格な規定は存在しない。しかし最近、多くの自治体のWebサイトでアクセシビリティの向上を目的に採用されているフォントがある。それが「UDフォント」だ。

　UDフォントのUDは「ユニバーサルデザイン」の頭文字を取ったものだ。2006年にイワタが日本語UDフォント「イワタUDゴシック」を発表したのを皮切りに、各フォントメーカーがUDフォントをリリースしている。中でもモリサワのUDフォントは教育機関や自治体を中心に幅広く導入され、活用が進んでいる。

　モリサワのUDフォントは「文字の形が分かりやすいこと」「文章が読みやすいこと」「読み間違えにくいこと」という三つのコンセプトから生まれた。例えば、文字の空間を広く取ることでつぶれにくく、見やすくなるため文字の形が分かりやすい。濁点や半濁点を大きくすることで、読み間違いも防げる。分かりやすさを重視する一方で、文字の美しさが損なわれることがないよう、視認性とデザイン性、双方のバランス調整もなされている。

　モリサワのUDフォントの中でも代表的な「UDデジタル教科書体」などを開発したのがコーポーレート・ブランディング企画推進室 ブランドエキスパート（UD担当） 高田裕美氏だ。高田氏はモリサワに吸収合併される以前のタイプバンクに所属していた頃から、遠くからでも見やすいフォントとしてUDフォントの開発を進めていた。当時はゴシック体や明朝体のUD化を進めていたが、開発の過程で慶應義塾大学の中野泰志教授からのフィードバックを受ける中で、学校現場でロービジョンでも読みやすい教科書体の需要があることを知り、UDデジタル教科書体の開発をスタートした。

「通常のゴシック体は書き方の方向や点、払いなどの形状が手書きの文字とは異なっています。学校現場では、学習指導要領に準拠した字形である教科書体が主に用いられます。教科書体は、楷書をベースに子供たちが『とめ・はね・はらい』などわかりやすく整理した書体です。この教科書体の形状を保ちながらも、硬筆やサインペンによる手書き文字を意識し、太さの強弱を抑えることでロービジョン（弱視）やディスレクシア（読み書き障害）の子供たちでも読みやすいよう、UDデジタル教科書体をデザインしました」と高田氏は語る。

　実際にモリサワが中野教授と共に行った、デジタルデバイス（タブレット）での見やすさの検証によると、いくつかの教科書体との比較でUDデジタル教科書体が最も見やすい書体であることが分かったという。また、大阪医科薬科大学 LDセンター 奥村智人先生の、眼疾患はないがディスレクシアなどで読みに困難さを抱える小学生を対象にした検証でも、良い結果が得られた。

　2016年に一般発売が開始されたUDデジタル教科書体は、上記のような読みやすさが評価され、さまざまなシーンで導入が進んでいる。例えば奈良県生駒市は、2019年3月に市内全小中学校でUDフォントを導入し、各学校で作成するプリントなどの学習教材に活用している。

　生駒市は、導入に当たりモリサワと共同で、UDフォントの有効性の実証実験も行った。実験の結果、UDフォントと一般的な教科書体では、UDフォントの方が正確性を保ちながら読めることが実証されたという。文字に対して困難を抱える児童生徒だけでなく、全ての児童生徒にとって学習欲の向上や、学力の向上につなげられる可能性があるのだ。現在、モリサワではUDフォントを50種類以上提供しており、用途やデザインに応じて可読性の高いUDフォントの中から最適なものを選択できる。

　こうしたモリサワのUDフォントは、Webフォントとしても利用できる。Webフォントサービス「TypeSquare」を契約することで、Webサイト上でUDフォントを表示できるようになる。

　モリサワ エンタプライズ営業部エキスパート 高桑 剛氏は「市役所や、行政機関においてTypeSquareを導入し、公式WebサイトでUDフォントを採用いただいている事例は多いです。また一般企業のWebサイトでの導入も増加しています。特に幅広い年齢層のユーザーがアクセスするWebサイトは、UDフォントを採用するケースが増えていますね」と語る。

　一方で、WebアクセシビリティのガイドラインであるWCAG 2.0の基準や、JIS X 8341-3の規格、デジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」では、Webアクセシビリティにおける書体に関するルールは定められていない。定められているのは文字サイズ、文字の色、行間の取り方や文字のコントラストだ。しかし高桑氏は「そこでぜひUDフォントを使ってほしいですね。文字サイズや行間が推奨されているものの、最適なサイズや行間は書体によって異なります。読みやすい書体で最適な行間や文字サイズでWebサイトを設計してもらうことが、多くのユーザーにとって有益となるでしょう」と指摘した。

　障害者差別解消法が改正され、民間事業者も合理的配慮の提供が義務化される中で、Webアクセシビリティへの対応は行政機関や自治体のみならず、広く一般企業のWebサイトにも求められるようになるだろう。そうした場合、UDフォントを採用することで、よりアクセシブルで誰もが利用しやすく、情報が伝わりやすいWebサイトにすることが可能になる。もちろん、企業や製品のブランディングに応じてフォントを選択することが望ましいが、広く情報を伝える必要がある場合においては、UDフォントの使用を選択肢に入れたいところだ。

　高桑氏は「UDデジタル教科書体は、文部科学省の学習指導要領に準拠していることで、今後、デジタル教科書やWeb教材などにも採用が増えると期待しています。Webアクセシビリティにおいても、フォントに関連するルールが定まっていくと、迷わずに選択しやすくなっていくのかもしれません」と展望を語った。