スライド概要 2022年に行われたイベント「アクセシビリティの祭典 2022」のセッション「ウェブはすべての人が使えるべきもの ～障がい者の力でアクセシビリティ改善～」で使用したスライドです。 https://accfes.com/2022/
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. Some people assume float labels are best because Google’s Material Design uses them. But in this case, Adam Silver recommends using conventional text fields which ha
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
ローソンのPB商品のパッケージデザインの評判がよろしくない。どのような商品か分からないのだ。文字や写真などをグラフィックという観点からしか考えないグラフィックデザイナーには反省をしてもらいたい。また、反省をうながすべき立場や関係にいる人が、そういう点に着目して注意していない可能性もある。 黒須名誉教授 2020年12月1日 ローソンのPB商品のデザイン 2020年の春にローソンが出したPB商品のデザインの評判がよろしくない。PB商品は、セブンイレブンでも、ファミリーマートでも出しており、自社ブランド商品としてそれなりの特徴づけをしている。特に、その特徴づけはパッケージのデザインに表れており、統一感のあるデザインがなされている。 ただ、ローソンのPB商品の場合、一般の商品とPB商品の差別化を極端に推進しようとしたためか、写真1のように、商品棚のなかで、PB商品群は他の商品とはちがうのだという
公開日 : 2020年2月22日 (2021年7月17日 更新) カテゴリー : アクセシビリティ ウェブコンテンツのデザインにおいては、ユーザーに情報を識別させる手段として、色だけに依存しないことが重要です。W3C が勧告している WCAG (Web Content Accessibility Guidelines) (日本語訳) でも下記のとおり達成基準が設けられています。 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 出典 : WCAG 2.1 達成基準 1.4.1 「色の使用 (レベル A)」 言い換えれば、グレースケール (色を排除した状態) で表示しても、情報が十分に識別できる必要があります。そうすることで、様々な色覚特性を持ったユーザーや、モノクロの印刷または画面表示 (電子ペーパーなど) を介して閲覧するユーザ
本当は最後まで読んでから感想記事を書くのがいいのでしょうけど、自分の読書ペースだと年内に読み終わるのは難しそうなので、全9章のうち取り急ぎ第1章「登録フォーム」のみを読み終わった段階での感想を書いてみます。 プレースホルダーをサポートしていないブラウザやスクリーンリーダーがあるうえ，長いヒントテキストは途中で切れる可能性があります。 プレースホルダー（p.22） スクリーンリーダーの対応はさておき、現在サポートが続いている主要ブラウザはすべて placeholder 属性に対応しています。古いブラウザやマイナーブラウザを意識した記述なのか、それともスクリーンリーダーと組み合わせた意味で未対応ブラウザがあるという意味なのでしょうか。 なお、 placeholder には本書で触れられている以外にも Google 翻訳にURLを突っ込んでページごと翻訳した際に属性値が翻訳されないという問題が挙
公開日 : 2019年7月20日 カテゴリー : アクセシビリティ 先の記事でご紹介した、英国内務省 (UK Home Office) によるウェブアクセシビリティの「べき/べからず」ポスター ですが、このほど @onouchidebe さん によって日本語化されました。 ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 日本語版 障害の種類 (以下の7種類) ごとに、アクセシビリティ担保のためのデザインとして「すること」と「しないこと」が、コンパクトにまとめられています。 自閉症スペクトラム スクリーンリーダー利用者 ロービジョン ディスレクシア 身体障害 / 運動障害 聴覚障害 / 難聴 不安状態 日本語化されたことで、とても読みやすくなりました。英国政府機関の資料という位置づけになりますが、あらゆるウェブサイトやアプリケーションに応用できる内容なの
公開日 : 2018年11月3日 (2018年11月5日 更新) カテゴリー : アクセシビリティ ウェブアクセシビリティ向上のために活動している米国の非営利団体「WebAIM (Web Accessibility in Mind)」が、2018年9月に、ロービジョンのユーザーを対象にしたウェブ利用に関する調査を実施しました。2013年2月から3月にかけて実施された第1回に続く、第2回目となる調査です。 英語のレポートになりますが、WebAIM サイトの「Survey of Users with Low Vision #2 Results」で詳細をご覧いただくことができます。この記事では WebAIM 発表の調査結果の中から、私自身が興味深く感じた事項をピックアップします。 回答者のデモグラフィック 有効回答数は248。(英語を理解する人の全世界からの回答を受け入れているが、回答者の国や地
公開日 : 2018年8月4日 (2020年6月13日 更新) カテゴリー : アクセシビリティ ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。 グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリ
2018年4月1日 返信記事を書こう書こうと思ってたらいつの間にか1カ月近く経っていた、ブロックスキップを考える -- Website Usability Infoについて。 スキップリンクの設計では検討すべきことが多いうえに、誰にでも理解可能なリンクラベル表現が可能かなど難しい側面もあります。 リンクラベルにまつわる課題は大きいと思いますね。リンクラベルはユーザーにとってわかりやすい、遷移先をイメージしやすいものにする必要があるわけですけど、スキップリンクでは特にユーザーに学習コストを強要する結果に陥りがちというか、ユーザーの側からすると、同じサイト内にある複数のページを閲覧した結果としてようやくページ間にある構造上の共通点を学習でき、そこで初めてラベルの意味するところが実用性を伴って伝わるのではないかと思っていて。例えば総務省のページにアクセスすると、先頭にスキップリンクとして メイン
公開日 : 2018年3月2日 カテゴリー : アクセシビリティ ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0 に、「ブロックスキップ」という達成基準があります。 2.4.1 ブロックスキップ: 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。 (レベル A) 出典 : WCAG 2.0 解説書「達成基準 2.4.1 を理解する」 グローバルナビゲーションなどサイト共通のブロック (塊) を任意で読み飛ばせるようにして、メインコンテンツにスムーズにアクセスできるようにしましょう、というものです。達成方法には大きく分けて、1) スキップリンクを設置する方法と、2) 見出し要素や WAI-ARIA ランドマークを適切にマークアップする方法、のふたつがあります (参考 : WCAG 2.0 解説書「達成基準 2.
公開日 : 2017年12月21日 (2018年6月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ この記事は、Web Accessibility Advent Calendar 2017 の21日目の記事です。 12月16日に開催された「CSS Nite LP55 / Shift11 : Web デザイン行く年来る年」で、インフォアクシアの植木さんと一緒に「アクセシビリティ」セッションに登壇させていただきました。(フォローアップが公開されていますので、当日のスライドや動画をご覧いただくことができます。) 撮影 : サン・スタジオ 鍋坂樹伸様 「アクセシビリティ 改め インクルーシブデザイン？」というセッションタイトルで、欧米のウェブアクセシビリティコミュニティを中心に「インクルーシブデザイン (inclusive design)」というキーワードが広まりつつあること、
公開日 : 2017年4月12日 カテゴリー : アクセシビリティ / ユーザビリティ いわゆる「ランディングページ」やホーム (トップページ) などで、ユーザーのスクロール操作に呼応してコンテンツの塊 (写真やキャッチコピー、メニュー、行動喚起、など) が小出しに出現する演出のウェブページを、ここ数年よく目にします。さりげないアニメーション効果 (フェードインやスライドイン) を伴った、「パララックス効果の控え目なもの」と捉えることができますが、漠然とスクロールダウンしているユーザーに対しても個々のコンテンツの存在をアピールできる (ふと目に留めてもらえる) 効果が期待できそうです。 こうした演出は、ユーザーがコンテンツを上から下まで「順序よく」「連続的に」見ることが前提となっています。インタラクション設計においては、マウスホイールやタッチジェスチャによるスクロールダウンが強く意識されて
公開日 : 2016年8月12日 (2018年1月18日 更新) カテゴリー : アクセシビリティ ウェブサイトで、地図をユーザーに提示する際、Google マップを活用することは多いと思います。私が UI 設計に関わるプロジェクトでは、ユーザビリティの問題を回避するため、インラインフレームで Google マップを埋め込むのではなく、Google マップの URL にリンクさせるようにしています (参照 : Google マップの埋め込みについて考える)。こうすることで、インタラクティブな地図操作は Google マップのサイト/アプリに委ねることができる (地図利用というコンテキストにおいてより優れた UX を提供できる) という利点がありますが、最近、PC で開くことができる Google マップのサイトで、アクセシビリティ、特にキーボードでの操作性が大きく向上していることに気が付き
低コントラストのテキストがトレンドのようだ。しかし、それは視認性が悪く、発見しにくく、アクセシビリティも劣る。代わりに、もっとユーザブルな代案を検討しよう。 Low-Contrast Text Is Not the Answer by Katie Sherwin on June 7, 2015 日本語版2015年9月16日公開 低コントラストのデザインが美しいというのはWebに繰り返し立ち現れる思想だが、それは視認性や発見しやすさを奪い去るものである。低コントラストのデザインは目に負担がかかるので、歳を取って、能力が少し衰えたように我々は感じる。ミニマリズムというトレンドに魅了されたサイトは、高コントラストという従来からの自分たちの流儀を捨て去り、暗黒面（あるいはミディアムグレー面と言うべきか）に寝返ろうとしている。デザインでの評価のために読みやすさを犠牲にしようとするサイトにとって、低コ
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
