タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
公開日 : 2020年6月27日 カテゴリー : アクセシビリティ / 情報設計 (IA) ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェースであっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリーンリーダーなど) に伝達することができます。 アクセシビリティに関心のある制作者
WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 （その他、詳細については参考サイトをご
WAI-ARIA中級編 ロールの決まり方
前回の「WAI-ARIAを学ぶときに整理しておきたいこと」（以下、「前回の記事」と略）やYouTubeで生配信した「WAI-ARIA勉強会」で 要素には暗黙のロールをもつ role属性を使うことでロールを上書きできる 要素によって上書きできないロールがある と説明した。 しかし、上書きできないロールをrole属性で指定してしまったときに最終的にロールが何になるかの説明をしていなかったし、要素の条件次第によっては上書き可能なはずのロールが無効化されたり、ロールが変化したりすることに触れていなかった。今回はそこが仕様でどうなっているのか深堀りしてみたいと思う。 ロールの決定に影響するもの まず、簡単にロールがどういったものから決定されるのかをざっくりと最初にまとめる。 要素の種類（HTMLとしてのセマンティック） 属性 構造（先祖・子孫関係） これをまず念頭に置いて、仕様を読みすすめると理解が
この記事は 「Webアクセシビリティ Advent Calendar 2020」 10日目の記事です。（執筆が終わったのが11日目になってしまい申し訳ございません） 先日投稿したWebアクセシビリティ Advent Calendarの記事「キーボード操作を意識したHTML/CSSコーディング」は思いがけず大変な反響をいただきました。ありがとうございます。 今回はWeb制作において頻出度の高いアコーディオンをアクセシビリティを意識しながら作ってみたという「やってみた」系記事です。 今回の記事を書くにあたり、そめさんよりいくつかレビューを頂きました（ありがとうございます）。今回はそのレビューも含めて修正前と修正後も同時掲載します。 はじめに はじめに今回のアコーディオンのサンプルを掲載します。（サンプルではaria属性の付与はJSで行っています） この記事を書いた理由は WAI-ARIAの知識
このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、ARIA を使用する: ロール、ステート、プロパティをご覧ください。 alertdialog ロールの使用このテクニックは、alertdialog ロールの使用方法を示しています。 ARIA: alert ロールアラート (alert) ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりにアラートダイアログ (alertdialog) ロールを使用するべきです。 ARIA: application ロールアプリケーション (application) ロールは、要素と
WAI-ARIA presentation（none） ロールの仕様、aria-hidden=”true” との違い - WILLGATE TECH BLOG
こんにちは、開発ディレクターの横内です、腹筋してください。社内でほそぼそとアクセシビリティの布教活動に勤しんでいます。ウィルゲート Advent Calendar 2019 の 16 日、始まります。 presentation ロールは ARIA で定義されているロールの一つです。要素のロールへ presentation ロールを指定することで、要素がもつネイティブセマンティクスロールを上書きして、特にセマンティクスを持たない要素としてブラウザや支援技術から扱われるようにできます。 元々筆者は presentation ロールについてなんとなくの理解はしておりました。ただ、aria-hidden ステートを利用しても同じようなことを実現できる気がしていたため、「どちらを使えばよいのだろう？」という疑問がありました。presentation ロールへの正しい理解なしにはその疑問は晴れないでし
WAI-ARIA Cheat Sheet
Implicit Rolearia-activedescendantaria-atomicglobalaria-autocompletearia-busyglobalaria-checkedaria-colcountaria-colindexaria-colspanaria-controlsglobalaria-currentglobalaria-describedbyglobalaria-detailsglobalaria-disabledglobalaria-dropeffectglobalaria-errormessageglobalaria-expandedaria-flowtoglobalaria-grabbedglobalaria-haspopupglobalaria-hiddenglobalaria-invalidglobalaria-keyshortcutsglobalar
はじめに みなさんは、WAI-ARIAを知っていますか？ 私は、スクリーンリーダーでも読めるようにするため、aria-label を使ったり、 roleを使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。 ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、 いまいちわからないなと思っていませんでした。 なので今回は、調べたWAI-ARIAについて、まとめたので、ぜひご覧ください。 私の理解度は↓この位置です。 ご注意ください。 WAI-ARIA WAI-ARIAとは？ WAI-ARIAは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、アクセシビリティ向上の目的で、W3Cが定めた仕様です。 また、WAI-ARIAをつかうことで、HTMLで表現できない
WAI-ARIA勉強会
ウェブ技術「WAI-ARIA」特化のオンライン勉強会のライブ配信です。 Togetterまとめ: https://togetter.com/li/1847023 ※現在、字幕については修正対応中です。 アクセシビリティの向上に取り組む企業が増えきた中、制作や実装においてWAI-ARIAの知識が必要不可欠になってきました。しかし、いざWAI-ARIAを知って導入するものの中途半端に扱ってしまったせいで、アクセシビリティを悪化させてしまっていることが少なくありません。 基礎から、ブラウザやスクリーンリーダーなどの支援技術のサポート状況、実際のUIの実装、テストへの応用、そしてW3CやWHATWGの仕様策定はどうのようになっているのかまで、WAI-ARIA一点集中の勉強会を開催します。 02:02 オープニング 08:43 基礎 / ゆうてん 45:48 スクリーンリーダー / 辻勝利
2020年Webアクセシビリティアドベントカレンダー14日目の記事です。 先日HTMLリンターであるmarkuplintのバージョン1.3.0をリリースしました。今回追加された機能は主にwai-ariaというリントルールの追加で、WAI-ARIAとARIA in HTMLにおける role属性やaria属性に関するチェックをするルールです。 wai-ariaルールは次の場合に警告します。 仕様に存在しないロールを指定した場合
池田 泰延 on Twitter: "Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D"
Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D
React 18のuseIdでアクセシビリティ向上（WAI-ARIAのRelationship attributes） - Qiita
この記事の概要 React 18で新しくuseIdというhooksが使えるようになりました。 コンポーネントにWAI-ARIAを導入するにあたって、便利になると思ったのでいくつかのパターンを紹介します。 また、Qiita Engineer Festa 2022の「React 18、あなたならどう使いこなす？」への投稿記事でもあります。 記事を書こうと思った理由——useId登場以前の迷い 実例を紹介する前に、なぜこの記事を書こうと思ったかについて説明します。 例えばaria-labelledbyを使う場合、以下のようになります。 （コードはMDN Docsのaria-labelledbyのページより拝借） <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span> <span i
こんにちは。Webデザイナーの山田です。 とても暑い日々が続いていますが、皆さまいかがお過ごしでしょうか。 今年はマスクをつけて外出されることが殆どだと思います。しっかり水分を取って熱中症にならないよう、ご自愛くださいませ。 さて今回は、Webのアクセシビリティを考慮するうえで切り離せない存在である「WAI-ARIA」についてご紹介いたします。 個人的な振り返り・備忘録をかねた記事となっておりますが、何かの参考になりましたら幸いです。 Table of contentsWAI-ARIA（ウェイ エリア）とは暗黙のARIAセマンティクスWAI-ARIAを利用したコーディング例さいごにWAI-ARIA（ウェイ エリア）とは WAI-ARIAとは、「Web Accessibility Initiative – Accessible Rich Internet Applications」の頭文字を
タブ UI を素の TypeScript(JavaScript）と WAI-ARIA で実装する方法についてまとめました。 主に HTML ベースでサイトのコンテンツを運用更新したい場合や特定のライブラリやフレームワークに依存したくない場合で参考にしていただけるかと思います。 この記事で行うこと この記事では以下の言語や仕様を使ってタブ UI を作成します。特に WAI-ARIA の利用が実装のコアになります。WAI-ARIA に対応することで、アクセシブルなコンポーネント実装を目指します。 HTML CSS TypeScript(JavaScript) WAI-ARIA HTML マークアップ HTML ファイルを作成し、以下のようにマークアップします。コンポーネントのラッパーに特定の ID を付与します。ここではsample-tabとしました。また、パネルコンテンツID, role,
実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ�意識を持つための1アプローチ - Qiita
実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ�意識を持つための1アプローチ この記事は Webアクセシビリティ Advent Calendar 2019 の 14日目の記事です。 はじめに 2016年で新卒で入社し、今年9月までの3年半強ほど、ニコニコ生放送のUIデザインの開発をしていました。 UIデザインの責務としては、見た目やインタラクションの他、コンポーネントのHTML定義/CSS実装までやっていました。若干フロントエンドにも入り込む、デザイナーとしては珍しいケースだったかもしれません。 (登壇記事 => ログミー: コンポーネント指向のフロントエンド開発において、デザイナー×エンジニアの協業を通して学んだこと) ニコ生フロントエンドではアクセシビリティにもある程度配慮をしてHTML定義をしており、エンジニアさん-デザイナー共同でWebアクセシビリティ
この記事は『WAI-ARIA対応のタブ型UIを実装する方法』の続きです。 WAI-ARIAはアクセシビリティーの改善に役立つと先の記事で紹介しました。この記事ではWAI-ARIAに対応したReactでのタブのユーザーインタフェースを解説します。 サンプルをGitHubにアップしているので、デモとソースコードをご覧ください。 別ウインドウで再生する GitHubでコードを確認する 前提として、create-react-appを使って環境構築したものとします。 create-react-appを使っていなくても、記事「最新版で学ぶwebpack入門 - BabelでES2018環境の構築(Reactのサンプル付き)」で紹介しているようにwebpack等で環境構築されていても構いません。 Reactでのステート管理 実装の要素としてstateに選択されたタブのIDを保持することとします。 ▼ステ
↑ Jump to Table of Contents→ Pop Out Sidebar WAI-ARIA オーサリング・プラクティス 1.1 W3C ワーキング・グループ・ノート 2019年2月7日 このバージョン: https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/ 最後に公開された（最新の）バージョン: https://www.w3.org/TR/wai-aria-practices-1.1/ 編集者の最後（最新）の草案: https://w3c.github.io/aria-practices/ 前のバージョン: https://www.w3.org/TR/2018/NOTE-wai-aria-practices-1.1-20180726/ 編集者: Matt King (Facebook) JaEu
アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま
WAI-ARIA 再入門。 - Qiita
はじめに WAI-ARIA の読み方を答えられなかったので、 WAI-ARIA を学びなおす。 WAI-ARIA の読み方を答えられなかったそこのあなたも、この記事を読めばバッチリだろう。 ARIA とは ARIA とは、スクリーンリーダーのような支援技術に対して、各要素がどのような役割を持つものかを教え、支援技術が Web ページの内容をより正しく、より詳細に知れるようにするものだ。 ARIA を使うと、支援技術を使っているユーザに Web ページの適切な情報を伝えることができる。 ARIA を使う上で必要なのは、ロール、ステート、プロパティの3つだ。 これらについても説明しておく。 ロールとは ロールとは、role属性を使い、その要素に役割を与えるものだ。 ロールは不変でなければならない。どうしても動的にロールを変更したい場合は、ロールを変更したい要素とその子孫要素を削除し、それらを新
AccessibilityGuidesAccessibility information for web authorsAccessibility: What users can do to browse more safelyAn overview of accessible web applications and widgetsKeyboard-navigable JavaScript widgetsMobile accessibility checklistUnderstanding the Web Content Accessibility GuidelinesCognitive accessibilityAccessibility and Spacial PatternsWeb Accessibility: Understanding Colors and LuminanceW
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップを進化させる WAI-ARIA の基本
WAI-ARIAを学ぶときに整理しておきたいこと
WAI-ARIA 準拠には CSS Modules が最適という話
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
WAI-ARIA 実装の5つのルール | Accessible & Usable
今日から始める負担にならないWAI-ARIA - Qiita
アクセシビリティを意識したアコーディオンを作ってWAI-ARIAを学んでみたお話
WAI-ARIA ロール - アクセシビリティ | MDN
【アクセシビリティ】WAI-ARIAを完全に理解した。 - Qiita
markuplintのWAI-ARIA向けルールとこれから
WAI-ARIAを利用したHTMLコーディング | Will Style Inc.｜神戸にあるウェブ制作会社
Vanilla TypeScriptとWAI-ARIAで作るタブUI（タブ切り替え）
WAI-ARIA対応のタブ型UIの作り方（React編） - ICS MEDIA
WAI-ARIA 1.0 Authoring Practices
WAI-ARIA(ウェイ エリア)とは？初めて制作する方向けに解説！ | 東京のホームページ制作 / WEB制作会社 BRISK
WAI-ARIA Roles - Accessibility | MDN
www.yomiuri.co.jp
news.livedoor.com
ameblo.jp/e9srj6
businessnetwork.jp
yuriko0.st.coresv.net
sunagoya.com