Webアクセシビリティの参考資料まとめ
Figma で作成するウェブサイトやアプリのワイヤーフレームに、アクセシビリティに関する注釈をつけることで、アクセシブルなプロダクト開発を進めることができる。そこで、Figma Community にて、アクセシビリティに関するアノテーションを付けるためのキット「A11y Annotations」を公開した。フレーム内にある各カテゴリーのアノテーションをコピー＆ペーストして使用することができる。Figma には他にも多くのアクセシビリティに関するアノテーションキットが存在するので、自身のプロジェクトに合わせて選択することができる。
デザインにおけるアクセシビリティに関する Tips をまとめました。 読みやすい文字サイズやフォント、行間、文字数の調整が必要です。 アイコンを使う際は、ラベルをつけて一般的なアイコンを使用しましょう。 また、ボタンやリンクのテキストやアイコンは一貫性を持たせ、タップエリアを確保することが大切です。
記事の音声読み上げ機能が理解できないことにショックを受け、note ではアクセシビリティ研修を企画している。研修では、画像の alt テキスト設定、リンクの工夫、タイトル・見出し・映像・PDF の配慮が重要だ。アクセシビリティは障害者や高齢者だけでなく、すべての人のためのものである。
WP ZoomUP #14 で伊原力也氏が発表した『「誰もが使える」デザインを生み出すために』の配信動画。アクセシビリティ対応で何をやるかは多く語られているが、いつやるかはあまり語られていないことを引き合いに、WCAG2.1 にある 78 個の達成基準のうち 56 項目についてはコーディングに入る前に対応が可能だと言う。サイトマップ、コンテンツ、ワイヤーフレーム、フォーム、ビジュアルデザイン、プロトタイピングのそれぞれのプロセスでアクセシビリティを向上させる勘所、達成基準に含まれるがデザインプロセスの中で失われやすい項目、コーディングプロセスに入ってからも気をつけなければならないことが紹介され、WCAG のガイドラインをさらに短く要約した文章も述べられている。
AI 問診というプロダクトを設計するうえでのユーザーの多様性と、そこへの対応方法について、3 つのケースをもとに述べている。
HTML は「画面を実装するためのフレームワーク」と「デザインを検証するためのフレームワーク」の 2 つの見方が出来るのではないかという話が述べられている。前者は適切な要素選択によってネイティブの機能を提供できること、後者は HTML で見出しのアウトラインを思考することでデザインカンプをより理解できることを理由にしている。この 2 つの側面を意識してウェブサイトを構築すれば結果的にアクセシブルになると言う。
高齢者が忌避する設計がわかりやすくまとめられたスライド。高齢者に優しい設計は多くの人にとってもアクセシブルになるという。
書籍『デザイニング Web アクセシビリティ』の 4 章と 7 章の内容がウェブページで公開されている。4 章は「ナビゲーション設計」、7 章は「コンテンツ設計」となっている。
コンテンツライティングが、ユーザビリティ、アクセシビリティ、SEO の観点から大きな役割を果たすとする記事。テクニカルライティングの手法に加え、検索キーワードを意識した語り口や、簡潔な文章構成が重要と書かれている。
アクセシブルなナビゲーション設計の考え方が紹介されている。
Web コンテンツで非アクセシブルになりがちな例が紹介されている。特にコンテンツのライティングでアクセシビリティが向上させられる例は参考になる。
ウェブコンテンツを適切に表現するためのライティングの要点がシリーズで連載されている。