第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le
アクセシビリティ | SmartHR Design System
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 わからないことがあれば #accessibility_and_human_rights_aka人権 チャンネルにていつでもお気軽にご相談ください！ 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている 代替テキストが空で設定されている または背景画像として表示されている参考 非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されてい
アクセシブルなサイトリニューアルのチェック項目
検討したり、例外を適切に設けるために使うものです。 要件定義 バックエンドシステム・CMSが以下に対応している 入力フォームに時間制限はない 入力フォームの入力チェック機能は適切なエラーメッセージがでる 出力されるHTMLが仕様に準拠したHTML 画像に代替テキスト(alt属性)が入れられる 動画にクローズドキャプションを追加できる 自動的に生成されるウィジェットがアクセシブルになっている 画像のポップアップ（モーダル）機能など 3rdパーティのウィジェットやASPがアクセシブルである 動画埋め込み 地図埋め込み サイト内検索 自動翻訳機能 チャットボット 情報設計 情報設計に問題がない・情報を管理できている ナビゲーション設計が適切でどのページにもたどり着ける リンクテキストとリンク先ページタイトル・見出しに乖離がない ページタイトルとh1見出しに乖離がない サイト内でページタイトルに重
Webエンジニアとしていま知っておきたいWebアクセシビリティ
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
Web アクセシビリティの検証ツール acot を作ってる - wadackel.me
はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
僕は文字だけ拡大したい - dskd
公開日2020-02-02タグaccessibility文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。 しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。 なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。 大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたいって思う
SINAP | いま知っておきたい「アクセシビリティ」の基本と便利な確認ツール
はじめまして！4月に入社したデザイナーの竹田です。 今回は初めてのブログということで緊張していますが、最後までお付き合いいただけると嬉しいです！ 早速ですが、デザイナーチームでは以前「アクセシビリティ」というテーマでチーム発表をしました。 今回はその内容について触れていきたいと思います。 目次 アクセシビリティとは？ Web制作にまつわるアクセシビリティ アクセシビリティ確認ツール 終わりに 1. アクセシビリティとは？ 最近よく耳にする「アクセシビリティ」という言葉ですが、皆さんはその意味をご存知でしょうか？ 私は漠然と「障がいを持つ方や高齢の方のためにあるもの」といったイメージを持っていました。 もちろんそれも間違いではないのですが、アクセシビリティという言葉はもっと広範囲も含みます。 「全ての人が、どんな利用環境でも情報にアクセスしやすくすること。」 それがアクセシビリティの持つ本当
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
4.5:1に苦しむデザイナーの皆様へ | 水無月ばけらのえび日記
公開: 2019年6月23日23時40分頃 WCAG 2.0 の達成基準 1.4.3 にはカラーコントラストの基準があり、背景と文字とに4.5:1以上のコントラスト比を持たせることを要求しています。 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA) 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラスト
アクセシビリティの祭典 2019に参加してきました - emuramemo
イベントからずいぶん日が立ってしまいました。 アクセシビリティの祭典 2019に参加した感想です。 アクセシビリティはたくさんの人に恩恵がある アクセシビリティを知る機会がないのかもしれない アクセシビリティをどうやって社内に広めるか まずはできるところからアクセシブルに 最後に アクセシビリティはたくさんの人に恩恵がある 生きていると、なにかと「少し苦手なこと」がたくさんあります。 そういうことをサポートしてくれるのもアクセシビリティの良さだと思います。 例えば、アクセシビリティの祭典で常時使われていた「UDトーク」。リアルタイムで音声を文字に書き起こしてくれるアプリです。 左に少し見える文字起こしがUDトークによるもの。右端では手話を担当する人も。 文字起こしは、耳が聞こえない人へのサポートになることはもちろん、健常者でも聞き逃したり、うまく聞き取れなかったときに文字で見返すことができ
あまり知られていない、アクセシビリティに効果があるHTML要素のまとめ
「HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。 10 HTML Elements You Didn't Know You Needed by Emma Wedekind 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Audio要素 Blockquote要素 Output要素 Picture要素 Progress要素 Meter要素 Template要素 Time要素 Video要素
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
インクルーシブ HTML ＋ CSS ＆ JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン (電子書籍版) | Accessible & Usable
インクルーシブ HTML ＋ CSS ＆ JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン (電子書籍版) 公開日 : 2018年3月7日 (2021年2月3日 更新) カテゴリー : アクセシビリティ 日本語版レビュワーとして関わらせていただきました書籍「インクルーシブ HTML + CSS & JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン」が、このほど電子書籍化されました。出版元のボーンデジタルさんより見本誌をいただきましたので、ご紹介したいと思います。 本書の公式情報およびお試し版のダウンロードは、株式会社ボーンデジタルさんのサイトをご覧ください。 インクルーシブな読書体験をもたらす「リフロー」の徹底 本書は、ウェブサイトやアプリケーションのユーザーインターフェースデザインについて、「インクルーシブ」という言
JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表をプレゼント - 有限会社時代工房
2017年11月09日 更新 現在在庫切れしております。 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表を作りました。 希望者にプレゼントしますので、「JIS早見表希望」と明記の上、 送付先住所 お名前 を教えてください。メール（ info@jidaikobo.com ）でも、なんでも結構です。 サイズはA4。「コーヒーアクシデントにも強いラミネート加工版」と「フォルダなどに挟みやすい厚紙版」があります。希望があればおしらせください。とくにご指示がない場合は、この2種類をセットでお送りします。 先着順にお送りしますが、ラミネート加工版、厚紙版ともに在庫各100枚なので、なくなりしだい一旦受付終了となります。 なお、増刷がある場合、内容についてご意見をいただけたら、そのご意見の反映も考えますので、ご意見歓迎です。 提供いただく住所は早見表送付以外には使いません。 ブツ
PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表作成裏話 (Web Accessibility Advent Calendar 2017) - 有限会社時代工房
PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表作成裏話 (Web Accessibility Advent Calendar 2017) 2017年12月01日 更新 | タグ: アクセシビリティ, 技術情報 Web Accessibility Advent Calendar 2017の12月1日を担当させていただきます、有限会社時代工房の柴田です。 印刷の「ポイント」の使い道 時代工房は、ウェブ制作会社なのですが、印刷物の作成も行なっています。で、印刷会社さんに入稿をするのですが、たくさんの印刷物を入稿していたら、なんといつのまにか印刷会社さんのポイントが随分と溜まっていたのです。 「何か良いポイントの使い道はないか」と仲間で話し合った結果、今回の早見表が生まれることになりました。 僕は、恥ずかしながらどうも物覚えが悪く、原則、ガイドライン、達成基準を覚
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁が公開している『ウェブアクセシビリティ導入ガイドブック』がお勧めらしい／「電車内で動画を見たいのにイヤホンを忘れた」ときにも役立つみんなのためのデザイン
Rikiya Ihara / magi on Twitter: "span + CSSのアイコンフォントでボタンを作るとこうなり、普通は解決できません。私たちはこの実装例を「虚空」と呼び、撲滅を呼びかけています。 https://t.co/CZvz4JtGAj"
