Trees, from PierreA file tree rendering library@pierre/trees is an open source file tree rendering library. It's built for performance and flexibility, is super customizable, and comes packed with features. Made with love by The Pierre Computer Company.
Accessible notifications and messages
Accessible notifications and messagesHow to ensure updates and messages are communicated in an inclusive way. Overview Assistive technology announcements These general guidelines can help you determine when assistive technology should output a message. This helps to ensure everyone understands important updates to an experience. Guidelines Always: Announce location changes — Help users understand
デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策｜デジタル庁ニュース
ホームニュース一覧デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 目次 はじめにデジタル庁デザインシステムを採用するメリット最新のアクセシビリティの国際規格であるWCAG 2.2の達成基準86項目のうちの43項目で「適合」または「適合が容易」にサンプルコードをコードスニペットで提供、すぐに活用可能よくあるアクセシビリティの課題とデジタル庁デザインシステムを活用した解決策（1）具体的なアクセシビリティの性能について：視野狭窄の当事者による閲覧に対応視野狭窄を考慮したアクセシビリティ1：「操作対象から離れた重要なコンテンツの変化に気づけない」問題と解決策視野狭窄を考慮したアクセシビリティ2：「右端にある要素に気づかないことがある」問題と解決策視野狭窄を考慮したアクセシビリティ3：「右
Make accessible carousels | Blog | Chrome for Developers
Published: September 29, 2025 Love them or hate them, carousels are a widely used and requested pattern. So when a carousel is implemented, it should be robust and accessible. It should be interactive at first paint, declarative for easier maintenance, and built with a semantic structure that is tested with assistive technologies. However, making carousels accessible is often challenging. Managing
命令的な ARIA ライブリージョン：ARIA Notifyの紹介
こんにちは、フロントエンドエンジニアの mehm8128 です。 今回は新しく検討されている ARIA Notify API について紹介します。 ARIA Notify とは ARIA Notify とは、既存の ARIA ライブリージョンにおける問題点を基に検討されている、新しい API です。document.ariaNotify() のように命令的に呼び出すことで、スクリーンリーダーや点字ディスプレイなどの支援技術に情報を伝えることができます。 ただし、既存のライブリージョンを完全に置き換えるものではありません。本来の目的で利用されているライブリージョンはそのままで良く、意図しない用いられ方をしてしまっている部分で、より正確に支援技術に情報を通知するための API となっています。 現在は仕様の議論段階で、最低限の機能が入った API が Edge では 136 以降の Origi
Considerations for making a tree view component accessible
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
Accessibility essentials every front-end developer should know by Martijn Hols
Accessibility essentials every front-end developer should know Many developers view accessibility as an overwhelming task, requiring a lot of extra effort or specialized knowledge. But a few basic practices can make a significant impact. In this article, I'll walk you through the key accessibility principles I believe every front-end developer should apply when building components, including: Sema
Web フロントエンドの実装において本来の機能を損なってはいけない
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ
React Ariaの実装読むぞ - Qiita Advent Calendar 2024 - Qiita
The Qiita Advent Calendar 2024 is supported by the following companies, organizations, and services.
アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう
Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。 ソフトウェアテストの手法の 1 つに、スナップショットテストがあります。スナップショットテストは、テスト対象の出力を保存しておき、次回のテスト時に保存した出力と比較することで、テストが通ったかどうかを判断する手法です。フロントエンドのテストでは、特に UI のテストにおいてスナップショットテストがよく使われます。 コンポーネントのレンダリング結果の DOM 構造を保存しておき、次回のテスト時に保存した DOM 構造と比
「お前ら失明したらどうする？」への回答｜moutend
はじめにはてな匿名ダイアリーに投稿された記事「お前ら失明したらどうする？」への回答です。悩みましたが、中途で視覚障害者になった一人として答える義務がありそうなので投稿します。 https://anond.hatelabo.jp/20241004112542 ろくでもない記事や反応コメントを読むのは嫌いじゃないので定期的に巡回していたところ、今回の記事を発見した次第です。読み専で書き込みの勝手がわからずnoteに投稿することにしました。 スクリーンリーダー（画面読み上げ機能）の使い方を覚えろ上から目線ですみません。緊急度が高そうなので先にスクリーンリーダー（画面読み上げ機能）についての話から。 元記事によると失明の可能性が高いとのことですので、まずは画面を水にスマホを操作する方法を覚えてください。スマホは必需品ですので、今後の生活を左右します。 iPhoneの場合、設定→アクセシビリティ→V
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
上記の引用にはいくつかのコード例が出てきます。1つめのコード例では、リンク（<a> 要素）に role="menuitem" を付けることでスクリーンリーダーのような支援技術に「ただのリンク」ではなく「メニューのアイテム」であることを認識させたり、aria-label 属性を使ってリンクのテキストを上書きして伝えたりしています。2つめのコード例では、ボタン（<button> 要素）に aria-pressed 属性を付けることで、このボタンがトグルボタン（「押されている・押されていない」の状態をもつボタン）であることを伝え、さらに属性値が "false" であることから「押されていない」すなわち「音を消していない」状態であることを伝えられています。 role="menuitem" や aria-pressed はHTMLの仕様の範囲では表現できない、WAI-ARIAの属性を使わなければ表現
Top Website Accessibility Testing Tools For Inclusive Web Design
Top Website Accessibility Testing Tools for Inclusive Web Design In an increasingly digital age, the internet serves as a vital resource for information, communication, commerce, and entertainment. However, for the millions of people living with disabilities, navigating the web can present significant challenges. Web accessibility addresses these challenges by ensuring that websites, tools, and te
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - millionco/react-doctor: Let coding agents diagnose and fix your React code
Interest Invokers (Explainer) | Open UI
GitHub - mui/base-ui: Unstyled UI components for building accessible web apps and design systems. From the creators of Radix, Floating UI, and Material UI.
GitHub - ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
react: Support React v18 · Issue #500 · dequelabs/axe-core-npm
GitHub - WICG/accessible-notifications: ARIA Accessible Notifications
aom/reference-target-explainer.md at gh-pages · WICG/aom