27. 27 代替テキスト決定ツリー 参考：https://www.w3.org/WAI/tutorials/images/decision-tree/ 文字がある リンク／ボタン 意味がある 隣接するテキストと重複 装飾画像 機能を示すグラフィックと文字 文字画像 alt = ”” alt = “日本全体の店舗マップ” alt = “北海道” alt = “電話番号” alt = “イラスト：年老いた灰色の猫” alt = “イラスト：猫の不安そうな眼差し” alt = “星二つ” alt = ”” alt = ”” alt = “ホーム” alt = “印刷” alt = “ホーム” alt = “ホーム” 隣接するテキストと重複 印象や感情を伝える画像 ページデザインの一部 alt = ”” 隣接するテキストの補足 テキストで説明されていない内容 シンプルなグラフィック／写真 シンプ

2018年9月に始まった、『Readableな夜』の第２回に参加してきました。 『Readableな夜』とは、「Web アクセシビリティに関する情報共有を中心に、より多くの人へ Web コンテンツを届ける」ための方法を考えていく勉強会です。 日時：2018年11月5日（土）19:30〜21:00 場所：岡山大学内 岡山大インキュベータ2F 会議室 講師：澤田望さん 会場は、岡山大学の中の会社が数社入っているインキュベーターというビルの2Fです。 平日ということもあり、みなさんのお仕事終わりを待って19時30分スタートです。 今回のテーマは、「代替テキスト」 画像に対する代替テキスト、すなわちimg要素のalt属性を考えていきました。 ワークショップ：「代替テキストを書いてみよう」 まず、宗安沙希恵さん司会で、ワークショップが始まりました。 5つのお題（サイトのイラストや写真、図）に代替テキ

WAI-ARIAの中で、コンテンツが展開されているかどうかの状態を表すaria-expandedは、WAI-ARIAの中でもよく使われている属性のうちの一つ[注1]ですが、誤った使い方をみかけることも少なくありません。また私自身も間違った理解のまま使用していた時期もありました。 [注1] : 出典 Usage of ARIA attributes - Analysis - Discuss - HTTP Archive そこでaria-expandedのよく見かける間違いと、仕様に基づいた正しい使い方をまとめました。 間違いその1：aria-hiddenとaria-expandedを混同する aria-expanded は要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。ステートです。要素そのものが隠れているかどうかを示すaria-hidden

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

はじめに クラスメソッド大阪オフィスで開催されたモバイルメソッドに登壇させていただきました。モバイルメソッドは毎月１回の頻度で大阪で行われる、モバイルに関する勉強会です。 私は、アクセシビリティに関する経験が15年程度ありますので、今回、スマートフォンアプリのアクセシビリティについて、基礎的な内容からガイドラインの一部などについてご紹介しました。 登壇資料 主な内容 アクセシビリティとは何か 自分たちが一生懸命に開発したアプリが、一部の利用者には「まったく使えない」可能性があることについて考えましょう。 より多くのユーザーが、より多くの利用環境から、より多くの場面や状況で、アプリを使えるようにすること インパクトが大きいのは障害者、高齢者だが、普段メガネをかけている人のメガネが壊れたり、効き手が骨折したなどの「一時的な障害」、音が出せないシチュエーションや、洗い物などで手が使えないなどの「

みなさんこんにちは！UI開発者の宇賀です。 昨夜Twitterをぼーっと眺めていましたら、非常に興味深いニュースが飛び込んできました。 Accessible Rich Internet Applications 1.2 suite published, by Joanmarie Diggs https://t.co/j9ivdFW74E — W3C (@w3c) 2018年7月19日 WAI-ARIA 1.2の草案が先日公開されたとのこと。何が変わったのか気になりますよね...！早速見ていきましょう！ WAI-ARIA 1.1の勧告から変更点についてを見てみると、次のように書かれていました。 C.1 Substantive changes since the WAI-ARIA 1.1 Recommendation 31-May-2018: Add blockquote, caption,

2018-07-01（日）に大阪JUSO Coworkingにて行われた「D2Dアクセシビリティ勉強会 2018・夏」でのスライドです。 【簡単マニュアルPDF版は以下】 http://bit.ly/d2d_VO_TBRead less

実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ

