Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。accessibility下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。スタンダードに従う10.WebサイトのアクセシビリティをチェックWebアクセシビリティ、わたしの実践方法Webアクセシビリティとは何ですか?W3Cによると、Webアクセシビリティとはすべての人がWebを認識し、理解し、操作し、対話し、貢献することができることを意味します。神経学的障害を含む、Webへのアクセスに影響を及ぼすすべての条件が含まれます。このトピックについては、Web上でたくさんのコンテンツを見つけることができるでしょう。Initiative(WAI)を詳しく見てください。これらを念頭に置いて、ここにわたし達のガイドラインがあります01.カラーに依存しない(~45分)カラーはWeb上で感情を表現し、メッセージを伝えるためによく使う強力なツールです。ユーザーに意味や情報を伝えるために、カラーに依存すべきではありません。?下記の例を見てみてください。色盲は最も一般的な視力不足の1つです。世界の人口のおよそ4.5%に影響を与えます。情報を伝える際の唯一の手段として、カラーを使って重要な情報を伝えると、4.5%の人が取り残されます。カラーはエラーメッセージや確認メッセージを補完することができますが、唯一のツールではありません。すべてのユーザーに情報を確実に届くように、フォームに記入された情報が正しいかどうかを示すラベルやアイコンを追加する必要があります。左は正常な人の見え方、右は色盲の人の見え方このグリーンとレッドのカラーが起こす問題の非常に興味深い解決策が、caniuse.comで採用されています。サポート・非サポートを表示するために代替カラーパレットが提供されています。colors」をクリック色盲やコントラストの確認は、デザイン中に実施するのが理想的です。あなたとあなたのデザインチームが正しいツールを持っていることを確認してください。Sketchを使用しているのであれば、Starkを推奨します。02.ズームを無効にしない(~5分)レスポンシブデザインで、わたし達はいくつか間違いを犯していたかもしれません。その中の1つは、モバイルデバイスでWebページを拡大する機能を無効にする「maximum-scale=1.0」です。content="width=device-width,initial-scale=1,maximum-scale=1">乱視はヨーロッパとアジアの成人層30〜60%に影響を及ぼし、ぼやけた視力はすべての国籍の年齢層に影響を及ぼします(私のママもそうです)。ズームイン機能はWCAGガイドラインではなく、これらの人々に役立つためのツールです。レスポンシブ対応のサイトを作成する際に、私のママのようなぼやけた視力をもつユーザーを考慮するのを忘れないようにしてください。ユーザーはスマホで自由にズーム操作ができるのに加えて、レイアウトがデスクトップブラウザで最大200%の拡大して見えることを忘れないでください03.alt属性のあなたが知らないかもしれない事実(~45分)あなたがどれだけ長くWebサイトを制作していたとしても、alt属性に関する有名で、しかし不思議なこれらのヒントを知ると驚くかもしれません。alt属性はすべてのimgタグに必須ですが、空のalt属性も有効です。画像が装飾的であるか、内容を理解する必要がない場合は、「alt=""」を使用できます。of」で開始する必要があることをユーザーに伝えます。画像の機能はその意味と同じくらい重要です。ロゴがWebサイトのトップページにリンクしている場合、代替テキストは「ロゴ」ではなく、リンク先を現す「トップページ」にすべきです。代替テキストはアクセシビリティのためだけではありません。回線が遅いユーザーは、ブラウザの操作を高速化するために画像を無効にすることがあります。alt属性を書く時は、これらのユーザが目にすることも覚えておいてくださいしかしあなたのWebサイトですべての画像がimgタグであるとは限りません。1つか2つはSVGかもしれません、またはSVGアイコンを全体的に使用している可能性もあります。Graphicsの仕様では、それが定義されています。SVGを説明するために、<title>タグと<desc>タグが用意されています。/></symbol>04.動画にサブタイトルやキャプションを加える(4+時間)これはWCAGの最も難しいガイドラインの1つで、それは技術的な難しさではなく、時間がかかるためです。これを行うにはいくつかの方法があります。YouTubeを例にしましょう。動画をアップロードすると、クローズドキャプションを有効にすることができます。これらは自動的に生成され、言語、背景ノイズ、話者のアクセントによっては不正確になることがあります。それにもかかわらず、これらは実装が非常に簡単で、英語を話しているほとんどの動画でうまく機能します。100%完璧なキャプションを探しているなら、YouTubeに任せることは難しいかもしれません。自分自身でキャプションを作成するか、第三者を雇う必要があります。YouTubeは最も一般的なサブタイトルのフォーマット(.srt、.sub、.sbv)を採用し、プラットフォーム自体にサブタイトルを書き込むことができます。これは、サブタイトルのソフトウェアを所有していない場合や、コミュニティに管理者のアクセス権を与えずにコンテンツの翻訳を助けるよう依頼してください。ホスティングのプラットフォームとしてYouTubeを使用したくないかもしれません。HTML5ビデオをあなたのサーバーで使うとしましょう。HTML5には<track>タグが含まれており、このタグを使用するとWebVTT形式で好きなだけキャプションやサブタイトルを簡単に追加できます。あの頃は暗い時代でした。セマンティクスは一般的な考えにもかかわらず、HTML5と共に生まれたものではありません。セマンティクスは世界最古のWebページから存在し、それ以降常に改良されてきました。HTML5では、新しいセマンティクタグが日常的な使用のために導入されています。世界最古のWebページセマンティクスは、SEOのためだけのものではありません。<p>や<span>だけでなく、<h1>などを使用して、要素の意味を意図的に定義し、階層を作り出し、ページ情報のツリー構造を構築します。スクリーンリーダーはこのことを知りません。実際、セマンティクスは最も有用な武器の1つです。大きな力は大きな責任を伴うので、h1から新しいmainタグまで、各要素に適切なセマンティクタグを使用するようにしてください。06.適切なマークアップを使用する(~30分)前述のフォローアップとして、何人かの友人と物議をかもしていることについて触れたいと思います。8601標準を使用して日付と時間を表記する多くのフォーマット、タイムゾーン、期間が表示されます。datetimeは<time>の内容を表すオプションの属性です。いくつか例を見てみましょう。7th</time></p>delとinsWebは絶えず変化しており、その変化が気づかれるとは限りません。insとdelタグはdatetime属性と組み合わせて使用​​して、編集した箇所を明示することができます。ins要素は、追加されたコンテンツを意味します。datetime="2017-08-02">Icecream</ins></li><li>Candy</li><li>Pasta</li></ul>del要素は、削除されたコンテンツを意味します。room</li></ul>buttonと<a>タグ<a>タグは、ファイルを別のファイルにリンクする、現在のタブまたは新しいタブにリンクを開くことを意図しています。ハンバーガーメニューや画像ギャラリーなどの操作をトリガーしたいときは理想的ではありません。button要素はこのような状況で適切な選択肢で、通常はJavaScriptで実現できます。type="button"とよく混同されますが、違いは前者がより多くのコンテンツ(テキスト、画像+テキスト、画像のみ)を取り入れることが可能です。<button>タグを使用する際には、次の2点を考慮する必要があります。1つ目は、ボタンの内容が明示的ではない場合(例えば、閉じるボタンの「X」)、機能を説明するためにaria-label属性を追加する必要があります。aria-label="Close">X</button>2つ目は、href属性を追加すると(検索コンポーネントやライトボックスギャラリー)意味がある場合は、aタグを使用してJavaScriptでリンクの動作を上書きすることもできます。JavaScriptが有効になっていない場合、href属性を使用したこれらのギャラリーは正常に機能しなくなります。07.role属性は必要に応じて使用する(~1時間)<a>タグを使用したボタンで、リンクがアクションを引き起こすことをスクリーンリーダーのユーザーに伝えるために、role属性を追加する必要があります。注意点があります!JavaScriptではクリックだけでなく、ユーザーがスペースバーを押したときにも機能を呼び出せるようにする必要があります。これは、ボタンに定義された動作がリンクに使用される動作と異なり、ユーザーがどちらのコマンドでもアクションをトリガーできる必要があるからです。something}}この実装の詳細はMDNをご覧ください。上記のようにルールを破らなければ、roleは通常必要ではありません。HTMLのセマンティック要素には、既定の役割が既に適用されています。<nav>タグはナビゲーション、<a>タグはリンクなどです。これらのデフォルト値を変更する場合にのみ、role属性が必要になります。08.非表示の要素(~1時間)HTMLとCSSで要素を隠すにはいくつかの方法があります。下記は、あらゆる状況に対して最良の選択肢を見つけるのに役立ちます。hidden;要素を隠しますが、元のスペースは確保されています(不透明度0のような感じです)。スクリーンリーダーは読みません。すべてのブラウザにサポートされています。none;要素を隠し、元のスペースも失われています。そのため、次の要素が代わりにその場所に移動します。スクリーンリーダーは読みません。すべてのブラウザにサポートされています。none;」と同じです。スクリーンリーダーは読みません。IE11+でサポートされています。"true"コンテンツはブラウザに表示されますが、支援技術を介してユーザーに伝えられません。スクリーンリーダーは読みません。IE11+でサポートされています。class要素を隠し、ワークフローから削除します。スクリーンリーダーは読み上げます。すべてのブラウザにサポートされています。ユーザーには要素を見えないように非表示にしたいけど、スクリーンリーダーでは読ませたい場合は、最後の方法が最適です。フォームのラベルやコンテンツへのスキップリンクなどに非常に適しています。.visuallyHiddenはスニペットに入れるべきCSSコードの1つで、すべてのプロジェクトで有益だと思います。名前を変更して利用しても構いません。.pottersCloakなどでもよいでしょう。スタンダードに従う(毎週~30分)Webアクセシビリティは難しく、スタンダードとガイドラインが役立ちます。ここで取り上げた話題はすべて含まれています。none;とhidden属性の違いは何か?最初は戸惑うかもしれません、しかしW3C標準とWCAGガイドラインは信頼できるだけでなく、勉強にも役立ちます。そこにはきっとあなたが知らなかったコードや知識が存在することを保証します。guidelines10.Webサイトのアクセシビリティをチェック(~3時間)これらの知識をすべて適用したら、テストする時間です。Webサイトのアクセシビリティをチェックする最良のツールを紹介します。ChromeVoxMacとWindowsのユーザーが利用できるChrome拡張機能。Webサイトのテストに使用できるスクリーンリーダーです。ChromeこれもChromeの拡張機能で、デベロッパーツールにアクセシビリティ監査オプションが追加されます。Filterオンラインツールで、さまざまなタイプの色盲についてWebサイトをテストできます。ValidatorW3Cの公式ツールで、あなたのHTMLがWebアクセシビリティのルールに従っているかどうかをチェックできます。A/AAチェックポイントに対してテストし、Webサイトの運営方法の概要を提供します。WAVEWebAIMが作成したWebアクセシビリティの評価ツールです。Webアクセシビリティ、わたしの実践方法Webサイトのアクセシビリティは必ずしも実装するのが容易ではありませんが、日々のワークフローの一部にすると(最後のチェックリストではなく)、実装とテストは時間の経過とともに容易になります。分からない時は他の制作者に質問したり、調べることを恐れないでください。