Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ

Post on:2018年1月12日

Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。

Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。

サイトのキャプチャ

10 guidelines to improve your web accessibility

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Webアクセシビリティとは何ですか？

W3Cによると、Webアクセシビリティとはすべての人がWebを認識し、理解し、操作し、対話し、貢献することができることを意味します。Webのアクセシビリティには、視覚、聴覚、身体、言語、認知、および神経学的障害を含む、Webへのアクセスに影響を及ぼすすべての条件が含まれます。

このトピックについては、Web上でたくさんのコンテンツを見つけることができるでしょう。もし興味のある場合は、Web Accessibility Initiative（WAI）を詳しく見てください。

これらを念頭に置いて、ここにわたし達のガイドラインがあります

01.カラーに依存しない（～45分）

カラーはWeb上で感情を表現し、メッセージを伝えるためによく使う強力なツールです。しかし、ユーザーに意味や情報を伝えるために、カラーに依存すべきではありません。

なぜでしょうか？

下記の例を見てみてください。
グリーンは「正しい」を意味し、レッドは「間違い」を意味することは広く知られていますが、これを唯一の手段として使用するとどうなるでしょう？

右は色盲の人の見え方

左は正常な人の見え方、右は色盲の人の見え方
色盲は最も一般的な視力不足の1つです。世界の人口のおよそ4.5%に影響を与えます。

情報を伝える際の唯一の手段として、カラーを使って重要な情報を伝えると、4.5%の人が取り残されます。

カラーはエラーメッセージや確認メッセージを補完することができますが、唯一のツールではありません。すべてのユーザーに情報を確実に届くように、フォームに記入された情報が正しいかどうかを示すラベルやアイコンを追加する必要があります。

サイトのキャプチャ

左は正常な人の見え方、右は色盲の人の見え方

このグリーンとレッドのカラーが起こす問題の非常に興味深い解決策が、caniuse.comで採用されています。サポート・非サポートを表示するために代替カラーパレットが提供されています。

caniuse.comの代替カラーパレット

最下部の「Enable accessible colors」をクリック

色盲やコントラストの確認は、デザイン中に実施するのが理想的です。あなたとあなたのデザインチームが正しいツールを持っていることを確認してください。Sketchを使用しているのであれば、Starkを推奨します。

02.ズームを無効にしない（～5分）

レスポンシブデザインで、わたし達はいくつか間違いを犯していたかもしれません。

その中の1つは、モバイルデバイスでWebページを拡大する機能を無効にする「maximum-scale=1.0」です。

乱視はヨーロッパとアジアの成人層30〜60％に影響を及ぼし、ぼやけた視力はすべての国籍の年齢層に影響を及ぼします（私のママもそうです）。

ズームイン機能はWCAGガイドラインではなく、これらの人々に役立つためのツールです。レスポンシブ対応のサイトを作成する際に、私のママのようなぼやけた視力をもつユーザーを考慮するのを忘れないようにしてください。

ユーザーはスマホで自由にズーム操作ができるのに加えて、レイアウトがデスクトップブラウザで最大200％の拡大して見えることを忘れないでください

03.alt属性のあなたが知らないかもしれない事実（～45分）

あなたがどれだけ長くWebサイトを制作していたとしても、alt属性に関する有名で、しかし不思議なこれらのヒントを知ると驚くかもしれません。

  1. alt属性はすべてのimgタグに必須ですが、空のalt属性も有効です。画像が装飾的であるか、内容を理解する必要がない場合は、「alt=""」を使用できます。
  2. スクリーンリーダーは<img>タグが画像であるため、冗長にする必要はなく、altを「Picture of」で開始する必要があることをユーザーに伝えます。
  3. 画像の機能はその意味と同じくらい重要です。ロゴがWebサイトのトップページにリンクしている場合、代替テキストは「ロゴ」ではなく、リンク先を現す「トップページ」にすべきです。
  4. 代替テキストはアクセシビリティのためだけではありません。回線が遅いユーザーは、ブラウザの操作を高速化するために画像を無効にすることがあります。 alt属性を書く時は、これらのユーザが目にすることも覚えておいてください

しかしあなたのWebサイトですべての画像がimgタグであるとは限りません。 1つか2つはSVGかもしれません、またはSVGアイコンを全体的に使用している可能性もあります。

