一貫性のあるフォーカスインジケーター | Accessible & Usable
公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
Material Design Text Fields Are Badly Designed — Smashing Magazine
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. I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organizations like Boots, Just Eat and Gov.uk. One topic that comes up a lot
アクセシビリティ対応したカラー設計でもっとメールを読みやすく！ Yahoo!メールのリニューアル事例
実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
見た目の美しさとアクセシビリティのパラドックス
UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
Re: ブロックスキップを考える
2018年4月1日 著 返信記事を書こう書こうと思ってたらいつの間にか1カ月近く経っていた、ブロックスキップを考える -- Website Usability Infoについて。 スキップリンクの設計では検討すべきことが多いうえに、誰にでも理解可能なリンクラベル表現が可能かなど難しい側面もあります。 リンクラベルにまつわる課題は大きいと思いますね。リンクラベルはユーザーにとってわかりやすい、遷移先をイメージしやすいものにする必要があるわけですけど、スキップリンクでは特にユーザーに学習コストを強要する結果に陥りがちというか、ユーザーの側からすると、同じサイト内にある複数のページを閲覧した結果としてようやくページ間にある構造上の共通点を学習でき、そこで初めてラベルの意味するところが実用性を伴って伝わるのではないかと思っていて。例えば総務省のページにアクセスすると、先頭にスキップリンクとして メ
AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ｜ABEMA
「アクセシビリティ」という言葉を使うほどではないかも。（予防線） 正直なところ、マシンリーダブルな部分は僕はまだよく理解してない。 アプリにおけるスクリーンリーダーとか操作や表示調整諸々とかちょっと待って！頑張るから！という意気込み。 で、完全に僕の主観だけど、多くのデザイナーがまず初めにとっつきやすいアクセシビリティは「色のコントラスト」だと思う。 ということで、 まずはAbemaTVのiOSアプリの色を全部見直したよ！（2018年3月） （2019年春：追ってWebも対応済み） （Androidは元々マテリアルデザインのカラースキームを採用してたのでそこまで問題ありませんでした） これまでのUIの色周りの課題でいうと主にこの3つ。 ・「黒背景」と「白背景」の画面が混在していた。 ・どの背景でも文字のコントラスト比が十分に保たれてなかった。 ・使用している色数がちと多い。 「黒背景」と「
第4回 D2D アクセシビリティ勉強会：プルダウンメニューとカルーセル - CodingMania
今回のお題は、いつも議論の的「プルダウンメニューとカルーセル」でした！ 過去の勉強会で質問があったり議論をしたりするものの、時間切れ～となっていたこのテーマを今回しっかりやりました！ 勉強会のツィートまとめ ↑ 今回は、誰かがやってくれてて、、、あざます。 最初に気をつけるべきことの説明がありました どちらにもいえる基本 マウス操作だけを前提とせず、キーボードやタッチパネルでも操作できるようにしよう。 キーボード用／マウス用のイベントを両方使えるようにしよう。 キーボードだけを使ってアクセスできますか～？ メモ：onClickは機器に依存しないから便利☆ フォーカス順序は、HTMLソースの順序（親子関係）と見た目の順序をあわせよう。 フォーカス順序がイケてない場合はtabindexを使う css無効時にちゃんと、文書構造が保たれていますか？ フォーカス移動だけで勝手に遷移させないようにしよ
カルーセルとWAI-ARIA | アクセシビリティBlog | ミツエーリンクス
Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。 記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。 カルーセルのアニメーションは利用者が開始できるようにする 利用者がカルーセルを一時停止できるようにする コントロールにはテキストによるラベルがあることを保証する 表示中のパネルとそのコントロールが、視覚的にも機械
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
カルーセル | 第4回 D2D アクセシビリティ勉強会 準備資料
第4回 D2D アクセシビリティ勉強会 準備資料カルーセル ※ ここでは、複数枚の画像にリンク機能を持たせ、順次表示できるナビゲーションについて「カルーセル」として説明する。（くどい） アクセシビリティ上の問題点 マウスやタッチパネルでの操作を前提としたUIで、キーボードで操作できないものが多い。 スクリーンリーダーでの音声読み上げに対応していない（構造が伝えられない）ものが多い。 切り換えられる画像上の情報（特に文字情報）を理解するだけの時間が足りないものが多い。 チェックポイント、および満たすべき達成基準 ※ JIS X 8341-3:2010 達成等級：Aに準拠することを前提とした場合 ※ 実装方法は、あくまで事例 ★ 特に大事なポイント マウスだけではなくキーボード（やタッチパネル）でも操作できること 7.2.1.1 キーボード操作 H91（リンク箇所にはちゃんとa要素を使う） G
カルーセル | Accessible & Usable
公開日 : 2014年3月16日 カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのユーザーインターフェース (UI) に「カルーセル (carousel)」と呼ばれるものがあります。文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。 Amazon の「この商品を買った人はこんな商品も買っています」が有名な例です。 Amazon (amazon.co.jp) における「この商品を買った人はこんな商品も買っています」のカルーセル また最近では、Web ページのメインビジュアルにカルーセルを採用している例もよく見られます。タッチジェスチャとの親和性が高い (左右方向へのフリックやスワイプで容易にパネルを切り替え
東京メトロの行き先表示器がひどい
最近千代田線のホームにある行き先表示器が新しいものに交換されたんだけど、これがあまりにひどすぎて毎日本当に困っている。どうにかして欲しい。 コレ＞http://www.tokyometro.jp/news/images_h/metroNews20160803_64-2.pdf 【ひどい点】 ・これまでの行き先表示器より行き先を示す文字サイズが格段に小さくなって、遠くからでは全く読めなくなった。行き先表示器として致命的。 ・表示器内に情報を詰め込みすぎて、何が何やらさっぱりわからない。これまでは基本的に「先発列車の時刻」「先発列車の行き先」「次発列車の時刻」「次発列車の行き先」の４つの要素しか表示されていなかったのが、新しい表示器ではこれらの要素に加えて「先発・次発の表示」「行き先のひらがな表示」「先発と次発の駅ナンバリング表示」「電車の現在位置」「お知らせの文字スクロール」が常に同じ画面上
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
ウェブページに文字拡大機能を置くのは「時代遅れ」 | Accessible & Usable
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー 白石 俊平（HTML5 Experts.jp編集長） HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第二弾です。 株式会社ミツエーリンクスCTO、そしてエキスパートNo.40の木達一仁さんに、「UXとWebアクセシビリティ」について聞いてきました。 「UXとWebアクセシビリティって、関連あるのかな？」なんて、自分で企画したにも関わらず無責任な疑問を抱える中、そんな疑問を吹き飛ばすような気付きをいただける貴重なインタビューでした。 alt属性からWeb Componentsのアクセシビリティまで、たっぷり聞いてきました！皆さんどうぞ、お楽しみください。 Webアクセシビリティについての現状 白石: 今日は、「UXとWebアクセシ
複雑なPC向けコンテンツに対して、アコーディオンが常に答えになるとは限らない
ページは、長いほうがユーザーのためになることもある。アコーディオンはページを短くし、スクロールの回数を減らすが、インタラクションコストを上げてしまう。トピックの見出しに対する判断をユーザーに要求するからである。 Accordions Are Not Always the Answer for Complex Content on Desktops by Hoa Loranger on May 18, 2014 日本語版2014年7月9日公開 アコーディオンメニューとは見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことである。これはコンテンツをユーザーに徐々に見せる方法の1つで、広げたり、あとで見るために隠したままにすることでコンテンツをコントロールできるので、読むものと無視するものをユーザー自身で決められる。ユーザ
バレないカードローンはこれ！誰にもばれずにお金を借りるなら｜お金の玉手箱
お金を借りたい。でも職場の同僚、友達、家族にバレてしまったらどうしよう？と不安で、なかなか申し込みができずにいませんか。 誰にもバレずにお金を借りる方法が知りたい！とお悩みの方へ、周囲に知られることなくお金を借りる方法を具体的に解説します。カードローンの在籍確認などバレたくない人が気になるポイントについてまとめましたので、ぜひ参考にしてください。 主婦の方は旦那さんに内緒で、バレずにお金を借りる方法を知りたいですよね。結論から言いますと、消費者金融カードローンなら家族はもちろんのこと、会社の人にもバレずにお金を借りることができます。その中でもおすすめの、「バレないカードローン」として口コミで人気の消費者金融カードローンを紹介します。 ただし、バレないようにするためにはいくつか注意して欲しいこともあるので、そのポイントについてもまとめています。 この記事のポイント カードローン利用がバレる原
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
The Blog | Welcome to Adobe Blog
