見出し要素内の改行がVoiceOverの読み上げに与える影響と、aria-labelの使用またはCSS工夫による対策を解説している。
シェアックリップ
シェアされたアックリップです。
そのほかの #VoiceOver ピックアップ
Lighthouse と ChatGPT を組み合わせ、はてなブログのアクセシビリティ問題を特定・改善する過程を記録。視覚障害のある著者が VoiceOver でテストし、Webアクセシビリティの実践的な改善手法を紹介する。
iOS27で新たに追加されたVoiceOverのクイック設定項目を紹介する。スクリーンカーテンなど、従来は標準ジェスチャーで利用しにくかった機能をクイック設定から簡単に利用できるようになった。
iOS27でiPhone SE2とiPhone 18 Pro Maxの VoiceOver設定項目の違いを比較する。Apple Intelligenceへの対応が主な違いで、新端末ではライブ認識や画像説明などの機能が追加されている。
VoiceOverを使うEX予約アプリユーザーが身体障害者手帳を登録する手順を解説。VoiceOver環境でのアクセシビリティの課題と、iOS27の画面認識機能を用いた回避方法を実演している。
iOS27でのVoiceOverの改善点を紹介するチュートリアル。ヒント読み上げ機能のカスタマイズ方法、アプリ固有のヒント設定、読み上げ間隔の調整について初級向けに解説。
iOS27で搭載されたVoiceOver新機能「テキスト探索」「テキストナビゲーション」について解説。両機能の違いと設定方法を実例を交えて説明する初級向けガイド。
そのほかの #見出し構造 ピックアップ
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
Webアクセシビリティの象徴だったスキップリンクが、テクノロジー進化により必要性を失った現代でもなおチェックリスト項目として形骸化している問題を指摘。正しい見出し構造とランドマーク要素こそが重要であり、形骸化した配慮から脱却することを主張。
HTMLを可視化するブラウザ拡張機能『Accessibility Visualizer』の開発者 ymrl さんが、代替テキスト・見出し・フォームなどの情報を視覚化するツールと活用法を解説する。
HTMLテーブルのアクセシビリティ実装を、スクリーンリーダー対応に重点を置いて解説。caption、scope属性、id+headers属性などの具体的な手法を紹介する。
La Ligaの20クラブサイトについて、自動ツールと手動テストでアクセシビリティを監査した結果。自動ツールは高スコアでも実際にはスクリーンリーダーやキーボード操作に課題があるケースが多く、企業事例とテスト方法を示す。
ブログ記事のセマンティックマークアップ実装ガイド。h1～h3の階層構造、figcaption、alt text、JSON-LD BlogPostingなど、HTMLの正しい要素選択方法とアクセシビリティを解説。
そのほかの #WAI-ARIA ピックアップ
Shadow DOM を使用した Web コンポーネントでスクリーンリーダーが情報を正しく認識しない問題と、その解決方法を技術的に解説。delegatesFocus、ARIA 属性、aria-hidden の活用などの実装パターンを紹介。
自動化されたインテリジェント・ガイド・テストが、キーボード操作やフォーカス動作など手動では時間を要するテストを自動化。開発者が数秒で結果を確認でき、AIの判定を人間が検証・修正することで、テスト効率を劇的に向上させる。
AIエージェントが画面を操作するとき、見た目よりセマンティックな構造が重要。意味を明示するとUIの操作成功率が43%から90%に向上する。
ブラウザが DOM から構築するアクセシビリティツリーの仕様と構造。Role・Name・State・Value の計算ルール、OS 別 API への変換、支援技術との連携メカニズムを技術的に解説。
noteエディタの見出し画像ボタンのaria-label欠落により、Playwright自動化テストが失敗。同じ欠落がスクリーンリーダーにも影響することを指摘し、位置・サイズで検索する回避策を解説。
React でメールフォームを状態管理（idle、editing、invalid、submitting、success、server error）で構築し、ARIA を用いてアクセシビリティを確保する実装パターン。ユーザーへの段階的情報提供を重視。
そのほかの #キーボード操作 ピックアップ
AI チャット UI でタブが非表示になるとストリーミング状態が更新されず、キーボード操作と スクリーンリーダー利用が中断される問題を技術的に解説。Page Lifecycle API による適切な状態管理を提案。
自動化されたインテリジェント・ガイド・テストが、キーボード操作やフォーカス動作など手動では時間を要するテストを自動化。開発者が数秒で結果を確認でき、AIの判定を人間が検証・修正することで、テスト効率を劇的に向上させる。
キーボードユーザーがナビゲーション部分をスキップしてメインコンテンツへ直接アクセスできるスキップリンク機能の実装方法とテスト手法を解説。WCAG 2.4.1準拠のための基本的なアクセシビリティ実装。
AI 生成テキストをストリーミング表示する際、未完成の Markdown 構造が不正な見出しやリンクになり、スクリーンリーダー・キーボード利用者に虚偽の情報を伝える問題を分析。状態管理と ARIA 属性による解決法を提示。
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。