SVGに誰もがアクセスできるようにするにはどうすればよいでしょうか？ 幸いなことに、Scalable Vector Graphicsの仕様では、それが定義されています。SVGを説明するために、<title>タグと<desc>タグが用意されています。

04.動画にサブタイトルやキャプションを加える（4+時間）

これはWCAGの最も難しいガイドラインの1つで、それは技術的な難しさではなく、時間がかかるためです。これを行うにはいくつかの方法があります。

  1. 例えば、YouTubeを例にしましょう。
    動画をアップロードすると、クローズドキャプションを有効にすることができます。これらは自動的に生成され、言語、背景ノイズ、話者のアクセントによっては不正確になることがあります。それにもかかわらず、これらは実装が非常に簡単で、英語を話しているほとんどの動画でうまく機能します。
  2. 100%完璧なキャプションを探しているなら、YouTubeに任せることは難しいかもしれません。自分自身でキャプションを作成するか、第三者を雇う必要があります。YouTubeは最も一般的なサブタイトルのフォーマット（.srt、.sub、.sbv）を採用し、プラットフォーム自体にサブタイトルを書き込むことができます。これは、サブタイトルのソフトウェアを所有していない場合や、コミュニティに管理者のアクセス権を与えずにコンテンツの翻訳を助けるよう依頼してください。
  3. しかし、ホスティングのプラットフォームとしてYouTubeを使用したくないかもしれません。例えば、HTML5ビデオをあなたのサーバーで使うとしましょう。HTML5には<track>タグが含まれており、このタグを使用するとWebVTT形式で好きなだけキャプションやサブタイトルを簡単に追加できます。
サイトのキャプチャ

05.セマンティクス=アクセシビリティ（～45分）

<font>タグを覚えていますか？ あの頃は暗い時代でした。

セマンティクスは一般的な考えにもかかわらず、HTML5と共に生まれたものではありません。セマンティクスは世界最古のWebページから存在し、それ以降常に改良されてきました。 HTML5では、新しいセマンティクタグが日常的な使用のために導入されています。

サイトのキャプチャ

世界最古のWebページ

セマンティクスは、SEOのためだけのものではありません。

必ずしもではありません。<p>や<span>だけでなく、<h1>などを使用して、要素の意味を意図的に定義し、階層を作り出し、ページ情報のツリー構造を構築します。

スクリーンリーダーはこのことを知りません。実際、セマンティクスは最も有用な武器の1つです。

大きな力は大きな責任を伴うので、h1から新しいmainタグまで、各要素に適切なセマンティクタグを使用するようにしてください。

06.適切なマークアップを使用する（～30分）

前述のフォローアップとして、何人かの友人と物議をかもしていることについて触れたいと思います。

timeとdatetime

time要素はISO 8601標準を使用して日付と時間を表記する多くのフォーマット、タイムゾーン、期間が表示されます。

datetimeは<time>の内容を表すオプションの属性です。いくつか例を見てみましょう。

delとins

Webは絶えず変化しており、その変化が気づかれるとは限りません。insとdelタグはdatetime属性と組み合わせて使用​​して、編集した箇所を明示することができます。

ins要素は、追加されたコンテンツを意味します。

del要素は、削除されたコンテンツを意味します。

buttonと<a>タグ

<a>タグは、ファイルを別のファイルにリンクする、現在のタブまたは新しいタブにリンクを開くことを意図しています。しかし、ハンバーガーメニューや画像ギャラリーなどの操作をトリガーしたいときは理想的ではありません。button要素はこのような状況で適切な選択肢で、通常はJavaScriptで実現できます。

また、<button>タグは、input type="button"とよく混同されますが、違いは前者がより多くのコンテンツ（テキスト、画像+テキスト、画像のみ）を取り入れることが可能です。

<button>タグを使用する際には、次の2点を考慮する必要があります。

1つ目は、ボタンの内容が明示的ではない場合（例えば、閉じるボタンの「X」）、機能を説明するためにaria-label属性を追加する必要があります。

2つ目は、href属性を追加すると（検索コンポーネントやライトボックスギャラリー）意味がある場合は、aタグを使用してJavaScriptでリンクの動作を上書きすることもできます。JavaScriptが有効になっていない場合、href属性を使用したこれらのギャラリーは正常に機能しなくなります。

07.role属性は必要に応じて使用する（～1時間）