公開日 : 2018年6月8日 (2020年4月16日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.1 が、2018年6月5日に正式な Recommendation (勧告) になりました。旧バージョン (2.0) で十分にカバーできていなかったとされる領域 (ロービジョン、モバイル、認知/学習障害への配慮) が強化されています。 この勧告のひとつ前の段階として、先に「WCAG 2.1 Proposed Recommendation (勧告案)」という記事を書きましたが、そこで挙がっていた達成基準と内容的には同じです。(細かいところでは、新達成基準 2.5.3 で若干の言い回しの変更がありますが、文意には影響ありません。) なお、旧バージョン (2.0) と

Inclusive Design Patterns （日本語版は「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン 」）という本を買って読んでいるんですけど、その中で「技術的に有効な手段でガイドラインに沿った実装をしても、必ずしもユーザ体験が良くなるわけではない」といったことが書かれていました。その通りだと思います。 ガイドラインや標準に準拠することも大切ですが、作ったウェブサイトが「使えるもの」になっているかは別の話です。「インクルーシブ」なサイトに出来ているかどうか、最終的にはユーザがサイトにアクセスするのと同じ方法でテストしてみないとわからないこともたくさんあります。 そういった意味で、ウェブ制作者もスクリーンリーダーやキーボード操作でのウェブ閲覧をある程度はできるようになっておくべきだと思います。VoiceOver

先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー

公開日 : 2018年5月17日 (2021年7月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 2018年5月17日の「Global Accessibility Awareness Day」に、神戸で開催された「アクセシビリティの祭典 2018」に登壇させていただき、「インクルーシブなペルソナ拡張 (Inclusive Persona Extension)」というデザイン支援ツールを発表しました。当日のプレゼンテーションスライドは、SlideShare でご覧いただけます。 背景 (なぜこのツールを作ったか？) 「インクルーシブなペルソナ拡張」(以下「このツール」) は、ウェブサイトやウェブアプリケーションの設計プロセスにおいて、アクセシビリティを考慮に入れることを促進するためのツールです。 ユーザー中心設計 (UCD) / 人間中心設計 (HCD) の手法を用いて

Re: Webアクセシビリティの「はじめの一歩」をスクリーンリーダーの使い方を覚えることにしてはどうだろう？ 2018年5月15日 著 短いお返事：覚えないまでも、「はじめの一歩」としてスクリーンリーダーの存在や使用法を知るのは、良いと思います。同時に、二歩目をどう踏み出すかがより重要だと思います。 以下は、長いお返事。Webアクセシビリティの「はじめの一歩」をスクリーンリーダーの使い方を覚えることにしてはどうだろう？ | Rriverを読みました。ええと、まずは自分の書いた記事に言及、リンクしてくださって、ありがとうございます。著者の竜さんは、 Webアクセシビリティを、いまより一層普及させるには、ウェブ制作者の方々の90%以上が、スクリーンリーダー（読み上げ機能）を使えるレベルにしていかないといけないんじゃないかなぁと感じています。 とお書きになっています。「使えるレベル」というのが、

突然ですが、スクリーンリーダーって使ったことありますか？ ちょっと疑問に思ったので、Twitterでウェブ制作に関わる方々（デザイナー、エンジニア、ディレクターなど）に「iOSやAndroidの読み上げ機能って使えますか？」という質問をしてみた ら、実に87%の方が「使えない（試したことはある）（13%）」「試したことない（74%）」ということでした。 ウェブ制作に関わる方々（デザイナー、エンジニア、ディレクターなど）に質問です！？ iOSやAndroidの読み上げ機能って使えますか？ — ryo watanabe | 渡辺竜 (@rriver) May 7, 2018 ※アンケートにご協力いただいた方々、本当にありがとうございました！ 100件の回答なので、これを「ウェブ制作者全般」と見るのは微妙ですけど、このアンケートの回答を見る限りではウェブ制作に関わる方々でもスクリーンリーダーはあ

この164万人を構成する年齢層ですが、視覚障害者の半数は70歳以上、60歳代は22％、60 歳以上で合計 72％を占めているという推定がなされています。厚生労働省の調査結果に出ている約31.2万人の内訳でも60歳以上が76.9%を占めていますので、母数は変われど、視覚障害者の中で高齢者が占める割合が非常に高いことは変わりないようです。 厚生労働省調査（31万人）と日本眼科医会の推定値（164万人）に大きな数値の差が生じている理由ですが、後者が国勢調査の元に算出した日本の人口を母数に、各種疫病関係資料から推定した有病率(1.28%)から算出した推定値であるということが1つの理由でしょう(母数が大きいため、0.1%でも変わると10万人単位で変わる)が、加えて以下の①と②が主な要因だと思われます。 ①前者が身体障害者手帳の所持者数の数値であり、後者がそれに限定していない ②前者（身体障害福祉法が

2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod

入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017

この記事は、Web Accessibility Advent Calendar 2017　2日目の記事です。 私が疑問に思った事をA11YJ Slackでご教示いただいた内容になるのですが、こちらを見ていないかたにもぜひ読んでもらいたいと思い記事にしました。 タイトルにあるようにA Responsive Accessible Tableの記事を読んでの感想なのですが、「Going Responsive > Adjusting to Viewport Size > Column Headers と Some Sort of Cell Label」の内容はアクセシブルではないと思いました。 Column Headers まず、table要素をCSSでdisplay: blockにするとスクリーンリーダーがテーブルと認識しなくなる件についてですが、実際にWindows7/NVDA2017.3jp