ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
視覚障害のある方とプログラミングをする｜【アカウント移行済】KazuMax(Kazuma Saito)
サイボウズ デザイン&リサーチ の西藤（さいとう）です。 私は、Poca11y（ポカリ）というチームで、全盲やロービジョンの方と一緒に、プログラミングをはじめいろんな活動をしています。 Poca11y（ポカリ）チームとは サイボウズ デザイン&リサーチの中にあるチームの1つで、「アクセシビリティ（A11y）」や「研究開発（PoC）」に関する活動を専門的に行うチームです。 （PoC + A11y = Poca11y = ポカリ）というネーミングですこの記事は、一緒にプログラミングをする中で、気づいたことをまとめてみました。 「視覚障害のある方と一緒にプログラミングをする」と言われたら、あなたはどのようなことを考えますか？私は、こんなことを考えていました。 『専用エディタを用意しないといけない？』 『自分が書いている内容を全部読み上げないと伝わらない？』 実際働いてみると、この考えていたこと
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
WAI-ARIAをマークアップ以外の視点から考える - Qiita
はじめに 前から気になっていたWAI-ARIA（ウェイアリア）。 HTML5 Conference 2018に参加して、WAI-ARIAをマークアップ以外の視点から掘ってみたいと思ったので記事を書いてみようと思いました。 基本的内容からつらつら書いてみています。大まかな流れが頭の中に入りやすいように、細かい専門用語は控え目にしてみています。 WAI-ARIAってなんですか？ アクセシビリティ関連の技術 セマンティクスを補強する ⇒ WAI-ARIAはHTMLタグだけでは表現できない。セマンティクスを補強してくれる。 WAI-ARIAが気になってた理由 状態を表す属性とかあって、js, cssのセレクタとして利用できたら便利！ [is-selected]クラスを付与するより[aria-selected]属性を付与して状態を表現できたほうがコードが読みやすそう。 →やってみたーい！ が引き金
How to Make Accessible Web Components — a Brief Guide — SitePoint
This article was peer reviewed by Mallory van Achterberg. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In a previous article I demonstrated how to create a multiselect web component. In the comments section of that article, readers touched on the very important subject of web component accessibility. Undoubtedly, for today’s web it’s vital to be acce
「障害者差別解消法」施行 | Accessible & Usable
公開日 : 2016年4月1日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、2016年4月1日より、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が施行されます。 法律全文、基本方針、その他関連資料については、内閣府ウェブサイトの「障害を理由とする差別の解消の推進」ページから参照することができます。 この法律は、行政機関のみならず、民間の事業者も対象となります (障害者差別を防ぐための「合理的配慮」が求められます)。また、合理的配慮の基礎のひとつとして「情報アクセシビリティ」が明記されており、このサイトのテーマのひとつであるウェブアクセシビリティも
マークアップのいらない未来を考える
みなさん、マークアップ好きですか？ 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね！ ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな？」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか？ と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。 この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまと
Webアクセシビリティが無視されすぎで気にくわない。
AccessU 2017: World Tour of Accessibility Policy and StandardsMary Jo Mueller
WAI-ARIAの実装をデバッグ・検証する / masuP.net
この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。昨日の4日目は@24motzさんのスクリーンリーダー NVDA 日本語版の現状という記事です。 WAI-ARIAは、W3Cの中でウェブアクセシビリティに関する部会であるWAI（Web Accessibility Initiative）が策定した、リッチなインターネットアプリケーションをアクセシブルにするための仕様です。 WAI-ARIAについて詳しくは、仕様や分かりやすく解説された記事がありますのでそちらを参照してください。 Accessible Rich Internet Applications (WAI-ARIA) 1.1 Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 WAI-ARIA の基礎知識 ¦¦ Web
メガメニュー | Accessible & Usable
公開日 : 2014年5月12日 カテゴリー : ユーザビリティ / アクセシビリティ 「メガメニュー (Mega Menu または Mega Dropdown Menu)」と呼ばれる、面積の広いドロップダウンメニューがあります。情報量の多い大規模サイトを中心に、時折見ることができます。 メガメニューの例 : スターバックス (starbucks.com) メガメニューの例 : MoMA (www.moma.org) メガメニューの例 : LG (lg.com) JavaScript によるドロップダウンメニュー自体は昔からありましたが、それに比べると、メガメニューは以下のような特長があり、ファインダビリティの面で優れていると言えます。 サブメニューを二次元的に (縦だけでなく横にも) 展開できるので、たくさんのメニュー項目を、一度ですべて見渡せるように表示できる。 広い面積を活かして、情
いま改めて問う、Webアクセシビリティの意義
Webアクセシビリティという言葉を聞いて、あなたは何をイメージしますか？ 障害者対応？ 高齢者対応？ 自分（の作っているWebサイト）には関係ないことだとか、必要性を認識しながらもどちらかと言えば厄介な、控え目に表現しても面倒なものと捉えている人も、稀にいらっしゃるかもしれません。私の懸念は、稀にどころか、そういうややネガティブな印象をWebアクセシビリティに抱いている人の方が多数派を占めてはいないだろうか、ということです。 昨今のWebアクセシビリティへの取り組み Webアクセシビリティの確保、すなわちアクセスに用いられるソフトウェアやハードウェアによらず、誰もがWebコンテンツを利用できるようにすることは、関連するJIS規格（JIS X 8341-3）が2004年に公示されてからは特に、理解と普及のための取り組みが積極的に進められてきました。しかし、すべてのWebデザイナーや開発者がそ
ひとつのページに同じラベルのリンクが複数存在する場合 | Accessible & Usable
公開日 : 2009年10月8日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) Webページには、共通ラベル（同じ文言）を持ったリンクが複数存在し、かつ、これらのリンクの飛び先が異なることがあると思います。主に、同じ粒度の情報が一覧表示されていて、「続きを読む」「詳しく見る」といった類のリンクがあるケースです。 たとえば下記に図示した例では、製品の特長の一覧ページに同じラベルのリンク（詳しくはこちら）が並んでいて、かつ各々のリンク先が異なっています（株式会社ニコンのサイトより）。 このように、同じ文言で飛び先の異なるリンクが存在するケースでは、<a>要素にtitle属性を付けて、より具体的な（ユニークな）情報を補足的に記述すると良いでしょう。その理由は、主に音声読み上げツールを使用している視覚障害者ユーザーに対して、多少なりともアクセシビリティを
JavaScript が無効なユーザーはほとんどいない。だから... | Accessible & Usable
公開日 : 2013年12月27日 (2014年3月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ 「Web ユーザーのうち、JavaScript を無効にしている人はどのくらいいるのだろうか？」という話題は、Web サイトの制作や運営に関わる人の間では、以前から関心の高いところだと思います。海外でもこの話題を扱った記事は多く、Web 上で検索してみると、いろいろな記事が見つかります。 How many people browse with Javascript disabled? How many people are missing out on JavaScript enhancement? (イギリス政府「Government Digital Service」の記事) How many users have JavaScript disabled? (「Yaho
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
富士通アクセシビリティ・アシスタンスが提供終了。感謝と共に代替手段も紹介してみる
富士通さんが、2004年より無償ダウンロード提供していた視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群 「Fujitsu Accessibility Assistance （富士通アクセシビリティ・アシスタンス）」 が 2013年の 8月 20日をもって、無償提供を終了するそうです。 富士通、色覚障がい者のための診断ソフトウェア無償提供8月20日をもって終了：「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。 ： ＠IT 富士通アクセシビリティ・アシスタンス ： 富士通 富士通アクセシビリティ・アシスタンスは、2003年から公開されていた 「Web Inspector （ウェブインスペクタ）」 に、「Color Selector （カラーセレクター）」、「Color Doctor （カラードクター）」 を加えた、3つのソフトウェアからなる、アク
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
Tumblr
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
How-to: Use title attributes - The A11Y Project