WebAIM のインフォグラフィック「Web Accessibility for Designers」
Web アクセシビリティ向上のために設立された米国の非営利団体「WebAIM (Web Accessibility in Mind)」が、このほど「Web Accessibility for Designers」というインフォグラフィックを公開しました。
アクセシビリティに関するインフォグラフィックは、とても珍しいので (インフォググラフィックという表現形式が視覚を前提としたものなので、スクリーンリーダーユーザーに配慮することが多い Web アクセシビリティの分野では、敬遠されがちなのかもしれませんね...)、興味深く拝見しました。
その名のとおり、デザイナー向けに、Web アクセシビリティを維持するにはどんなことに配慮すればよいかを、グラフィカルにまとめたものになっています。Web 制作の最先端現場にいるデザイナーに対して、わかりやすくアクセシビリティを啓発することを狙ったものと言えるでしょう。
内容的には、ごく基本的な配慮事項を扱ったものになっています。本格的にアクセシビリティの精度を高めようとすると、WCAG (Web Content Accessibility Guidelines) をきちんと理解し、実践する必要がありますが、このインフォグラフィックはそこまでの細かさでは描かれていません (それよりはむしろ、「とりわけ大事な配慮事項をひと目で見渡せること」に重きを置いています)。
WebAIMは、アクセシビリティ検証ツール「WAVE」(私も愛用しています) などを見てもわかるように、アクセシビリティの「実質的な」改善を何よりも大切にしています (WCAG やリハビリテーション法508条で規定されているから、とか、アカデミックな研究ではこう言われているから、といったアプローチではなく)。このインフォグラフィックにも、「難しいことはさておき、少なくともこれを気をつければ、現状よりはずっとアクセシビリティが改善されて、多くの人が助かりますよ」という姿勢が見えますし、しかもそれを、受け手の言語であるグラフィックデザインを使って「伝わりやすく」表現していることに、好感を覚えます。
このインフォグラフィック、どのサイトにも貼り付けることが可能で、ソースも公開されています。せっかくなのでご紹介がてら、下記に掲載させていただきます。
- Plan Heading Structure Early (見出し構造を早い段階で計画する)
- Ensure all content and design fits into a logical heading structure.
(すべてのコンテンツやデザインを、論理的な見出し構造にフィットさせること。) - Consider Reading Order (音声読み上げ順序に配慮する)
- The reading order should be the same as the visual order.
(音声読み上げの順序は、見た目の順番と同じにするべきである。) - Provide Good Contrast (十分なコントラストを提供する)
- Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.
(特に薄いグレーやオレンジ、黄色には気をつける。コントラストの度合いを、検証ツールでチェックすること。) - Use True Text Whenever Possible (可能なかぎりテキストを用いる)
- True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.
(画像文字ではなくテキスト文字を使うことで、拡大表示ができたり、ページの読み込みを速くしたり、点字などへの変換が容易にできたりする。視覚的なスタイルは CSS を使って整えよう。) - Watch the Use of CAPS (大文字の濫用に注意する)
- All caps can be difficult to read and can be read incorrectly by screen readers.
(英文をすべてを大文字で表現すると読みにくくなり、またスクリーンリーダーで正しく読み上げられないことがある。) - Use Adequate Font Size (適切なフォントサイズを用いる)
- Font size can vary based on the font chosen, but 10 point is usually a minimum.
(選択したフォントによって異なるが、10ポイント以上のフォントサイズにしよう。) - Remember Line Length (行の長さにも配慮する)
- Don't make it too long or too short.
(行の長さは、おまり長すぎないように、また短かすぎないようにすること。) - Make Sure Links are Recognizable (リンクは識別しやすくする)
- Differentiate links in the body of the page with underlines or something other than color alone.
(色だけでなく、下線を引くなどして、リンク箇所は他の部分と明確に区別できるようにすること。) - Design Link Focus Indicators (リンクへのフォーカスをデザインする)
- Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.
(キーボード操作でブラウズするユーザーが、視覚的にフォーカス位置を識別できるようにすること。その際、下線の形状を変えるなど、色以外の要素を用いること。) - Design a "Skip to Main Content" Link (「メインのコンテンツにスキップする」リンクを設置する)
- A link for keyboard users to skip navigation should be at the top of the page. It can be hidden, but should be visible when it receives keyboard focus.
(キーボード操作でブラウズするユーザーのために、ナビゲーションをスキップするリンクをページの先頭に置く。普段は不可視でもよいが、キーボード操作でフォーカスが当たったときには見えるようにすること。) - Ensure Link Text Makes Sense on Its Own (リンクラベルは、それだけで意味が理解できるものにする)
- Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing.
(「ここをクリック」のようなリンクラベルは避けること。また、「もっと読む」「続きを読む」といった、それだけでは意味が不明確なリンクラベルも混乱の元となる。) - Use Animation, Video, and Audio Carefully (アニメーションや動画、音声の使用は慎重に)
- If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.
(再生/一時停止ボタンを設けること。閃光は発作を引き起こす恐れがあるので避けること。) - Don't Rely on Color Alone (色だけに依存しない)
- Because users often can't distinguish or may override page colors, color cannot be the only way information is conveyed.
(ユーザーは色を識別できなかったり、または色表示を無効にしていることがあるので、色の違いを情報伝達の唯一の手段として使ってはいけない。) - Design Accessible Form Controls (アクセシブルなフォームにする)
- Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.
(フォームの各要素には、明快なラベルや説明を付けること。入力不備などのエラー表示や、そこからの修正させる仕組みには、よく注意を払うこと。)