「すべて」の人にWebコンテンツの価値を届ける品質 / readable_na_cybozu_191102
2019年11月2日「リーダブルな昼下がり」で発表したスライドです： https://readable-na.connpass.com/event/145881/
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
色のアクセシビリティを改善するための10のツール
全人口の４％以上の人が色覚異常を持っているということをご存知でしょうか。さまざまな色覚異常やその他の視覚障害は、あなたのWebサイトのリーダビリティ（可読性）とユーザビリティに影響を与える可能性があります。 どのように色が見えるかに関わらず、すべてのユーザーが利用できるようにデザインするのがあなたの責任なのです。 適切なツールを使えば、こういったデザインはあなたが思っているよりも簡単にできます。 アクセシビリティとは何か どのようなユーザーが見ても簡単に理解できるようなWebサイトを作るために、Webサイトのデザインに関しては数多くのアクセシビリティチェックとスタンダードがあります。 アクセシビリティはオーディオや、ナビゲーション、フィードバック、テキストのプロパティ、色など広範囲に関係します。今回は最後に挙げた「色」に注目します。というのも、これはデザインの初期段階で特定でき、問題を起こ
Webアクセシビリティ確保 基本の「キ」｜実践ノウハウ｜エー イレブン ワイ［WebA11y.jp］
Webコンテンツのアクセシビリティを確保・向上するための基本中の基本であり、同時にさまざまなWebコンテンツでよく見つかる問題点でもある10項目です。「JIS X 8341-3:2016」や「WCAG 2.0 / 2.1」に対応する前に、まずはこの10項目のうち、できることから実践してみましょう。 この作品は、クリエイティブ・コモンズ「表示 – 継承 4.0 国際」ライセンスの下に提供されています。 1 ページの内容が分かるページタイトルを記述する ページタイトルは、どのようなウェブページなのかが分かる文言になっているか？ 達成基準 2.4.2 レベル A 「ページタイトル」の基本の「キ」 ページタイトル［ページ設定］ 2 見出しやリストなどの文書構造をマークアップする 見た目だけではなく、適切な要素を用いて文書構造や意味をマークアップしているか？ 達成基準 1.3.1 レベル A 「文書
セマンティクスの作り方、これまで、今、そして未来
私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし 今日のお話 広義のセマンティクスと今回のセマンティクス 今日はいくつかある未来の中からある一つの未来の話をします 目次 セマンティクスの恩恵 HTML WAI-ARIA Accessibility Object Model セマンティクスの恩恵 ウェブがよりアクセシブルになる。 アクセシブルとは？ 近寄りやすいこと 利用しやすいこと HTML HTMLというだけで得られるアクセシビリティ どこにいてもページが見られる 様々なOS、ブラウザで閲覧できる テキストがコピーできる 画像が保存できる ※電源とWi-Fiがあれば HTML5のセマンティクスは HTML4.01の要素の廃止と刷新 「セクショニング」という概念の導入により、見出しの及ぶ範囲が規定された フレージングが強化されて、強調
マークアップをパワーアップするWAI-ARIA
私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし マークアップ生まれ マークアップ育ち フロントエンドエンジニア 受託魔族はだいたい友達 #deisui_html_radio ウェブ制作をこじらせたオレたちが 歩いてきた道は何か、進むべき道はどこかを探る （ただの飲み配信） 目次(role="directory") WAI-ARIAってなに WAI-ARIAでできること WAI-ARIAをどういうときに使うの WAI-ARIAの前に WAI-ARIAってなに <header role="banner"> hogehoge </header> WAI-ARIAは、ウェブコンテンツおよびアプリケーションの アクセシビリティと相互運用性を改良するための フレームワークを提供する技術仕様である。 Accessible Rich Interne
ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（中級編： ローター）
Inclusive Design Patterns （日本語版は「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン 」）という本を買って読んでいるんですけど、その中で「技術的に有効な手段でガイドラインに沿った実装をしても、必ずしもユーザ体験が良くなるわけではない」といったことが書かれていました。その通りだと思います。 ガイドラインや標準に準拠することも大切ですが、作ったウェブサイトが「使えるもの」になっているかは別の話です。「インクルーシブ」なサイトに出来ているかどうか、最終的にはユーザがサイトにアクセスするのと同じ方法でテストしてみないとわからないこともたくさんあります。 そういった意味で、ウェブ制作者もスクリーンリーダーやキーボード操作でのウェブ閲覧をある程度はできるようになっておくべきだと思います。VoiceOver
ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（初級編）
先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー
インクルーシブなペルソナ拡張 | Accessible & Usable
公開日 : 2018年5月17日 (2021年7月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 2018年5月17日の「Global Accessibility Awareness Day」に、神戸で開催された「アクセシビリティの祭典 2018」に登壇させていただき、「インクルーシブなペルソナ拡張 (Inclusive Persona Extension)」というデザイン支援ツールを発表しました。当日のプレゼンテーションスライドは、SlideShare でご覧いただけます。 背景 (なぜこのツールを作ったか？) 「インクルーシブなペルソナ拡張」(以下「このツール」) は、ウェブサイトやウェブアプリケーションの設計プロセスにおいて、アクセシビリティを考慮に入れることを促進するためのツールです。 ユーザー中心設計 (UCD) / 人間中心設計 (HCD) の手法を用いて
状態遷移時にアニメーションを伴うUIのアクセシビリティ周りの実装について - yuhei blog
ディスクロージャーの開閉時やモーダルダイアログが表示される瞬間など、あらゆるUIは状態遷移のたびにアニメーションを伴う。にも関わらず、アクセシブルなUIを実装するための手法について書かれた文献で、アニメーションを伴う状態遷移時におけるWAI-ARIAの利用方法というようなテーマが取り上げられているものは見たことがない。UIにおけるアニメーションの役割を踏まえて、それをどのようにして実装すべきだと考えているかについて述べたい。 結論としては、セマンティクス上はアニメーションの存在を意識させないように実装すべきである。多くの場合、アニメーションはUIの状態遷移を視覚的に表現するために存在する。例えばディスクロージャーにおいては、閉じた状態と開いた状態の間を擬似的にアニメーションによって表現することで、ユーザーが状態変化前後のビュー（View）の繋がりを理解する手がかりになる。これは視覚を用いて
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
WCAG 2.0の「非干渉」とは何か? | 水無月ばけらのえび日記
公開: 2017年7月13日16時45分頃 7月11日に、「WCAGもくもく会 #1 (ca11y.connpass.com)」というイベントが行われました。 WCAG 2.0と関連文書の日本語訳をひたすら読むという趣旨でしたが、さまざまな感想やフィードバックをいただけて大変参考になりました。その感想の中のひとつに、「非干渉」についての話がありましたので、少しコメントしておきます。 非干渉が難解 #a11ymoku2 (twitter.com) — Toshiaki Otsuka (@otk2) 2017年7月11日 (twitter.com)「非干渉」とは何かという話ですが、「非」干渉と言っているわけですから、その前提として「干渉」という概念があります。では「干渉」とは何かということですが、私なりに簡単に言えば、「そのコンテンツにアクセスできないだけでなく、他のコンテンツにも干渉してアク
ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。とくに、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「WAI-ARIA」を実装に取り入れてる人もいるかもしれません。今回はウェブ制作に関わる人に役立つウェブアクセシビリティの基本を紹介します。 ウェブアクセシビリティのガイドライン「WCAG」 世界中のウェブアクセシビリティの基本となるガイドラインとして、W3Cの「Web Content Accessibitility Guidelines」(通称：WCAG)があります。現在は2008年に勧告された「WCAG 2.
EightShapes Contrast Grid
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すこや on Twitter: "アメリカのアクセシビリティ関連の訴訟件数、2015年では50件程度でしたが、2018年は2000件以上に増加しています。 #readable_na"
スクリーンリーダーをいろいろ触ってみよう
AccessibilityCheckList
スマホのスクリーンリーダーを使ってみよう
The Blog | Welcome to Adobe Blog
Colour Contrast Analyser (CCA) - TPGi
