並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 31 件 / 31件

新着順 人気順

WAIの検索結果1 - 31 件 / 31件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

WAIに関するエントリは31件あります。 アクセシビリティaccessibilitytechfeed などが関連タグです。 人気エントリには 『マークアップを進化させる WAI-ARIA の基本』などがあります。
  • マークアップを進化させる WAI-ARIA の基本

    マークアップを進化させる 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 開いてい

      マークアップを進化させる WAI-ARIA の基本
    • WAI-ARIAを学ぶときに整理しておきたいこと

      結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ!すげえ!使ってみよう!」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の

        WAI-ARIAを学ぶときに整理しておきたいこと
      • WAI-ARIA 準拠には CSS Modules が最適という話

        CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。

          WAI-ARIA 準拠には CSS Modules が最適という話
        • アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA

          ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するための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」と読

            アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
          • WAI-ARIA 実装の5つのルール | Accessible & Usable

            公開日 : 2020年6月27日 カテゴリー : アクセシビリティ / 情報設計 (IA) ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェースであっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリーンリーダーなど) に伝達することができます。 アクセシビリティに関心のある制作者

              WAI-ARIA 実装の5つのルール | Accessible & Usable
            • 今日から始める負担にならないWAI-ARIA - Qiita

              WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス(意味) を属性で補完することができ、 支援技術(スクリーンリーダーなど)を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 (その他、詳細については参考サイトをご

                今日から始める負担にならないWAI-ARIA - Qiita
              • WAI-ARIA中級編 ロールの決まり方

                前回の「WAI-ARIAを学ぶときに整理しておきたいこと」(以下、「前回の記事」と略)やYouTubeで生配信した「WAI-ARIA勉強会」で 要素には暗黙のロールをもつ role属性を使うことでロールを上書きできる 要素によって上書きできないロールがある と説明した。 しかし、上書きできないロールをrole属性で指定してしまったときに最終的にロールが何になるかの説明をしていなかったし、要素の条件次第によっては上書き可能なはずのロールが無効化されたり、ロールが変化したりすることに触れていなかった。今回はそこが仕様でどうなっているのか深堀りしてみたいと思う。 ロールの決定に影響するもの まず、簡単にロールがどういったものから決定されるのかをざっくりと最初にまとめる。 要素の種類(HTMLとしてのセマンティック) 属性 構造(先祖・子孫関係) これをまず念頭に置いて、仕様を読みすすめると理解が

                  WAI-ARIA中級編 ロールの決まり方
                • アクセシビリティを意識したアコーディオンを作ってWAI-ARIAを学んでみたお話

                  この記事は 「Webアクセシビリティ Advent Calendar 2020」 10日目の記事です。(執筆が終わったのが11日目になってしまい申し訳ございません) 先日投稿したWebアクセシビリティ Advent Calendarの記事「キーボード操作を意識したHTML/CSSコーディング」は思いがけず大変な反響をいただきました。ありがとうございます。 今回はWeb制作において頻出度の高いアコーディオンをアクセシビリティを意識しながら作ってみたという「やってみた」系記事です。 今回の記事を書くにあたり、そめさんよりいくつかレビューを頂きました(ありがとうございます)。今回はそのレビューも含めて修正前と修正後も同時掲載します。 はじめに はじめに今回のアコーディオンのサンプルを掲載します。(サンプルではaria属性の付与はJSで行っています) この記事を書いた理由は WAI-ARIAの知識

                    アクセシビリティを意識したアコーディオンを作ってWAI-ARIAを学んでみたお話
                  • WAI-ARIA ロール - アクセシビリティ | MDN

                    ARIA ロールは、コンテンツに意味づけ行い、スクリーンリーダーなどのツールが、その種類のオブジェクトに対するユーザーの期待に一致する方法でオブジェクトを表示し、操作に対応できるようにします。 ARIA ロールは、 HTML にネイティブに存在しない要素や、存在しててもブラウザーの完全な対応がまだない要素を記述するために使用することができます。 既定では、 HTML の多くの意味づけ要素はロールを持っています。例えば、 <input type="radio"> は "radio" ロールを持ちます。 HTML の意味づけがない要素はロールを持ちません。意味を追加していない <div> と <span> は null を返します。 role 属性で意味づけを提供することができます。 ARIA ロールは role="role type" を使用して HTML 要素に追加します。ロールの中には、

                      WAI-ARIA ロール - アクセシビリティ | MDN
                    • WAI-ARIA presentation(none) ロールの仕様、aria-hidden=”true” との違い - WILLGATE TECH BLOG

                      こんにちは、開発ディレクターの横内です、腹筋してください。社内でほそぼそとアクセシビリティの布教活動に勤しんでいます。ウィルゲート Advent Calendar 2019 の 16 日、始まります。 presentation ロールは ARIA で定義されているロールの一つです。要素のロールへ presentation ロールを指定することで、要素がもつネイティブセマンティクスロールを上書きして、特にセマンティクスを持たない要素としてブラウザや支援技術から扱われるようにできます。 元々筆者は presentation ロールについてなんとなくの理解はしておりました。ただ、aria-hidden ステートを利用しても同じようなことを実現できる気がしていたため、「どちらを使えばよいのだろう?」という疑問がありました。presentation ロールへの正しい理解なしにはその疑問は晴れないでし

                        WAI-ARIA presentation(none) ロールの仕様、aria-hidden=”true” との違い - WILLGATE TECH BLOG
                      • 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を完全に理解した。 - Qiita

                          はじめに みなさんは、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を完全に理解した。 - Qiita
                          • 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 スクリーンリーダー / 辻勝利

                              WAI-ARIA勉強会
                            • 必ず前売り券を買って行こう!よみうりランド・プールWAI お盆の混雑レポート2023年改訂版 - 子供と接するのが苦手な父親の記録 kazusanuchisan’s diary

                              子供の頃、夏休みは一時間20円の市民プールにほぼ毎日通っていたかずさんです。 さぁ、夏真っ盛りです。 年齢的に体にガタが来はじめ、いろいろなことが体力的に厳しくなりつつある今日この頃。 逆に子供は日々大きく育って行っています。 「何時まで真夏のプールを愉しむことができるだろうか。」 「子供は何歳まで一緒にプールに行ってくれるのだろうか」 なんてことを考えてしまいます。 そんなマイナス思考で真夏を満喫できるのでしょうか。 プロローグ ~ 読み飛ばし推奨ww プールWAIに行く時に一番気になる朝は何時に行けば良いのか問題 よみうりランド・プールWAIの前売り券は絶対に事前購入すべき よみうりランド前駅からバスに乗る時点で列が発生していた よみうりランド・プールWAIに到着したのは開園時間3分過ぎ よみうりランド・プールWAIへの訪問時間の参考情報 今どきのプールを楽しむのにはサンシェードは必要

                                必ず前売り券を買って行こう!よみうりランド・プールWAI お盆の混雑レポート2023年改訂版 - 子供と接するのが苦手な父親の記録 kazusanuchisan’s diary
                              • markuplintのWAI-ARIA向けルールとこれから

                                2020年Webアクセシビリティアドベントカレンダー14日目の記事です。 先日HTMLリンターであるmarkuplintのバージョン1.3.0をリリースしました。今回追加された機能は主にwai-ariaというリントルールの追加で、WAI-ARIAとARIA in HTMLにおける role属性やaria属性に関するチェックをするルールです。 wai-ariaルールは次の場合に警告します。 仕様に存在しないロールを指定した場合

                                  markuplintのWAI-ARIA向けルールとこれから
                                • Ho-Wai

                                  むん

                                    Ho-Wai
                                  • 池田 泰延 on Twitter: "Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D"

                                    Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D

                                      池田 泰延 on Twitter: "Chromeに搭載予定のアクセシビリティの機能が便利。 開発者ツールで要素を調べるだけで、アクセシビリティの情報を確認できます。 ・読み上げ文字情報 ・role属性 ・キーボードフォーカス受付可否 今後、WAI-ARIA等の適… https://t.co/GvgZw6nX6D"
                                    • Wasmer takes WebAssembly libraries mainstream with WAI · Blog · Wasmer

                                      Back to articlesWasmer takes WebAssembly libraries mainstream with WAIImport WebAssembly libraries just like any other dependency in your project Integrating with other languages and distributing binaries has always raised the WebAssembly's barrier to entry for the average developer, and at Wasmer our goal is to make trivial creating universal libraries that work anywhere. Today, we are happy to a

                                        Wasmer takes WebAssembly libraries mainstream with WAI · Blog · Wasmer
                                      • 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

                                          React 18のuseIdでアクセシビリティ向上(WAI-ARIAのRelationship attributes) - Qiita
                                        • WAI-ARIAを利用したHTMLコーディング | Will Style Inc.|神戸にあるウェブ制作会社

                                          こんにちは。Webデザイナーの山田です。 とても暑い日々が続いていますが、皆さまいかがお過ごしでしょうか。 今年はマスクをつけて外出されることが殆どだと思います。しっかり水分を取って熱中症にならないよう、ご自愛くださいませ。 さて今回は、Webのアクセシビリティを考慮するうえで切り離せない存在である「WAI-ARIA」についてご紹介いたします。 個人的な振り返り・備忘録をかねた記事となっておりますが、何かの参考になりましたら幸いです。 Table of contentsWAI-ARIA(ウェイ エリア)とは暗黙のARIAセマンティクスWAI-ARIAを利用したコーディング例さいごにWAI-ARIA(ウェイ エリア)とは WAI-ARIAとは、「Web Accessibility Initiative – Accessible Rich Internet Applications」の頭文字を

                                            WAI-ARIAを利用したHTMLコーディング | Will Style Inc.|神戸にあるウェブ制作会社
                                          • 【アクセシビリティ】WAI-ARIA で指定できる属性の全部をまとめてみた。 - Qiita

                                            <!-- 〇〇の部分に役割を記入します。 --> <div role="〇〇">...</div> <!-- 例: mainの役割の場合 --> <div role="main">...</div> 抽象役割 抽象役割は、一般的な役割概念を定義する目的で使われます。そのため、コンテンツに抽象役割を使用してはいけません。 command アクションを実行するが入力データを受信しないウィジェットのフォーム。 composite ナビゲーション可能な子孫または所有する子を含むことができるウィジェット。 input ユーザー入力を許可するウィジェットの一般的なタイプ。 landmark ナビゲーションのランドマークとして意図されるページの領域。 range ユーザーによって設定可能な値の範囲を表す入力。 roletype この分類で他のすべての役割が継承する基本役割。 section 文書またはア

                                              【アクセシビリティ】WAI-ARIA で指定できる属性の全部をまとめてみた。 - Qiita
                                            • 年齢軸で首都圏にある3つのプールを検証(川越水上公園プール・レインボープール・プールWAI)2023改訂版 - 子供と接するのが苦手な父親の記録 kazusanuchisan’s diary

                                              子供時代に通ったプールには必ず2時間の滞在だったかずさんです。 「夏休み」と言えばとにかくプール。 家から少し離れたところに市民プールがあるのですが、夏休み期間は正に「激込み」 入場規制がされており、2時間待ちなんていうこともざらです。 夏休み時期は夕方に行って混雑を避けるしか術がありません。 また、そこは屋内プールということもあり「夏休み」はなるべく外の大きなプールに行っています。 勝手に年齢軸で屋外プールを検証してみた 【1歳~4歳の幼児期に適したプール】 【4歳~6歳の幼少期に適したプール】 【6歳~10歳 小学校低学年に適したプール】 【10歳~12歳 小学校高学年に適したプール】 【12歳以上 プールも大人の仲間入り】 【番外編 その1 お酒】 【番外編 その2 清潔感】 【番外編 その3 日陰】 【番外編 その4 駅からの移動】 勝手に年齢軸で屋外プールを検証してみた 行ったこ

                                                年齢軸で首都圏にある3つのプールを検証(川越水上公園プール・レインボープール・プールWAI)2023改訂版 - 子供と接するのが苦手な父親の記録 kazusanuchisan’s diary
                                              • Vanilla TypeScriptとWAI-ARIAで作るタブUI(タブ切り替え)

                                                タブ UI を素の TypeScript(JavaScript)と WAI-ARIA で実装する方法についてまとめました。 主に HTML ベースでサイトのコンテンツを運用更新したい場合や特定のライブラリやフレームワークに依存したくない場合で参考にしていただけるかと思います。 この記事で行うこと この記事では以下の言語や仕様を使ってタブ UI を作成します。特に WAI-ARIA の利用が実装のコアになります。WAI-ARIA に対応することで、アクセシブルなコンポーネント実装を目指します。 HTML CSS TypeScript(JavaScript) WAI-ARIA HTML マークアップ HTML ファイルを作成し、以下のようにマークアップします。コンポーネントのラッパーに特定の ID を付与します。ここではsample-tabとしました。また、パネルコンテンツID, role,

                                                  Vanilla TypeScriptとWAI-ARIAで作るタブUI(タブ切り替え)
                                                • Understanding WCAG 2.1 | WAI | W3C

                                                  Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria. They are informative, not part of the "normative" WCAG standard. For information, see About WCAG Understanding Documents. Date: Updated 20 June 2023. Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Alastair Campbell, Charles Ada

                                                  • 実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ�意識を持つための1アプローチ - Qiita

                                                    実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ�意識を持つための1アプローチアクセシビリティWAI-ARIA この記事は Webアクセシビリティ Advent Calendar 2019 の 14日目の記事です。 はじめに 2016年で新卒で入社し、今年9月までの3年半強ほど、ニコニコ生放送のUIデザインの開発をしていました。 UIデザインの責務としては、見た目やインタラクションの他、コンポーネントのHTML定義/CSS実装までやっていました。若干フロントエンドにも入り込む、デザイナーとしては珍しいケースだったかもしれません。 (登壇記事 => ログミー: コンポーネント指向のフロントエンド開発において、デザイナー×エンジニアの協業を通して学んだこと) ニコ生フロントエンドではアクセシビリティにもある程度配慮をしてHTML定義をしており、エンジニアさん-デザイ

                                                      実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ�意識を持つための1アプローチ - Qiita
                                                    • WAI-ARIA対応のタブ型UIの作り方(React編) - ICS MEDIA

                                                      この記事は『WAI-ARIA対応のタブ型UIを実装する方法』の続きです。 WAI-ARIAはアクセシビリティーの改善に役立つと先の記事で紹介しました。この記事ではWAI-ARIAに対応したReactでのタブのユーザーインタフェースを解説します。 サンプルをGitHubにアップしているので、デモとソースコードをご覧ください。 別ウインドウで再生する GitHubでコードを確認する 前提として、create-react-appを使って環境構築したものとします。 create-react-appを使っていなくても、記事「最新版で学ぶwebpack入門 - BabelでES2018環境の構築(Reactのサンプル付き)」で紹介しているようにwebpack等で環境構築されていても構いません。 Reactでのステート管理 実装の要素としてstateに選択されたタブのIDを保持することとします。 ▼ステ

                                                        WAI-ARIA対応のタブ型UIの作り方(React編) - ICS MEDIA
                                                      • サメット島パート② Ao Wai(アオワイビーチ) Samet Ville Resort - P.S.Samphran

                                                        タイのビーチに行きました。。。サメット島/アオワイビーチ APR'2019 この年のソンクランは元々クッド島に行く予定を立てていましたが、3月頃に女房の体調が悪くなり全てキャンセル。 4月に入りだいぶ良くなったのでどこかビーチへ!と考えたときに、何かあった時の為にあまり本島から離れていない島かどこか慣れたところが安心⇒そしてサメット島に決定。 サメット島ではほぼアオチョーにしてますが、直前だったためバンガローがとれず。。。 www.pssamphran.com 過去にアオウォンドゥアンに泊まったこともありますが、ちょっとソンクラン時期にあそこは賑やか過ぎます。 そこで宿が取れたのがこのビーチだったのでアオワイに初上陸しました。 タイのビーチに行きました。。。サメット島/アオワイビーチ アクセス 前泊におススメ-【Baan khun yaai mai khun ta】- 泊 Samet Vi

                                                          サメット島パート② Ao Wai(アオワイビーチ) Samet Ville Resort - P.S.Samphran
                                                        • WAI-ARIA 1.0 Authoring Practices

                                                           ↑ 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

                                                          • WAI-ARIA(ウェイ エリア)とは?初めて制作する方向けに解説! | 東京のホームページ制作 / WEB制作会社 BRISK

                                                            アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか?あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま

                                                              WAI-ARIA(ウェイ エリア)とは?初めて制作する方向けに解説! | 東京のホームページ制作 / WEB制作会社 BRISK
                                                            • WAI-ARIA 再入門。 - Qiita

                                                              はじめに WAI-ARIA の読み方を答えられなかったので、 WAI-ARIA を学びなおす。 WAI-ARIA の読み方を答えられなかったそこのあなたも、この記事を読めばバッチリだろう。 ARIA とは ARIA とは、スクリーンリーダーのような支援技術に対して、各要素がどのような役割を持つものかを教え、支援技術が Web ページの内容をより正しく、より詳細に知れるようにするものだ。 ARIA を使うと、支援技術を使っているユーザに Web ページの適切な情報を伝えることができる。 ARIA を使う上で必要なのは、ロール、ステート、プロパティの3つだ。 これらについても説明しておく。 ロールとは ロールとは、role属性を使い、その要素に役割を与えるものだ。 ロールは不変でなければならない。どうしても動的にロールを変更したい場合は、ロールを変更したい要素とその子孫要素を削除し、それらを新

                                                                WAI-ARIA 再入門。 - Qiita
                                                              • WAI-ARIA Roles - Accessibility | MDN

                                                                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

                                                                  WAI-ARIA Roles - Accessibility | MDN
                                                                1

                                                                新着記事