Ionic Framework 9のリリースに伴う主要な変更5つを紹介。Selectのリッチコンテンツ対応、Font Icon対応、HTMLネイティブ要素への移行など、コンポーネント拡張とアクセシビリティの向上を図った。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
color-schemeプロパティでダークモードにおけるブラウザのネイティブUI（日付入力、セレクト、スクロールバー）の自動対応が可能。カスタムコンポーネント制作なしで実装できるテクニック。
ネイティブ<input type="checkbox">を保ちながらカスタムスタイリングする方法。キーボード操作とスクリーンリーダー対応をデフォルトで獲得し、複数の支援技術に対応する責任あるチェックボックスの実装パターンを解説。
HTMLの input type="number" が金額入力に不適切な理由と、type="text" + inputmode="numeric" での実装方法を詳説する。カンマが入力できない、マウスホイールで値が変わるなどの問題を指摘し、Reactコード例を示す。
Cookie肥大化により発生するHTTP 431エラーがフォーム送信をサイレント障害にする問題と、スクリーンリーダー対応を含むアクセシブルなエラーハンドリング実装を解説する。
そのほかの #キーボード操作 ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
そのほかの #UXデザイン ピックアップ
The Design + Accessibility Summit
イベント 海外 開催予定
デザイン専門家向けのオンラインサミット（第7回）。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
エシカルデザインの手法をインクルーシブ・アクティビティ・カードを使ったワークショップ。
非エンジニアがClaudeとGeminiを併用してWebアプリ開発した実践プロンプト集。アクセシビリティ要件の初期組み込みから、UI/UX調整、視認性強化、トラブル対処まで、実装プロセスと試行錯誤を解説。
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
親が1人で車椅子ユーザーの子どもを雨の中で乗せるときの身体的負担を7場面に分けて可視化。カバーの着脱と安全な乗せ下ろしが同時に必要な課題を指摘し、設計改善の方向を提案。
そのほかの #デザインシステム ピックアップ
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
WCAGコントラスト比を満たす色スキーム設計方法について解説。sRGB・HSL色空間の限界、相対輝度の計算式、OKLCH色空間を使ったCSS設計トークンで、アクセシブルな色システムを構築する方法を示す。
株式会社トルクの社内勉強会「ブランディングデー」の取り組み紹介。デザインシステム Material Design 3 を輪読し、カラーシステムのアクセシビリティ設計（トーン管理によるコントラスト比の自動確保）について学ぶプロセスを通じて、アクセシビリティはデザインの後付けではなく設計に組み込まれるべきことを実感した事例。
海外の政府・民間企業が構築したデザインシステムの事例を紹介。各地域の文化や法規制、アクセシビリティ基準への対応、デジタル社会への適応などの特徴を解説する。
JavaScript チャートライブラリの代替として、CSS ネイティブなチャート実装 3 つ（Charts.css、ProvChart、FSCSS）を比較。各々の特性、ユースケース、使い分けを解説。
Reactコンポーネントを別プロジェクトで再利用する際、スキップリンクと見出しのアクセシビリティ関係が壊れる問題を取り上げ。コンポーネント間の契約を明示的に定義することで異なる構成モデル下でもアクセシビリティを保つ設計方法を解説。