ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える (PWA Night vol.41)
2022年7月20日に開催された「PWA Night vol.41 〜 Design」に登壇させていただき、『ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える』というテーマでお話をしました。
記事カテゴリー : アクセシビリティ
(全271件 : 3/28ページ)
[Tab] キーによるフォーカス順序を視覚的に表示する Chrome 拡張機能「taba11y」
Chrome の拡張機能「taba11y」をご紹介します。ブラウザで開いているウェブページを解析して、当該ページにおける [Tab] キーによるフォーカス順序を視覚的にオーバーレイ表示してくれる、というものです。
axe-core ルールと WCAG 2.1 達成基準の対照表
axe-core のルール ID と WCAG 2.1 達成基準の対照表を、Google スプレッドシートで作ってみました。「axe-test.js」によるテスト結果と併用することで、検出された個々のアクセシビリティ問題 (axe-core ルール) が、WCAG のどの達成基準に該当するか、一瞥してわかりやすくなります。
「ユーザーとの向き合いかた」を深化させるアクセシビリティ (iCARE Dev Meetup #33)
2022年5月18日に開催された「iCARE Dev Meetup #33」に登壇させていただき、『「ユーザーとの向き合いかた」を深化させるアクセシビリティ』というテーマでお話をしました。
Twitter の「ALT」バッジ
2022年4月8日付で、Twitter は「ALT」バッジをグローバルにリリースしました。晴眼者に向けて画像に代替テキストを付けることを啓蒙、促進する意味合いがあるのだろうと思いますが、実際には「ALT」バッジが表示されたことによってかえって、本来の代替テキストとは違う意図のテキストが入れられてしまうケースが見られるようになっています。
The WebAIM Million (100万のホームページに対するアクセシビリティ自動検証) : 2022年の調査
米国の非営利団体 WebAIM が実施した、「The WebAIM Million」という調査があります。メジャーどころの100万ウェブサイトを採り上げ、ウェブアクセシビリティ検証ツール「WAVE」のエンジンを用いて自動検証を行ない、定量的に傾向を分析する、というものです。2022年2月に第4回の調査が実施されたので、その結果を抜粋します。
axe-con 2022
Deque Systems, Inc. が主催する、デジタル領域のアクセシビリティをテーマにした「axe-con」というカンファレンスがあります。完全オンライン形式で、無料で参加登録できる (アーカイブも視聴可能) ということもあり、日本にいながらでも気軽に参加することができます。今回、いくつか興味深いセッションをアーカイブで視聴しましたので、備忘録として、書き残しておきたいと思います。
一貫性のあるフォーカスインジケーター
キーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、フォーカスインジケーターが視認しやすいことはとても重要です。WCAG にはカラーコントラストや面積などの要件が定められていますが、ユーザーの認知、学習を支援する観点から、私自身はこれに加えて「一貫性のあるフォーカスインジケーターにする」ことも併せて考慮に入れたいと考えています。
ウェブコンテンツのダークモード対応
ウェブコンテンツのダークモード対応は、必ずしも必須というわけではありませんが、ユーザー体験に寄った視点で考えると一定の意義はあると言えます。なお、ウェブコンテンツにおいては CSS のメディア特性 (prefers-color-scheme) を用いることでダークモード対応ができますが、実際にダークモード対応の実装をする場合は、いくつか気をつけておきたいことがあります。
WCAG 3.0 (W3C Working Draft 2021年12月7日版)
W3C にて策定作業が進んでいる WCAG 3.0 (W3C Accessibility Guidelines) の Working Draft が、2021年12月7日付で更新されました。この記事では、以前記事にした First Public Working Draft から、どのようなアップデートがなされているのかを、簡単にご紹介したいと思います。