ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた / masuP.net
React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。 Javascript, ES2016, React, WAI-ARIA とも確信を持ってるわけではなく、いずれも調べながらの実装なので、マサカリツッコミやアドバイス歓迎です。 要件 アコーディオンUIは、コンテンツの表示トリガー（アコーディオンヘッダー）とコンテンツ（アコーディオンパネル）がグルーピングされたものが（主に縦方向に）並んでいるものを指していることが多いと思いますが、とりあえず次の要件で実装しました。 アコーディオンヘッダーをクリックでアコーディオンパネルの開閉を切り替え アコーディオンパネルの開閉の初期状態を設定可能 すべて開く / すべて閉じる ボタンの実装（ボタンを表示させるかは選択可能） フォーカスマネジメントする（隠れているアコーディオンパネル内の要素はフォーカスされない） キーボ
Accessibility Object Modelの日本語訳とHTML5 Conference 2018登壇 | masuP.net
ブラウザが構築する支援技術とやりとりするためのアクセシビリティツリーを操作できるAPI、Accessibility Object ModelというAPIが WICG で議論されていて、すでにいくつかのブラウザでは実験的な実装もされています。 AOMは、断片的に読むことはあったのですが、今月の25日（日）に開催されるHTML5 Conference 2018でウェブのセマンティクスやマークアップについて登壇する機会をいただきいたということもあり、きちんと読み込むついでに日本語に訳しはじめました。 The Accessibility Object Model (AOM) 日本語訳 | aom 日本語訳したのは、仕様と解説ですが、このAOMのリポジトリ内での仕様の策定は今後なされなさそうなので、仕様を見る必要性は薄いと思います。 ウェブアクセシビリティ基盤委員会(WAIC)の翻訳ワーキンググルー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
