Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
国交省ハザードマップ検討会のWebアクセシビリティの認識が詰んでいる - 水底の血
ツッコミが追いつかないというのは、こういうことを指すの…？ ハザードマップのユニバーサルデザインに関する検討会 - 国土交通省水管理・国土保全局 障害等に対応する一人ひとりのニーズに応じた水害リスク情報提供のあり方を検討する有識者会議を開催します！ ～ハザードマップのユニバーサルデザインに関する検討会（第１回）の開催～ - 国土交通省 ハザードマップは、主に地図上に水害リスクに関する情報を示すものですが、視覚等に障害を有する場合は紙面等の情報を取得することが困難であること、また、自身のリスクが把握しづらく、避難行動に役立ちにくいという意見もあることから、一人ひとりの環境やニーズに合ったリスク情報提供のあり方を整理するため、「ハザードマップのユニバーサルデザインに関する検討会」を設置し、令和３年１２月２３日（木）に第１回検討会を開催します。 という趣旨らしいです。これまで検討会は4回開催され
なぜ、ハイパーリンクは青色なのか?
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
Yahoo! JAPAN Creative Blog — アクセシビリティやるぞ！祭り、開催いたしました！
こんにちは、マーケティングソリューションカンパニーの福本です。 先日、弊社の社員食堂「BASE 6」にて、ミツエーリンクス様、ビジネス・アーキテクツ様と合同でアクセシビリティの勉強会を行いましたので、当日の様子や資料をご紹介いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧いただければと思います。 当日は弊社の岡田 紗代子さんと野川 智史さんによるグラフィックレコーディングがあり、発表内容がリアルタイムに可視化されました。ぜひこちらのほうもあわせてご覧ください。 このイベントは、なにかとハードルが高く感じてしまうアクセシビリティという領域を少しでも身近、気軽に感じていただけるように「お祭り」をテーマに企画しました。 当日は参加者の方々はもちろんのこと、登壇者もお酒を飲みながら発表をするといった少し変わったイベントとなりました。 セッションの流れとしては、 「そもそもア
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
PDF技術の翻訳がなかったことになっているウェブアクセシビリティ方針 | 水無月ばけらのえび日記
公開: 2013年9月29日10時40分頃 JIS X 8341-3:2010では、各サイトごとに「ウェブアクセシビリティ方針」を定めることを求めており、それを公開することを推奨しています。 企画段階においてウェブページ一式の責任者は，ウェブアクセシビリティ方針を策定し，文書化しなければならない。ウェブアクセシビリティ方針には，目標とするウェブコンテンツのアクセシビリティ達成等級を含まなければならない。 注記 ウェブアクセシビリティ方針は，ウェブサイトではサイト上，ウェブアプリケーションではマニュアル，パッケージなどで公開するとよい。 以上、JIS X 8341-3:2010 6.1 企画 より 最近ではJIS X 8341-3:2010に準拠、もしくは配慮しようとするサイトも増えてきて、ウェブアクセシビリティ方針が公開される例も増えてきました。大変ありがたいことだと思います。 しかし、実
世界最初のWebサイトが教えてくれるデザインの原則
4月30日は World Wide Web にとって重要な日。先日 CERN が、W3 の関連技術をパブリックドメインにしてから、20 年を迎えました。CERN 公式サイト では W3 の歴史を振り返ると共に、1993 年に公開された 最初の Web サイト もオリジナルの URL に再公開されました。 世界最初の Web サイト（上図）は、コンテンツとデザインに関する講演をする際に何度か取り上げています。例えば、2011年ロフトワークが主催した いまさら聞けない！？ 企業のスマートフォン対応 で、20年前に作られたサイトにも関わらずスマートフォン対応されていると紹介しました。 シンプルなマークアップですし、装飾も一切ないので表示されて当然かもしれません。しかし、今まで私たちが作ったサイトの中で、作った当時には予測もしなかったデバイスでも情報をきちんと伝えることができるのがどれだけあるでし
WAICの新人事に寄せて
2012年11月6日 著 ウェブアクセシビリティ基盤委員会（WAIC）のサイトで11月1日に掲載した通り（委員会の新人事に関するお知らせ参照）、このたび同委員会の副委員長、ならびに作業部会1（理解と普及）の主査に就任しました。これまで作業部会2（実装）をメインに、並行して作業部会1にも参加してきたのですけど、今後はどちらかといえば作業部会1での活動に軸足を置きつつ、副委員長のひとりとして植木委員長、そして委員会全体の活動を支えていくことになります。マークアップやスタイルシートの設計、およびその周辺業務を中心に長くこの業界で働いて来たこともあって、作業部会2から軸足を移すことには若干の寂しさを覚えますが、それ以上に傍から見ると「なぜ（作業部会2ではなく）作業部会1の主査に？」と思われるかもしれません。 100%主観ではありますが、自分の現状認識を書くならば、日本のWebアクセシビリティは、か
ウェブデザインとはいったい何なのか | 水無月ばけらのえび日記
公開: 2012年4月11日1時25分頃 「首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察 (7dw.jp)」というブログ記事を書かれている方がいらっしゃるようで。 申し訳ないのですが、最初から最後まで同意できない部分の方が多いですね。特に看過できないのがアクセシビリティの部分で、これは既に複数の方からツッコミが入れられています。 Re: 首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察 (kidachi.kazuhi.to)Kotaro Kokubo - Google+ - 最近「デザイン」という言葉のひどい扱いを頻繁に目にしていたたまれない気持ちになって いたところにダメ押しのような某… (plus.google.com)「アクセシビリティに配慮すると、ビジュアルデザインが制約を受ける」「ビジュアルデザインとアクセシビリティは両立しない」という
首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察
首相官邸の公式ホームページが2012年4月2日、リニューアルされた。 これが「お金をかけすぎている」とインターネット上で批判の嵐となっている。増税や公務員削減などが実施されようとしている中、無駄使いではないかという声が多くあがっているのだ。 首相官邸HP、リニューアルに4500万円 ネットで怒りの声 「もっと安くできる」 – J-CASTニュース この記事ですが、ネット上での「高い」という声は一般消費者感覚としては理解出来ますが、Web業界で働く私の周囲のリアルな同業者からも、ネット上の一般の方と同じように「高い」「騙されてる」「金のムダ使い」というような意見が出まして、ちょっと違和感を覚えました。 また一方で、同業の方でも実際このクラスの規模の案件を受託しているような受託業者さん界隈からは「これくらいはかかる」「この金額以下だと受けられない」という声も聞かれました。 私は後者の声に同感で
Webページの見栄えにどこまでこだわるのか
その昔、「美しい人は美しく、そうでない人はそれなりに」という某フィルムメーカーのテレビコマーシャル（CM）が話題になった。このCMになぞらえて言うと、「高機能なWebブラウザでは見栄えよく、そうでないWebブラウザではそれなりに」というコンセプトが、Web制作者の間で注目されている。それが、Progressive Enhancementである。 非クロスブラウザを許容する Progressive Enhancement（PE）の基本的なコンセプトは、「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」（アドビシステムズのthe Edge newsletter2009年2月より）ことである。後半の「ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」は、例えば、HTML5やCSS3といった最新技術を実装しているWebブラウザ（
A.A.O.｜ウェブアクセシビリティJIS規格の改正に備える～公共機関ホームページに求められる対応No.1 ウェブアクセシビリティJIS規格とは
A.A.O.公共機関 ウェブサイト通信 解説コラム、セミナー情報、調査結果等、公共機関ウェブサイト担当者様向けに最新情報をメールでお届けします。 申し込みフォーム 改正JIS対応に関する お問い合わせ サイト内容やJIS規格対応支援等のサービスについてのお問い合わせ、お見積もり・ご相談・ご依頼は以下のお問い合わせフォーム（SSL）で承っております。 お問い合わせフォーム ウェブアクセシビリティのJIS規格「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第3部：ウェブコンテンツ(JIS X 8341-3 )」（以降、JIS X 8341-3と記載）の改正が予定されています。JIS X 8341-3は2004年6月20日に制定されて以降、多くの自治体においてホームページのアクセシビリティ対応を行なうための拠り所とされてきました。 改正によって、公共機関に求めら
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
横幅 - 生活
WEBページの横幅をどれ位に設定するかなど、考えるだけ無駄で、要は、どれほど大きなウインドウで見られるか、あるいは、どれほど狭苦しいウインドウの中に押し込められるかは、管理者の側には分からず、見る側に委ねられている。大変分の悪い話だが、事実その様になっている。 私がせっかくいかしたスタイルシートを用意して、素晴らしく読みやすいと思っていたとしても、スクリーンの向こう側の人たちはMSPゴシックのぎざぎざ文字を眺めているかも知れず、馬鹿みたいなだだっ広いウインドウにフルスクリーンでインタネーッツエキスロプーラを開いている可能性が高い。横幅を決めてしまいたいならいっそのこと、マックOSXで小粋なアンチエイリアスが効いた画面をキャプチャして、JPEGかなにかで表示した方が、アクセッシビリティが高いに違いない。 要するに、誰がどのような見方をしても、一応見られるようにしてあげればそれで私の責任は果た
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
18F: Digital service delivery | Home
Zホールディングス株式会社
FUJITSUサイト トップページ展示室 - 富士通
PC
Yahoo Developer Network