記事アーカイブ
(全437件 : 5/44ページ)

ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える (PWA Night vol.41)

2022年7月20日に開催された「PWA Night vol.41 〜 Design」に登壇させていただき、『ウェブアプリのダークモード対応 〜「見やすさ」「わかりやすさ」の観点で考える』というテーマでお話をしました。

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」というカンファレンスがあります。完全オンライン形式で、無料で参加登録できる (アーカイブも視聴可能) ということもあり、日本にいながらでも気軽に参加することができます。今回、いくつか興味深いセッションをアーカイブで視聴しましたので、備忘録として、書き残しておきたいと思います。

Designing Connected Content

「DESIGNING CONNECTED CONTENT — デジタルプロダクトの長期的な成長を支える構造化コンテンツ」を読みました。デジタルコンテンツについて、基本となるのは「構造化コンテンツ」であり、まず構造を設計し、その構造に基づいてコンテンツを作り、最後にインターフェースとしてパブリッシュしよう、と説くものです。

一貫性のあるフォーカスインジケーター

キーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、フォーカスインジケーターが視認しやすいことはとても重要です。WCAG にはカラーコントラストや面積などの要件が定められていますが、ユーザーの認知、学習を支援する観点から、私自身はこれに加えて「一貫性のあるフォーカスインジケーターにする」ことも併せて考慮に入れたいと考えています。

ウェブコンテンツのダークモード対応

ウェブコンテンツのダークモード対応は、必ずしも必須というわけではありませんが、ユーザー体験に寄った視点で考えると一定の意義はあると言えます。なお、ウェブコンテンツにおいては CSS のメディア特性 (prefers-color-scheme) を用いることでダークモード対応ができますが、実際にダークモード対応の実装をする場合は、いくつか気をつけておきたいことがあります。