role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべ
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料 https://fortee.jp/frontend-conf-hokkaido-2024
export const Button = ({ children }) => { - return <button className="btn">{children}</button> + return <button className="button">{children}</button> } しかし、スナップショットテストではクラス名の変更によりテストが失敗することになります。このように、スナップショットテストは外部から見た振る舞いが変わらないことを確認するのには向いていません。コンポーネントの内部実装に変更を加えるたびにスナップショットの更新が求められるため、そのうちにスナップショットテストの結果が軽んじられてしまうことがあります。 Playwright の Aria snapshots Playwright の Aria snapshots はコンポーネントのスナップショッ
Web Developer Conference 2024 (2024/09/07) での発表資料 https://web-study.connpass.com/event/321711/
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
アクセシビリティを考慮したマークアップをした経験がある方は、aria-labelやaria-labelledbyについてご存じでしょう。これらは、要素にラベル付けするためのWAI-ARIAプロパティです。多くの場合、要素のアクセシブルな名前 (accessible name) を決めるために使われます。 aria-labelはラベルを直接文字列として指定するプロパティで、aria-labelledbyはIDを通じて他の要素をラベルとして指定するプロパティです。その使い分けについては、仕様書[1]で以下のように説明されています。つまり、可能な場合はaria-labelledbyに寄せるべきだということです。 If the label text is available in the DOM (i.e. typically visible text content), authors SHOU
aria-label 属性は、たまに「スクリーンリーダーによる読まれ方を指定する」属性のように思われてしまっているようです。この理解のされ方は、実はあまり正確なものではありません。 そもそもaria-labelという名前が aria- で始まているということは、WAI-ARIAで定義されている属性です。こういった属性は使う必要がなければ使わないに越したことはないという話を以前に書きました。 aria-label 属性も例外でなく、使い方を間違えると、意図した効果を得られないどころか、思わぬ形で作用してアクセシビリティを下げてしまうこともあります。 なお、 aria-label 属性と良く似た性質を持つ属性として aria-labelledby 属性があります。こちらは aria-label 属性とは違い、他の要素の id 属性の値を指定して、要素を参照して使用する属性です。ほかの要素を参照
【長持ち】Aria Pro II HYPER TOUCH ギターピックレビュー！耐摩耗性に優れたポリアセタール製!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
【日本製】ARIA SPS-2400Wb レビュー！艶やかな牡丹の和風花柄ギターストラップ!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
【日本製】ARIA SPS-2400PA レビュー！パンダ柄がかわいいモノトーンギターストラップ徹底解説!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
ARIA SPS-2400Wc 和柄ギターストラップレビュー：美しい菊が魅力の日本製品を徹底解説 | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
まとめ - React Ariaの実装読むぞ
こんにちは、フロントエンドエンジニアの mehm8128 です。 今回はまとめ回なので、React Aria での a11y 対応について、いくつかの種類に分けて見ていきます。 a11y 対応種類分け していきます。 スクリーンリーダーの読み上げ対応 a11y 対応と言って最初にこれが思い浮かぶ人は多かったのではないでしょうか。 HTML タグを正しく使って構造化するとか、accessible name をつけるという基本的なところから、aria-selectedなどのaria-属性を使って要素の状態を表現したり、aria-live="polite"のようなライブリージョンを用いてアナウンスさせたり、ブラウザ側でサポートされていないようなタイミングで読み上げたい場合に独自のLiveAnnouncerオブジェクトを用いてアナウンスさせたりと、様々な方法で Web ページの状態をスクリーンリー
GitHub - irsyadadl/justd: Justd is a chill set of React components, built on top of React Aria Components and Tailwind CSS. Easy to customize and just copy & paste into your React projects.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは！サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。 このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。 今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提 Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。 Testing Libraryでは要素取得にWAI-ARIA ロールを利用することを推奨しています。（ロールは視覚/マウス ユーザーだけでなく、支援技術を使用するユーザーのエクスペリエンスを反映するため） 実はWAI-ARIA ロールには66個のロールがありますが、実際によくWeb開発で使われるUIにどのようなロールが付与されているのかを知りたく
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
雨宮天「永遠のAria」Music Video
2020.9.2 Release 「永遠のAria」 作詞：上原梨紗 作曲：家原正樹・Giz'Mo (from Jam9) 編曲：家原正樹 テレビアニメ『七つの大罪 憤怒の審判』オープニングテーマ ===== 雨宮天 アーティストデビュー10周年記念！ Music Videoフル尺順次公開中！ https://www.youtube.com/playlist?list=PLC0sC1NiXlL7KhoVZHfotKC_jNkbIMNvM 8/13(火) 20：00～ 10周年記念特番 雨宮天が生配信でひたすらおしゃべりする「あおしゃべり」第5回 https://youtube.com/live/IGynSHThuNc ===== ☆DL/ST：https://mra.lnk.to/SoraAmamiya ☆雨宮天公式X（旧:Twitter） https://twitter.co
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
拡張性に優れた React Aria のコンポーネント設計
5分で分かる React Aria の 良いところ・これからなところ
アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう
React Aria で実現する次世代のアクセシビリティ
aria-labelとaria-labelledbyを併用する場合とは
aria-labelでなんでも解決しようとしない - Qiita
「Opera」が「Google Cloud」と提携、AIモデル「Gemini」を統合へ／AI機能「Aria」に画像を理解する力。被写体や撮影場所を調べたり、OCRとして機能
「Opera」開発版がAIベースのWebブラウザーに ～Android版は声で対話する機能も／生成AI「Aria」を軸にWebブラウザーを再構築
「Opera」の生成AI「Aria」が強化 ～閲覧中のWebページに関する質問に回答可能に／プロンプト入力ポップアップ上に回答を表示する改良も
React Ariaの実装読むぞ - Qiita Advent Calendar 2024 - Qiita
React Testing LibraryでのWAI-ARIAロールの活用事例
React Testing Libraryでの WAI-ARIAロールの活用事例