「デザインシステム」タグのアクセシビリティ関連情報https://accclip.marimokikakugk.com/jahttps://qiita.com/tomokusaba/items/65e2c45869018cd1f06dhttps://qiita.com/tomokusaba/items/65e2c45869018cd1f06dFluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。Tue, 16 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/d3b54e147dec86ec7086https://qiita.com/tomokusaba/items/d3b54e147dec86ec7086Fluent UI 2 の Rating コンポーネント（評価UI）の設計思想とアクセシビリティ実装を、従来版との比較で解説。Tue, 16 Jun 2026 00:00:00 GMThttps://www.youtube.com/watch?v=uG9WtXyiAsghttps://www.youtube.com/watch?v=uG9WtXyiAsgデザイナーがアクセシビリティ対応で開発者・コンテンツ制作者より進んでいる理由を解説。設計段階からのアクセシビリティ考慮の重要性と各職種の役割分担。Tue, 16 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/5ca07275ad4a3a685aeehttps://qiita.com/tomokusaba/items/5ca07275ad4a3a685aeeデザインシステム Fluent UI の Persona コンポーネント実装。ユーザー情報の表示設計、レイアウト、アクセシビリティ要件、Blazor での使用方法を解説。Sun, 14 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/7152b61fdf418239bbb8https://qiita.com/tomokusaba/items/7152b61fdf418239bbb8デザインシステム Fluent UI の MessageBar コンポーネント実装。状態通知の情報設計、アクセシビリティ要件、Blazor 5 との比較を解説。Sun, 14 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/c323de23e753455eeb7chttps://qiita.com/tomokusaba/items/c323de23e753455eeb7cFluent UI 2のNavコンポーネントのガイダンス・動作・レイアウト・アクセシビリティ実装を詳解。Fluent UI Blazor 5との比較を交えながら、アクセシビリティを実装するためのポイントを提示。Sun, 14 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/bf6f2d4d6cd875042d2ahttps://qiita.com/tomokusaba/items/bf6f2d4d6cd875042d2aFluent UIのリンクコンポーネント設計を、支援技術での理解を重視しながらボタンとの区別も含めて解説。Sat, 13 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/4446e4ab89b5eaa55987https://qiita.com/tomokusaba/items/4446e4ab89b5eaa55987Fluent UI 2のアイコンのセマンティック目的とアクセシビリティ対応について解説する技術記事。デザインシステムにおけるアクセシビリティの実装方法を論じている。Thu, 11 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/6f522ad550c6a853e623https://qiita.com/tomokusaba/items/6f522ad550c6a853e623Fluent UI 2のImageコンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。Thu, 11 Jun 2026 00:00:00 GMThttps://a11yweekly.com/issue/503/https://a11yweekly.com/issue/503/フレームワークに依存しないデザインシステムの構築。Web Componentsを用いて複数の環境下でアクセシビリティを保つ実装手法について解説している。Mon, 08 Jun 2026 00:00:00 GMThttps://dev.to/vaibhavg/5-shadcn-slider-components-that-hold-up-in-real-dashboards-not-just-demos-find-accessible-4i4nhttps://dev.to/vaibhavg/5-shadcn-slider-components-that-hold-up-in-real-dashboards-not-just-demos-find-accessible-4i4nShadcnの5種類のスライダーコンポーネントから、実装で選ぶべきアクセシブルで高性能なものを紹介。実装効率と品質を両立させるコンポーネント選定の考え方を解説する。Thu, 04 Jun 2026 00:00:00 GMThttps://www.thestarter.io/bloghttps://www.thestarter.io/blogFigmaのデザイン変数を活用してフォントスケーリングをテストし、多様なユーザーニーズに対応したアクセシブルなデザインシステムの実装方法を解説する。Wed, 03 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/337b0de5fb5bd238c2a8https://qiita.com/tomokusaba/items/337b0de5fb5bd238c2a8Fluent UI 2 の Breadcrumb コンポーネントのアクセシビリティ実装を、Fluent UI Blazor 5 との対応と情報設計の観点から解説。ナビゲーション要素の正しい ARIA 属性による構造化。Wed, 03 Jun 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/6a9a8bd2eb278cffb83bhttps://qiita.com/tomokusaba/items/6a9a8bd2eb278cffb83bFluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。Mon, 01 Jun 2026 00:00:00 GMThttps://note.com/culumu/n/n82dde0f80f25https://note.com/culumu/n/n82dde0f80f25インクルーシブデザインを経営戦略に組み込む重要性を論じる。設計の上流段階でアクセシビリティを配慮することの効果を解説。Fri, 29 May 2026 00:00:00 GMThttps://smashingmagazine.com/2026/05/building-self-correcting-color-systems-contrast-color/https://smashingmagazine.com/2026/05/building-self-correcting-color-systems-contrast-color/コントラスト不適合のWebサイトが70%に達する現状を背景に、contrast-color()CSS関数で自動調整するカラーシステムの構築手法を提示。設計者向けの実装ガイド。Thu, 28 May 2026 00:00:00 GMThttps://dev.to/anex_ui/i-built-an-accessible-react-component-library-from-scratch-heres-what-i-learned-4lnghttps://dev.to/anex_ui/i-built-an-accessible-react-component-library-from-scratch-heres-what-i-learned-4lngReactで一からアクセシブルなコンポーネントライブラリを構築した実装経験と教訓。WAI-ARIA活用によるデザインシステム設計。Thu, 28 May 2026 00:00:00 GMThttps://note.com/mediaid_design/n/n1bc87443dbe2https://note.com/mediaid_design/n/n1bc87443dbe2医療・ヘルスケア領域向けのデザインシステム「beads」の設計思想を解説。患者や生活者の不安軽減と行動支援を重視した包括的なサービス設計を紹介している。Tue, 26 May 2026 00:00:00 GMThttps://www.youtube.com/watch?v=wujUs5rIhr0https://www.youtube.com/watch?v=wujUs5rIhr0Studioフォント紹介LPを題材に、エディターで実際にサイトをアクセシブルにしていく手法をハンズオン形式で解説。Fri, 15 May 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/c6d6c248fc3030d63f50https://qiita.com/tomokusaba/items/c6d6c248fc3030d63f50Fluent UI/Fluent 2 におけるデザイントークンの使い分け。raw値ではなくaliasトークンを使用することで、アクセシビリティ運用の効率化と色のWCAG準拠を強化する設計方法を解説する。Thu, 07 May 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/5603457cab9f2cbb1757https://qiita.com/tomokusaba/items/5603457cab9f2cbb1757Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。Wed, 06 May 2026 00:00:00 GMThttps://qiita.com/tomokusaba/items/c1c5d0faed184fb27da4https://qiita.com/tomokusaba/items/c1c5d0faed184fb27da4WCAG 2.1の基準と照らし合わせながら、Fluent UI 2のカラーコントラストと色使いのアクセシビリティ問題を整理。エラー表示や選択状態を色だけに依存しない設計を解説する。Wed, 06 May 2026 00:00:00 GMThttps://www.aaron-gustafson.com/notebook/links/design-systems-cant-automate-away-all-of-your-accessibility-considerations/https://www.aaron-gustafson.com/notebook/links/design-systems-cant-automate-away-all-of-your-accessibility-considerations/デザインシステムの限界と、自動化では対応しきれないアクセシビリティ配慮の必要性を論じる。設計段階での人間的判断の重要性。Thu, 23 Apr 2026 00:00:00 GMThttps://note.com/ohanamizuki/n/nd407cfa71701https://note.com/ohanamizuki/n/nd407cfa71701AI支援開発でUIを高速化する際、色情報を除いた情報設計・構造検証の重要性をバイブコーディングの実例から論じる。Mon, 20 Apr 2026 00:00:00 GMThttps://qiita.com/keisato848/items/503b13ff1f0943ba1e38https://qiita.com/keisato848/items/503b13ff1f0943ba1e38MCPについて、デジタル庁デザインシステムを題材にした実装例を通じて実践的に理解するための技術記事である。Sat, 18 Apr 2026 00:00:00 GMThttps://dev.to/greedy_reader/why-accessibility-comes-first-in-saas-ai-13nhhttps://dev.to/greedy_reader/why-accessibility-comes-first-in-saas-ai-13nhSaaS・AI開発のスピード重視の文化の中で、アクセシビリティを初期段階から優先設計する重要性と実装アプローチを解説する。Sun, 12 Apr 2026 00:00:00 GMThttps://dev.to/ku5ic/accessibility-first-looks-different-from-accessibility-compliant-39n0https://dev.to/ku5ic/accessibility-first-looks-different-from-accessibility-compliant-39n0WCAG 2.2 AAを必須制約として設計に組み込むアーキテクチャ手法を、Reactコンポーネントライブラリの9事例から解説。コンプライアンス超の一流設計。Sat, 11 Apr 2026 00:00:00 GMThttps://zenn.dev/govtechtokyo/articles/25dc766e1bd862https://zenn.dev/govtechtokyo/articles/25dc766e1bd862GovTech Tokyoがダッシュボード標準化に向けてコントラスト比やUX品質を確保した東京都版カラーパレット策定のプロセスを解説している。Wed, 25 Mar 2026 00:00:00 GMThttps://qiita.com/pmc-ko/items/499c04547949839d7556https://qiita.com/pmc-ko/items/499c04547949839d7556CSSカスタムプロパティを活用してプリザンターv2テーマ全体の配色を動的に切り替える実装パターン。ハイコントラストモード等で視認性を高めるUI実装の手順をステップバイステップで解説。Mon, 23 Mar 2026 00:00:00 GMThttps://masup9.github.io/apg-patterns-examples/ja/https://masup9.github.io/apg-patterns-examples/ja/WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。Sun, 15 Mar 2026 00:00:00 GMThttps://design.digital.go.jp/dads/https://design.digital.go.jp/dads/デジタル庁が公開したデザインシステムβ版。UIコンポーネント・設計パターン・実装ガイドラインをアクセシビリティとユーザビリティを踏まえて提供。Thu, 26 Feb 2026 00:00:00 GMThttps://zenn.dev/tomokusaba/articles/a93bb2b537e2efhttps://zenn.dev/tomokusaba/articles/a93bb2b537e2efWCAG 2.2の4原則と13ガイドラインを体系的に整理し、設計から実装・テストまでウェブアクセシビリティ対応を包括的に解説したガイドだ。Sun, 22 Feb 2026 00:00:00 GMThttps://www.aaron-gustafson.com/notebook/accessibility-assistant-for-figma-v52/https://www.aaron-gustafson.com/notebook/accessibility-assistant-for-figma-v52/FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。Fri, 20 Feb 2026 00:00:00 GMThttps://toranoana-lab.hatenablog.com/entry/2026/02/19/130000https://toranoana-lab.hatenablog.com/entry/2026/02/19/130000Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。Thu, 19 Feb 2026 00:00:00 GMThttps://marcysutton.com/on-joining-khan-academy/https://marcysutton.com/on-joining-khan-academy/Khan Academyに入社したアクセシビリティ専門家Marcy Suttonが、デザインシステムへのアクセシビリティ統合の方針と実践を解説している。Fri, 30 Jan 2026 00:00:00 GMThttps://www.digitala11y.com/why-figma-annotations-are-critical-for-a-shift-left-accessibility-approach/https://www.digitala11y.com/why-figma-annotations-are-critical-for-a-shift-left-accessibility-approach/Figmaアノテーションを活用してデザイン段階でアクセシビリティ要件を組み込む「シフトレフト」アプローチを解説。手戻り削減と開発者への引き継ぎ改善を実現する実践方法を紹介。Fri, 30 Jan 2026 00:00:00 GMThttps://www.levelaccess.com/blog/embedding-accessibility-in-design-how-early-planning-creates-advantage/https://www.levelaccess.com/blog/embedding-accessibility-in-design-how-early-planning-creates-advantage/デザインの初期段階からアクセシビリティを組み込む必要性と、企業の競争力向上への効果について解説する。Thu, 29 Jan 2026 00:00:00 GMThttps://heydonworks.com/article/leveraging-the-super-keyword-in-custom-elements/https://heydonworks.com/article/leveraging-the-super-keyword-in-custom-elements/アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。Tue, 30 Dec 2025 00:00:00 GMThttps://heydonworks.com/article/dynamically-loading-custom-elements/https://heydonworks.com/article/dynamically-loading-custom-elements/Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。Mon, 29 Dec 2025 00:00:00 GMThttps://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/https://www.aaron-gustafson.com/notebook/fullscreen-video-and-iframes-made-easy/動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。Mon, 29 Dec 2025 00:00:00 GMThttps://www.youtube.com/watch?v=C1iwVk5GrPQhttps://www.youtube.com/watch?v=C1iwVk5GrPQニュージーランド政府Whaikahā（障害者省）が手話を組み込んだブランドアイデンティティ構築を通じて、アクセシビリティを設計戦略の中核に据えた事例を紹介する。Wed, 17 Dec 2025 00:00:00 GMThttps://www.youtube.com/watch?v=C4wYXXtAxzshttps://www.youtube.com/watch?v=C4wYXXtAxzsFigmaでボタンのデフォルト・ホバー・アクティブ・非アクティブの4状態を視覚的に識別可能にデザインする方法を紹介。Webアクセシビリティに配慮した設計手法を学べる。Mon, 27 Oct 2025 00:00:00 GMThttps://digital-agency-news.digital.go.jp/articles/2025-10-14https://digital-agency-news.digital.go.jp/articles/2025-10-14デジタル庁デザインシステムを活用するウェブ開発で直面するアクセシビリティ課題と具体的な解決策を実例とともに解説する。Tue, 14 Oct 2025 00:00:00 GMThttps://www.youtube.com/watch?v=9kzo0C3O4YUhttps://www.youtube.com/watch?v=9kzo0C3O4YUFigmaでDefault・Hover・Active・Inactiveのボタン状態をアクセシブルにデザインする方法をチュートリアル形式で解説した動画。Fri, 01 Aug 2025 00:00:00 GMThttps://zenn.dev/team_soda/articles/yoriyoi_colorhttps://zenn.dev/team_soda/articles/yoriyoi_colorFlutterアプリのカラーデザインにWCAGコントラスト比基準を組み込む方法をテーマ設計からテスト実装まで解説している。Tue, 25 Mar 2025 00:00:00 GMThttps://developers.freee.co.jp/entry/a11y-from-my-perspectivehttps://developers.freee.co.jp/entry/a11y-from-my-perspectiveデザインシステム開発チームが実務の中で学んだアクセシビリティ実装の知見と、企業文化としてのアクセシビリティの取り組みを紹介する。Sat, 07 Dec 2024 00:00:00 GMThttps://books.rakuten.co.jp/rb/17385753/https://books.rakuten.co.jp/rb/17385753/WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。Sun, 26 Feb 2023 00:00:00 GMThttps://doi.org/10.5121/csit.2023.132218https://doi.org/10.5121/csit.2023.132218デザインシステムをWCAG 2.0からWCAG 2.1へ移行するプロセスを解説した研究。アクセシビリティ要件の段階的な更新手法を示す。Sun, 01 Jan 2023 00:00:00 GMThttps://doi.org/10.1093/iwc/iwz023https://doi.org/10.1093/iwc/iwz023インタラクションデザイン専門家のユニバーサルデザイン知識レベルを5つのアーキタイプで分類。デジタル変革下での包括的なICT設計の課題と方向性を分析する。Tue, 01 Jan 2019 00:00:00 GMThttp://books.google.co.jp/books?id=211KzgEACAAJ&dq=intitle:inclusive+design&hl=&as_pt=BOOKS&source=gbs_apihttp://books.google.co.jp/books?id=211KzgEACAAJ&dq=intitle:inclusive+design&hl=&as_pt=BOOKS&source=gbs_apiデジタル製品のインクルーシブデザインを解説した実践的技術書。できる限り多くのユーザーがアクセスできる製品設計の考え方と手法を体系的に示す。Mon, 31 Dec 2018 00:00:00 GMT