スクリーン・リーダーで学ぶWebアクセシビリティ（2025年6月5日開催）
2025年6月5日、「スクリーン・リーダーで学ぶWebアクセシビリティ」をオンラインで開催しました。
Webアクセシビリティは、全てのユーザーが快適に情報へアクセスできるようにするための重要な取り組みです。本セミナーでは、視覚障害のある方のWeb利用に焦点をあて、全盲のエンジニアがスクリーン・リーダーの使用方法やWeb閲覧の様子を実演しました。音声によるWeb体験を通じて、アクセシビリティの必要性と重要性について解説しました。
澤田と大塚の講演の様子
まずは、スクリーン・リーダーの基本的な機能やスマートフォンでの操作方法、複数のスクリーン・リーダーの違いを比較してご紹介。実際の使用デモを通じて、代替テキストや見出し要素など、Webアクセシビリティにおける構造的配慮の重要性を説明しました。次に、記号による装飾や不適切なスペースの挿入がスクリーン・リーダーの読み上げに与える影響についても解説しました。視覚障害者にとって、Webアクセシビリティは単なる利便性ではなく、日常生活を支えるインフラであることを強調し、当社のサービス紹介や質疑応答を交えてご説明いたしました。
事業部長 澤田からのコメント
今回はセミナー動画を事前に収録し、当日は質疑応答だけ生出演という形でした。収録はオフラインだったのですが、ここ数年すっかりオンライン収録に慣れていましたので、オフラインでの収録は新鮮かつ緊張感のあるものでした。そのため多少聞き苦しい場面もあったことと思いますが、最後まで視聴いただきましてありがとうございました。回答いただいたアンケートからは、おおむねお伝えしたかったことが伝わった様子が伺え、ホッと胸をなでおろしています。
ミツエーリンクスでは今回のようなセミナーだけではなく、スクリーン・リーダー検証などのサービスを通じて、視覚障害当事者によるスクリーン・リーダーの利用状況を多くの方に知っていただきたいと考えています。
今回のセミナーで興味を持たれた方がいらっしゃいましたら是非お声がけください。よろしくお願いいたします。
アクセシビリティ・エンジニア 大塚からのコメント
この度は、セミナーへご参加いただきありがとうございました。当日の質疑応答では、多くの質問をいただき、大変うれしく思っております。また、「スクリーン・リーダーのご利用状況を拝見して、サイトの作りを改善したいという気持ちが強くなった」というご感想をいただき、実際のデモンストレーションの有用性を改めて実感いたしました。本セミナーが、アクセシビリティの向上を考える一つの契機となっておりましたら幸いです。
また、アンケートを通じてご質問をいただきましたので回答いたします。
アクセシビリティ対応をしていますが、それとは別にファシリティ等の支援ツールが気になっています。このようなツールに対してのお考えを教えてください。またほかに何か優先する事項はありますか？
私自身は、Webページの読み上げにスクリーン・リーダーのみを使用しており、一般に「アクセシビリティオーバーレイ」と呼ばれる機能は利用していません。これらのオーバーレイは、自動的に代替テキストを追加したり、コントラストを調整したりと、一見便利に見えるかもしれません。しかし、スクリーン・リーダーの設定と干渉し、うまく動作しなくなる場合があるなど、実際には問題が生じるケースもあるのが実情です。まずは、現在進められている既存Webページの改善を、継続されることをおすすめいたします。
また、アクセシビリティオーバーレイについての当社のコラム記事についてもよろしければご覧ください。
Webアクセシビリティ対応のサイトチェックをする際、キーボード操作のタブ移動とスクリーン・リーダーの移動は、同じような動きをすると考えても良いでしょうか。 スクリーン・リーダーで特に考慮することがあれば知りたいです。
スクリーン・リーダーを起動していても、タブキーを押すとリンクやフォームコントロールなど、フォーカス可能な要素に移動します。これはスクリーン・リーダーを使っていない場合と同様です。ただし、スクリーン・リーダーを使ってWebサイトを閲覧する際には、矢印キーなどを使って、タブキーではフォーカスが当たらないテキスト部分も含めて読み進めることが多くあります。このため、アクセシビリティチェックの際には、タブキーで移動できない要素も読み上げの対象となることを考慮し、読み上げ順や文書構造にも注意を払っていただくことが重要です。
PDFをスクリーン・リーダーで閲覧する際に、不便に感じられる点やご要望などあれば教えてください。また、PDF閲覧において最も便利だと感じるツールはAdobeでしょうか。他にも使いやすいと感じるツールがあれば教えてください。 ※アクセシブルなPDFであることを前提としています。
アクセシブルなPDFファイルであることを前提とすると、閲覧時に大きな問題が発生することはほとんどないと感じています。一般に「PDFはスクリーン・リーダーで読みづらい」と言われる背景には、アクセシブルでないPDFが依然として多く存在していることがあると考えています。閲覧時のツールについて、以前はAdobe Acrobat Readerを利用することが多かったのですが、最近ではブラウザであっても遜色なく読み上げる印象があり、ブラウザで確認することが多くなっています。
下記のように空白行が多い場合、どのように読み上げられるのでしょうか。
例
123
123
まず、ご質問に記載いただいたテキストをNVDAで矢印キー操作を使って読み上げると、「123」「ブランク」「ブランク」「123」と、空行も「ブランク」として認識されて読み上げられます。Webページ上での空行については、空行の実装方法によって読み上げ方が異なります。<br>要素を使用した場合、「ブランク」と読み上げ、空行があることが読み上げられます。一方、marginやpaddingなどのCSSで見た目上の余白を作る場合、その余白を無視し、空行があることは読み上げられません。レイアウト調整のために空行を追加する場合は、CSSを利用することをお勧めします。
スクリーン・リーダーの実演において、「・」が「中黒点」と読み上げられていたのが印象的でした。このように読み上げられることを考えると、アクセシビリティの観点からは「・」の使用は控えた方がよいのでしょうか？
項目の区切りなど、一般的な用法であれば「・」を使用していただいて問題ないと考えています。スクリーン・リーダーの種類によって読み上げ方に違いは見られますが、多くのスクリーン・リーダー利用者は、記号の種類や用法を把握しており、実際の文脈に応じて理解されています。一方で、装飾目的で記号を過剰に使用した場合、スクリーン・リーダーがそれらを繰り返し読み上げるため、必要な情報が埋もれたり、閲覧の妨げになったりすることがあります。
また、「・」をリストのビュレット（先頭の印）として使用するケースも見られますが、リスト項目であることを正しく伝えるためには、<li>要素の使用をおすすめします。<li>要素を用いることで、リストであることや項目数などをスクリーン・リーダーが適切に読み上げるようになります。そのため、「・」の使用そのものを避ける必要はありませんが、視覚的な装飾としての多用は控えていただくのが望ましいと考えます。
アンケートにお寄せいただいたコメント(一部)
- 実際の手元をみながら内容を確認できあらためてアクセシビリティの重要性を感じました。テキストはだいぶ気を付けておりますが、画像につけるテキストについてもう少し深く知りたいと感じ、取り組んでみたいことが増えました。
- セミナーの構成は非常にわかりやすく、デモを通じてスクリーン・リーダー利用者のリアルな操作環境を知ることができ、大変貴重な機会になりました。