role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのかHTMLアクセシビリティWAI-ARIA 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべくわかりやすい形で、WAI-ARIAそのものや、その中で登場する role 属性や、名前に aria- のプレフ
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
【日本製】ARIA SPS-2400Wg 桜柄ギターストラップレビュー！春を愛する和柄好きホイホイ！【安い】 | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料 https://fortee.jp/frontend-conf-hokkaido-2024
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
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 AGB-S ギタースタンドカバーレビュー！お手軽価格で塗装を保護!!【ラッカー対応ブラ】 | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
アクセシビリティを考慮したマークアップをした経験がある方は、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 HAS-28 ギターケース用和柄湿度調整シートレビュー！湿度84％で効果を検証!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
【国産和柄】ARIA SPS-2400KA 唐草猫柄ギターストラップレビュー！縁起物効果で運気爆上げ！？ | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
【長持ち】Aria Pro II HYPER TOUCH ギターピックレビュー！耐摩耗性に優れたポリアセタール製!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
【日本製】ARIA SPS-2400Wb レビュー！艶やかな牡丹の和風花柄ギターストラップ!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
【日本製】ARIA SPS-2400PA レビュー！パンダ柄がかわいいモノトーンギターストラップ!! | ギターいじリストのおうち
生涯5000本以上のギターをいじり続けたきた管理人が実測データを交え世界一詳しいギターレビューやギターパーツ情報をお届け！
JSer.info #674 - date-fns v3.0.0がリリースされました。 Release v3.0.0 · date-fns/date-fns ESMとCJSのdual pacakgeに変更、それぞれのファイルはnamed exportするように変更されています。 また、TypeScriptの型を改善に合わせて、引数の数のRuntime Checkを無くしてType Checkのみに変更されています。 そのほかには、intervalオプションの負数をサポート、IEのサポートを終了などの変更も含まれています。 Firefox 121がリリースされました。 Firefox 121.0, See All New Features, Updates and Fixes Firefox 121 for developers - Mozilla | MDN <iframe loading
ARIA SPS-2400Wc 和柄ギターストラップレビュー：美しい菊が魅力の日本製品を徹底解説 | ギターいじリストのおうち
美しい菊を中心とした日本の花々が描かれた ARIA SPS-2400Wc 和柄ギターストラップをレビュー！黒を基調とした艶を感じる図柄のデザインが大人な雰囲気満点！着物などの和装にも良く似合う安心の国産・日本製品です！
こんにちは！サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。 このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。 今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提 Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。 Testing Libraryでは要素取得にWAI-ARIA ロールを利用することを推奨しています。（ロールは視覚/マウス ユーザーだけでなく、支援技術を使用するユーザーのエクスペリエンスを反映するため） 実はWAI-ARIA ロールには66個のロールがありますが、実際によくWeb開発で使われるUIにどのようなロールが付与されているのかを知りたく
“共通化”で失敗したモデリング実例 / Modeling examples of failures due to "commonization
雨宮天「永遠の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 のドラッグアンドドロップ
5分で分かる React Aria の 良いところ・これからなところ
拡張性に優れた React Aria のコンポーネント設計
React Aria で実現する次世代のアクセシビリティ
aria-labelとaria-labelledbyを併用する場合とは
aria-labelでなんでも解決しようとしない - Qiita
「Opera」が「Google Cloud」と提携、AIモデル「Gemini」を統合へ／AI機能「Aria」に画像を理解する力。被写体や撮影場所を調べたり、OCRとして機能
aria-labelで始める、アクセシビリティ改善活動
「Opera」開発版がAIベースのWebブラウザーに ～Android版は声で対話する機能も／生成AI「Aria」を軸にWebブラウザーを再構築
2023-12-23のJS: date-fns 3.0.0、Firefox 121、React Aria Components 1.0.0、Catalyst
「Opera」の生成AI「Aria」が強化 ～閲覧中のWebページに関する質問に回答可能に／プロンプト入力ポップアップ上に回答を表示する改良も
React Testing LibraryでのWAI-ARIAロールの活用事例
React Testing Libraryでの WAI-ARIAロールの活用事例