マガジンのカバー画像

accessibility

233
運営しているクリエイター

#Webデザイン

Webアクセシビリティガイドラインのコントラスト比について色相環を使って視覚化してみた。

Webアクセシビリティガイドラインのコントラスト比について色相環を使って視覚化してみた。

Webアクセシビリティ対応のデザイン制作をお受けする際、コントラスト比についての説明は数値でしか書かれておらず、「感覚」としては掴みづらい(数値だとピンとこない)、またコントラストチェッカーでの確認も全部逐一するのはなかなか時間と手間がかかるので、少しでも解消したいと思っていました。

制作経験がある程度必要とはいえ、少しでもわかりやすい資料はないかと探したものの、結局見つからなかったため、だった

もっとみる
「学び」の実装 〜 ホームページの文字サイズ拡大機能から考える

「学び」の実装 〜 ホームページの文字サイズ拡大機能から考える

例えば、お住まいの町や官公庁のホームページを見てください。

おそらくほとんどのホームページでは、右上あたりに文字サイズを拡大したり縮小したりするボタンやリンクがついていると思います。

それを操作してみると、残念なことに特定の文字だけが拡大・縮小され、画像は拡大縮小されないので、レイアウトはくずれます。画像の中の文字のサイズも変わりません。

ですので、この場合、こちらの歌のようにブラウザに備わ

もっとみる
アクセシビリティを勉強する(1)

アクセシビリティを勉強する(1)

こんにちは、matsukoです。
普段はWeb界隈のデザイナーやってます。一児の母です。

最近社内でアクセシビリティについて話す機会がありました。
恥ずかしながら、今までコントラスト比程度で学習していなかったので、これを機会に少し知識を深めようと思います。

初回は、言葉の意味・似ているワードとの違いについてまとめます。

アクセシビリティ(Accessibility)とは国際規格であるISO

もっとみる
ヘッダにあるブランドロゴの代替テキスト、みなさんならどうする?

ヘッダにあるブランドロゴの代替テキスト、みなさんならどうする?

サイトやアプリのヘッダーに存在するブランドロゴ。それはトップページ(サイトホーム)にリンクすることが慣例になっている。その場合、ブランドロゴの代替テキストは何にしたらよいのか。A11yj Slackで有識者に質問をして、とても学びのある楽しい議論が展開できたので、自分なりの解釈を踏まえつつ今回はそれをまとめた。

きっかけと疑問@potato4dさんのこの疑問。結論から言うと、このツイートへの返信

もっとみる
デザイナーが抑えるべきアクセシビリティのポイント

デザイナーが抑えるべきアクセシビリティのポイント

はじめまして。
福岡、大分を拠点にWEB制作などをしていますQTmediadデザインチームともうします。

私達は普段、官公庁サイトや、観光サイトの制作を軸に、
企業様サイトや印刷物など、多岐にわたってデザインを制作しております。

日々の業務に追われ、自分たちの情報発信まで手が回らない状況だったのですが、アウトプットこそ成長につながる...!と一念発起してnoteを開設しました。

仕事上で得た

もっとみる
満たしておくべきWebアクセシビリティを向上させる5つの手法

満たしておくべきWebアクセシビリティを向上させる5つの手法

こんにちはフロントエンドエンジニアの峯です。
今回はアクセシビリティを向上させる5つの手法について紹介します。

みなさんアクセシビリティについて、どのくらい意識して普段のプロダクト開発に携わっていますか?
ここで紹介する5つは、あなたのサイトがより多くの方にとって有意義なサイトにするための基本的かつ、不可欠な要素です。

アクセシビリティについてまず、アクセシビリティとは「利用しやすさ」を表し

もっとみる
デジタル庁に望む

デジタル庁に望む

ICTのUDは世界の常識

日本の情報通信が、実は世界的に見て20年は遅れていることが、コロナでやっと明るみに出た。政府は何度も、日本を最先端のIT国家にすると、宣言だけして実行しなかったのだ。今回、コロナで待ったなしの状態となり、テレワーク、オンライン授業、オンライン診療などはかなりが進んだ。だが、保健所の仕事が電話とFAXがベースだったことや、マイナンバーと連動していないため給付が滞ったことな

もっとみる
なぜ必要?まずはWebアクセシビリティについて知ろう 後編

なぜ必要?まずはWebアクセシビリティについて知ろう 後編

5. 押さえておきたい15のWebアクセシビリティチェックと考え方Webアクセシビリティについての総括的な考え方・ノウハウをまとめつつ、制作側の意識も底上げをするガイドラインのような記事が書きたかったので、実質本編がメインという位置づけです。

プロダクトに対する「○○ができていますか?」という質問に対して、要件・考え方、相当する適合レベル+αで回答していく形式になっています。

JIS X 83

もっとみる
カラーアクセシビリティについてのスタディ(インフォグラフィック)

カラーアクセシビリティについてのスタディ(インフォグラフィック)

THE BIG BOOK DASHBOARDSという本があるのですが、
こちらにあったカラーアクセシビリティについて初歩のtipsをインフォグラフィックにまとめました。

英語を勉強してるので、英語メインで下に日本語をつけています。

既に世に出ている色見本やTableauなどのカラーパレットは良くできており、これらを参考にするのが効率的かと思いますが、なぜこの色でなければいけないのか、もしクライ

もっとみる
アクセシビリティに配慮したビジュアルデザイン

アクセシビリティに配慮したビジュアルデザイン

この記事は『デザイニングWebアクセシビリティ』の第8章 ビジュアルデザイン を図解・要約したものになります。より詳しく知りたい方はこの本を読んでください。この8章についてはお試し版という形で無料公開されています。

8章の内容:視覚的な見せ方、ビジュアルについて多くの人は視覚から情報を得ているので、ビジュアルデザインを工夫すればアクセシビリティの向上が見込める。とはいえ視覚情報のほとんどはマシン

もっとみる