デザイナーに聞く「ウェブアクセシビリティ」の重要性。成果が出ないサイトの原因はデザインかも？
Webサイトから思うような成果が得られない場合、もしかしたら原因は「デザイン」にあるかもしれません。 見えにくい、読みにくい、わかりにくいといった、次のアクションを迷わせるデザインになっていないでしょうか。 情報を適切に伝えるために意識したいのが「ウェブアクセシビリティ」です。デザインに関する専門書の著述や講演を数多く行うデザイナーの間嶋沙知氏に、その詳細を伺いました。 プロフィール 間嶋沙知 氏 高知在住のフリーランスデザイナー。majima DESIGNの屋号で県内外の企業、個人、団体のサービスに関わる印刷物やウェブのデザインを手がける。「個々の良さが発揮される風通しの良い世界」にデザインで貢献することを目指して活動中。著書に『見えにくい、読みにくい「困った！」を解決するデザイン』（マイナビ出版） 目次 ウェブアクセシビリティとは ウェブアクセシビリティはなぜ重要なのか ウェブアクセシ
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
子どもたちの「はじまりの書」、教科書のデザイン
創業から45年以上の長きにわたり百科事典や教科書をデザインしてきた、私たちコンセント。「教科書のデザインをしたくて入社しました」と話すデザイナーもいるくらい、もはやお家芸と言ってもいい（かもしれない）ほどの経験と、デザインへの思いがあります。ふり返れば、国語、算数、理科、生活、社会、英語、体育、などなど、デザインした教科は数知れず。小学校、中学校、高校と、さまざまな発達段階にいる子どもたちの学びと、正面から向き合ってきました。 そんな私たちがふだん大切にしていることを、7つのポイントに分けてご紹介したいと思います。 1. なんといっても「設計」が命 子どもたちが世の中のモノゴトに初めて出会う「はじまりの書」ですから、わかりやすく、迷わず、誤解を与えず、そしてワクワク楽しく学べるものであってほしいですよね。教科書は大人たちから次世代へのプレゼントとも言えます。 そのため、言葉と写真をどのよう
カルチュア・コンビニエンス・クラブ アクセシブルなウェブコンテンツ作成ガイドライン
CCCが指定管理者として運営を行う施設では、それぞれが独自に運営しているウェブサイトがあり、誰にとってもわかりやすい情報発信を続けていくために、アクセシビリティを高いレベルで担保できるようになることを目指していました。 そこで、アクセシビリティを向上するためのガイドラインの作成と、併せてスタッフの啓発を行いました。 まずは各サイトの現状を調査し、課題を洗い出しました。ウェブアクセシビリティの国際規格であるWCAG2.1の達成基準を満たしているかどうかの目視調査に加え、全盲のアクセシビリティエンジニアがスクリーンリーダー*での音声読み上げと操作確認を実施。マークアップ、視覚表現、テキストライティングの3つの観点から、視覚障害の有無によって情報の取得に差異がないかどうかを調査しました。 ＊スクリーンリーダーとは、画面に表示されるテキスト情報を音声で読み上げ、点字としても出力するソフトウェア。そ
折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで) | Accessible & Usable
公開日 : 2021年4月17日 (2021年6月6日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ナビゲーションメニューがデフォルトでは折り畳まれていて、いわゆる「ハンバーガーアイコン」を押すとメニューを展開表示するインタラクションを備えたウェブサイトを、昨今よく目にします。もともとはスマートフォンのように画面の大きさが限られたデバイス向けの UI でしたが、多くのウェブユーザーにとって馴染みのある UI になってきたからでしょうか、PC 向けのウェブサイトにおいても、採用される例が増えてきたように思います。そしてこれらは、ほとんどがオーバーレイ (overlay : ページの上に重ねる形での情報提示) でメニューを展開表示する仕様になっています。 オーバーレイでのメニュー展開 オーバーレイの問題 オーバーレイでメニューを展開するインタラクションは、一見、問題なさそうに
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
「この機能のアクセシビリティどうしよう」と思ったら
こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ＆ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ＆ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ＆ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」
アイコンと用途・代替テキスト対応表を作った話
この記事は「Webアクセシビリティ Advent Calendar 2020」 13日目の記事です。 「虚空」について 見える人には見える、見えない人には伝わらない、「虚空」という存在をご存知でしょうか。 さっき会社で、アイコンフォントだけがリンクやボタンになっていてテキストノードがないものを「虚空」と呼ぶことになった — Rikiya Ihara (@magi1125) March 1, 2019 会社とは freee 株式会社のこと。 関連リンク：freee アクセシビリティー・ガイドライン「アイコン」 アイコンは、要素の機能や意味を図で表すことで直感的な操作や伝達を助けてくれるものです。 しかしアイコンにテキストが併記されておらず、アイコン画像に代替テキストが付与されていないと、画像が見えない人にはそれが何を表すかが伝わりません。操作可能な要素なのに、スクリーンリーダーでは意味の分か
アクセシビリティからデザインを学ぼう
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
HEX Contrast Ratio Calculator
HEXの2色（前景色と背景色）のカラーセットからコントラスト比を計算し、WCAG2.1が定める基準を達成しているかを判定します。
アクセシビリティの祭典 2019 | インクルーシブな世界
福祉×Web＝最新技術 アクセシビリティの祭典は、自治体・企業・制作会社・障害者支援施設などに属する方々、障害を持つ当事者など様々な立場の人が、新しいアクセシビリティ技術に触れて体感できるお祭りです。 毎年、アクセシビリティの普及を世界全体で考える「Global Accessibility Awareness Day (GAAD)」に合わせて5月の第3木曜日に開催しています。 ソフトやデバイスが多様化する現在・未来のアクセシビリティをご覧いただけるようなアクセシビリティに関するセッションや展示等を通じて、多くの方とアクセシビリティについて語り、考え、学ぶ日にしたいと思っております。 セッションホールでは、Webをはじめとするアクセシビリティに関する情報や技術を聴講いただけます 展示スペースでは、アクセシビリティに関する最新技術を展示いたします。 懇親会では様々な立場の参加者と交流することが
はじめようアクセシビリティ改善！Backlogで行っている取り組みをご紹介 | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Backlogチームの中川です。 本記事では、Backlogが最近おこなっているスクリーンリーダー向けアクセシビリティ改善の取り組みを元に、明日から、いや、今開いてる画面からでも始められるアクセシビリティ改善についてご紹介します。 ちなみに、スクリーンリーダーって何？という方のために簡単にご説明しますと、スクリーンリーダーとは、視覚障がいを持つ方がPCを操作するのに使用する音声読み上げソフトです。無料で代表的なものは、Windows では NVDA、Mac では標準搭載されている VoiceOver などがあります。Backlogの改善では主にNVDAを使用して確認作業を行っています。 すぐにでも始められる作業コストが少ない改善 見出しをちゃんとマークアップする スクリーンリーダーではコンテンツ間を移動するのに、見出しを手がかりにすることが多いので、見た目の文字サイズではなく文
目の見えない人との歩き方とバリアフリー図書｜mjmjsachi｜note
これは「Webじゃないアクセシビリティ Advent Calendar 2018」19日目の記事です。いずいずさんから紹介いただきました、まじまじ（@mjmjsachi）です。高知市でウェブやDTPのデザインをしています。 先日、高知の図書館等文化施設オーテピアで開催された「ルミエールフェスタ」に行ってきたので、そこでの体験や感じたことについて書きます。 ルミエールフェスタとはルミエールフェスタは、視覚障害のある方の日常生活をサポートする道具の展示販売や、盲導犬教室、バリアフリー映画の上映など様々な催しが行われるイベントです。 “日本一のバリアフリー図書館”オーテピアでの開催ルミエールフェスタの会場となったのは、今年7月にオープンしたばかりのオーテピア。「日本一のバリアフリー図書館」を掲げており、館内には点字ブロックが設置されていたり、車椅子の方、聴覚障害、精神障害、知的障害のある方、高齢
受託でアクセシビリティ対応案件やったメモ - おいしい
この記事はWebアクセシビリティ Advent Calendarー2018 9日目の記事です。遅くなってしまい、本当にすみません！ 私は受託のウェブ制作会社に勤めております。2018年は念願叶ってウェブアクセシビリティ対応が要件に含まれる案件にいくつか関わることができました。そのときのことについて、ざっくり書いておきます。 内容 アクセシビリティ対応 (JIS X 8341-3:2016 適合レベルAA準拠) が要件に含まれる、規模が大きくないウェブサイト わたしは実装の一部とアクセシビリティまわり？を担当 自分がやったアクセシビリティ対応に関わる作業 アクセシビリティ方針の策定とページの作成 実装チェックリストの作成 達成基準チェックリストの作成 アクセシビリティ試験の実施と試験結果ページの作成 大変じゃなかったこと アクセシビリティ対応のコストが大きい複雑なUIがなかった 実装メンバー
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
A11yc アクセシビリティ チェック サービス
A11yc アクセシビリティ チェック サービス ver.4.0.3 URL URL User Agent ドキュメントルートURL (ex: http://example.com) 外部CSSチェック
アクセシビリティ
拡大鏡は、デジタル版の虫めがねのように機能します。iPhoneやiPadのカメラを使い、薬のラベルからキャンドルで照らされたメニューまで、レンズを向けたあらゆるもののサイズを拡大できます。視覚に障がいのある方が周囲の状況をより詳しく知りたい時は、拡大鏡の検出モードが役立ちます。カメラ、LiDARスキャナ、デバイス上の機械学習から得た情報を組み合わせることで、人の検出、ドアの検出、画像説明、テキストの検出、指差し読み上げなどの賢いツールを使えるようにします1。 人の検出機能を使うと、列に並んでいる時に近くにいる人との距離を測定できます。ドアの検出機能は、あなたから数メートル以内にあるドアやテキストのほか、トイレや禁煙のサイン、車椅子が使える入口の標識なども識別して、あなたの移動をサポートします。画像説明とテキストの検出により、カメラの視野に入っている人、物、風景、テキストについて、さらに詳し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Help:配色のコントラスト比 - Wikipedia
Use Contrast