<a>タグを使用したボタンで、リンクがアクションを引き起こすことをスクリーンリーダーのユーザーに伝えるために、role属性を追加する必要があります。

注意点があります！

JavaScriptではクリックだけでなく、ユーザーがスペースバーを押したときにも機能を呼び出せるようにする必要があります。これは、ボタンに定義された動作がリンクに使用される動作と異なり、ユーザーがどちらのコマンドでもアクションをトリガーできる必要があるからです。

この実装の詳細はMDNをご覧ください。

上記のようにルールを破らなければ、roleは通常必要ではありません。HTMLのセマンティック要素には、既定の役割が既に適用されています。<nav>タグはナビゲーション、<a>タグはリンクなどです。つまり、これらのデフォルト値を変更する場合にのみ、role属性が必要になります。

08.非表示の要素（～1時間）

HTMLとCSSで要素を隠すにはいくつかの方法があります。下記は、あらゆる状況に対して最良の選択肢を見つけるのに役立ちます。

  • CSS: visibility: hidden;
    要素を隠しますが、元のスペースは確保されています（不透明度0のような感じです）。
    スクリーンリーダーは読みません。
    すべてのブラウザにサポートされています。
  • CSS: display: none;
    要素を隠し、元のスペースも失われています。そのため、次の要素が代わりにその場所に移動します。
    スクリーンリーダーは読みません。
    すべてのブラウザにサポートされています。
  • HTML5: hidden attribute
    「display: none;」と同じです。
    スクリーンリーダーは読みません。
    IE11+でサポートされています。
  • Aria-hidden = "true"
    コンテンツはブラウザに表示されますが、支援技術を介してユーザーに伝えられません。
    スクリーンリーダーは読みません。
    IE11+でサポートされています。
  • CSS: .visuallyHidden class
    要素を隠し、ワークフローから削除します。
    スクリーンリーダーは読み上げます。
    すべてのブラウザにサポートされています。

ユーザーには要素を見えないように非表示にしたいけど、スクリーンリーダーでは読ませたい場合は、最後の方法が最適です。

特に、フォームのラベルやコンテンツへのスキップリンクなどに非常に適しています。.visuallyHiddenはスニペットに入れるべきCSSコードの1つで、すべてのプロジェクトで有益だと思います。もちろん名前を変更して利用しても構いません。.pottersCloakなどでもよいでしょう。

09.Webアクセシビリティ スタンダードに従う（毎週～30分）

Webアクセシビリティは難しく、スタンダードとガイドラインが役立ちます。

ここで取り上げた話題はすべて含まれています。<button>はどのように機能するか？ いつそれを使うべきか？ display: none;とhidden属性の違いは何か？

最初は戸惑うかもしれません、しかしW3C標準とWCAGガイドラインは信頼できるだけでなく、勉強にも役立ちます。そこにはきっとあなたが知らなかったコードや知識が存在することを保証します。

10.Webサイトのアクセシビリティをチェック（～3時間）

これらの知識をすべて適用したら、テストする時間です。
Webサイトのアクセシビリティをチェックする最良のツールを紹介します。

  • ChromeVox
    MacとWindowsのユーザーが利用できるChrome拡張機能。Webサイトのテストに使用できるスクリーンリーダーです。
  • Accessibility Developer Tools for Chrome
    これもChromeの拡張機能で、デベロッパーツールにアクセシビリティ監査オプションが追加されます。
  • Color Filter
    オンラインツールで、さまざまなタイプの色盲についてWebサイトをテストできます。
  • W3C Validator
    W3Cの公式ツールで、あなたのHTMLがWebアクセシビリティのルールに従っているかどうかをチェックできます。
  • A11Y Compliance Platform
    WCAG A/AAチェックポイントに対してテストし、Webサイトの運営方法の概要を提供します。
  • WAVE
    WebAIMが作成したWebアクセシビリティの評価ツールです。

Webアクセシビリティ、わたしの実践方法

Webサイトのアクセシビリティは必ずしも実装するのが容易ではありませんが、日々のワークフローの一部にすると（最後のチェックリストではなく）、実装とテストは時間の経過とともに容易になります。

分からない時は他の制作者に質問したり、調べることを恐れないでください。私が利用する情報源は、The A11y Project, A11y Wins, HTML5 Doctor, MDNです。

sponsors

top of page

©2024 coliss