Fluent UI 2のImageコンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。
シェアックリップ
シェアされたアックリップです。
そのほかの #代替テキスト・alt ピックアップ
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。
生成AIが画像の詳しい説明を書いても、代替テキストとして使用する前に7点の観点で編集する必要があると解説。目的・意味・装飾性・機能・文字・図表・CMS実装後の確認を通じ、見た目の正確性ではなく「見られない人にも同じ情報へ到達できるか」を基準とすべき。
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
スクリーンリーダーがアクセシビリティツリーを通じてWebページを読む仕組みと、alt欠落・ARIA誤用などよくある実装エラーの修正法を解説する。
HTML/CSS初心者向けのWebアクセシビリティ入門。意味のあるHTML、キーボード操作、フォーム、代替テキスト、コントラストの5点から始める基本を解説。
そのほかの #デザインシステム ピックアップ
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
WCAGコントラスト比を満たす色スキーム設計方法について解説。sRGB・HSL色空間の限界、相対輝度の計算式、OKLCH色空間を使ったCSS設計トークンで、アクセシブルな色システムを構築する方法を示す。
株式会社トルクの社内勉強会「ブランディングデー」の取り組み紹介。デザインシステム Material Design 3 を輪読し、カラーシステムのアクセシビリティ設計（トーン管理によるコントラスト比の自動確保）について学ぶプロセスを通じて、アクセシビリティはデザインの後付けではなく設計に組み込まれるべきことを実感した事例。
海外の政府・民間企業が構築したデザインシステムの事例を紹介。各地域の文化や法規制、アクセシビリティ基準への対応、デジタル社会への適応などの特徴を解説する。
JavaScript チャートライブラリの代替として、CSS ネイティブなチャート実装 3 つ（Charts.css、ProvChart、FSCSS）を比較。各々の特性、ユースケース、使い分けを解説。
Reactコンポーネントを別プロジェクトで再利用する際、スキップリンクと見出しのアクセシビリティ関係が壊れる問題を取り上げ。コンポーネント間の契約を明示的に定義することで異なる構成モデル下でもアクセシビリティを保つ設計方法を解説。
そのほかの #WAI-ARIA ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。