Playwrightを使ったE2Eテストで、ブラウザ(Chromium/WebKit)、端末(iPhone実機/Android Emulator)、画面幅、アクセシビリティなど複数軸での動作確認。Chrome環境のみでなく、Safari系やスマートフォン環境での検証の重要性を解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
重度重複障害のある子どもたちの心身状態を心拍変動と行動観察で読み取り、それをもとに支援・指導を工夫するスキルを学ぶオンライン講座。視線入力やスイッチ教材などICT・支援技術の活用例も紹介される。
中国の医薬品に付く追跡コードを活用した情報提供の仕組みを解説。商品識別、偽造対策とともに、アクセシブルコードによる視覚障害のある人・外国人を含めた情報アクセスの実現を扱う。
GitHub ActionsでWCAG 2.2準拠のアクセシビリティチェックを自動化するアクション。axe-coreを使用し、プルリクエストで違反を検出して構築を失敗させる。重大度レベル(critical/serious/moderate/minor)の設定や基準の選択ができる。
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
そのほかの #React ピックアップ
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
ブラウザゲームにおいて、複数の操作方法と状態表現を組み合わせてアクセシビリティを確保する方法を、Astro と React Islands で実装。
ブラウザゲーム開発の実装事例。視覚的スケーリングゲームをAstro(静的)とReact Island(インタラクティブ)で構築し、キーボード・ポインタ・タッチに対応。テスト可能な設計を解説。
チャットUIのストリーミング完了時のアクセシビリティバグの詳細解説。完了時にUIがリマウントされるとキーボードフォーカスが消える問題を状態遷移設計で防ぐ方法を提案。VoiceOver等スクリーンリーダー利用時の課題と再現コード付き。
HTMLの input type="number" が金額入力に不適切な理由と、type="text" + inputmode="numeric" での実装方法を詳説する。カンマが入力できない、マウスホイールで値が変わるなどの問題を指摘し、Reactコード例を示す。
Reactでのパフォーマンス最適化は、技術的な高速化だけでなく、状態の明確な伝達が重要。aria-busyやaria-liveを使った状態通知、prefers-reduced-motionへの対応、アクセシブルなエラーメッセージを、実装パターンを示して解説。
そのほかの #iOS ピックアップ
Weekend: Lumin - The Voice‑First Email App
視覚障害やロービジョンのあるユーザー向けの音声操作メールアプリLumin。創設者自身が進行性視力喪失の診断を受けたことから開発。AIと音声のみのUIで、メールの読取・返信・管理をすべて音声で操作できる。
iOS27でのVoiceOverの改善点を紹介するチュートリアル。ヒント読み上げ機能のカスタマイズ方法、アプリ固有のヒント設定、読み上げ間隔の調整について初級向けに解説。
iOS27で搭載されたVoiceOver新機能「テキスト探索」「テキストナビゲーション」について解説。両機能の違いと設定方法を実例を交えて説明する初級向けガイド。
OS更新後に視覚支援機能(拡大、反転、読み上げ)の不具合が発生した経験から、複数の支援機能を組み合わせて使う人にとって、それらの連携が日常利用を支えていることを指摘。
iOS 27 で VoiceOver の画面認識機能が大幅に進化した内容を解説する動画。povo2.0 アプリでの実例を通じて、アプリ内のトッピング情報や画像内の文字を認識・読み上げする精度向上について紹介。
iOS 27のVoiceOver設定項目における追加・変更点を詳しく解説する動画。テキスト、カーソル、点字、ローター機能など、主要な設定オプションの更新内容を確認でき、スクリーンリーダーユーザーの初心者向け解説となっている。
そのほかの #Android ピックアップ
Kindle の TalkBack による読み上げ仕様が変わったため、代わりに Kindle 搭載の Assistive Reader に乗り換えたユーザーが、使いやすさ・速度・スマホ放置時の継続再生など、むしろ快適に感じた経験を記述したもの。
Smart Typer for Android のAI音声機能の紹介。テキストと注記を自然な音のAIボイスに変換して聴くことができるAndroidアプリの機能説明。盲・ロービジョンユーザー向け。
視覚・聴覚障害向けアプリの開発可能性を検討する過程で、ハードウェア要件や安全性の課題に直面した開発者が、最大の気づきとして利用者への事前ヒアリングの重要性を論ずる。
盲・ロービジョンユーザー向けのAndroidアプリ。AI搭載のライティング補正、音声入力、翻訳、検索などを備えたアクセシブルなノート管理ツール。
Quick Tech Tip! Turning TalkBack On & Off
AndroidデバイスにおけるスクリーンリーダーTalkBackの有効化と無効化の手順を視覚的に解説する短編動画。
Androidのホームスクリーン設定で大きなサイズの時計ウィジェットを配置するテクニック。