サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
accessible-usable.net
公開日 : 2024年3月23日 カテゴリー : ユーザビリティ / アクセシビリティ フォームのパスワード入力欄 (<input type="password">) は基本的に、入力された文字列がマスキングされ、代わりに文字数の分だけ「黒い点」が提示されるようになっています。他人によるパスワードの盗み見を防ぐためですが、ユーザーは、大半のケースでは背後から覗く人が誰もいない状況でパスワードを入力するでしょうし、入力した文字列が視認できないと正しくタイプできているか不安になったり、タイプミスしたときの修正がしづらい (どの箇所でミスしたか確信が持てず、はじめから入力し直さざるを得なくなる) といった問題もあるでしょう。こうしたことを考慮に入れると、パスワードのマスキングはユーザーの任意で解除できる (入力した文字列を表示させる) ようにしたほうが、ユーザビリティの観点では望ましいと考えるこ
公開日 : 2023年10月6日 (2024年3月2日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.2 が、2023年10月5日に正式な Recommendation (勧告) になりました。 Web Content Accessibility Guidelines (WCAG) 2.2 - W3C Recommendation 05 October 2023 またこれに併せて、W3C の WAI (Web Accessibility Initiative) より以下の関連文書が公開されています。 WCAG 2.2 Understanding Docs WCAG 2.2 Techniques これまでも当サイトでは WCAG 2.2 策定の道のりをウォッチし
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
公開日 : 2023年8月21日 カテゴリー : アクセシビリティ W3C にて策定作業が進んでいる WCAG 3.0 (W3C Accessibility Guidelines) の Working Draft が、2023年7月24日付で更新されました。先のドラフトが2021年12月7日付なので、1年7か月ぶりの更新になります。 ドラフト原文 : W3C Accessibility Guidelines (WCAG) 3.0 - W3C Working Draft 24 July 2023 前回ご紹介した2021年12月7日版から大きく構成などが変わっており、WCAG 3.0 はまだまだ探索的な段階であると言えます。ですのでこの記事では、以前のドラフトからの差分を追うことはせずに、今回のドラフトをもとに改めて WCAG 3.0 の大まかなアウトラインを捉え直すことを主眼に、まとめてみた
公開日 : 2023年7月19日 (2024年3月20日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が2016 (平成28) 年4月1日より施行されています。 現在はその改正法 (「障害を理由とする差別の解消の推進に関する法律の一部を改正する法律」) が2021 (令和3) 年6月4日に公布されており、政令により2024 (令和6) 年4月1日に施行されることになっています。併せて基本方針 (「障害を理由とする差別の解消の推進に関する基本方針」) も改訂され2023 (令和5) 年3月14日に閣議決定されたところで、こちらも
公開日 : 2023年4月24日 カテゴリー : アクセシビリティ WAI-ARIA を用いたウェブコンテンツ制作のガイドとして、W3C が ARIA Authoring Practices Guide (以下、APG) ※1 というサイトを公開しています。 ※1 : もともとは WAI-ARIA Authoring Practices というドキュメントでしたが、2020年5月19日付で APG にリニューアルされています。 この APG は、「Patterns」と「Practices」というふたつのセクションをフィーチャーしていますが : Patterns WAI-ARIA を用いて作ることができるアクセシブルな UI コンポーネントのパターン (たとえば、アコーディオン、アラートメッセージ、カルーセル、モーダルダイアログ、タブ、など) を解説しています。各パターンは、概要 (Abou
公開日 : 2023年1月15日 カテゴリー : ユーザビリティ / アクセシビリティ 英国政府 (GOV.UK) が、2022年11月に、「Designing for people with dyscalculia and low numeracy」という記事を公開しました。 「dyscalculia (算数障害)」は学習障害のひとつで、算術の学習や理解が困難なことを意味し (参考 : 算数障害 - Wikipedia)、「low numeracy」はより幅広く、計算が苦手なことを意味します。つまり上述の記事では、「数を扱うのが苦手な人を排除することなく情報を伝えるには、どうデザインすればよいか」がまとめられています。「数を扱うのが苦手」な例としては、記事中で以下が挙げられています。 数字を読んだり理解すること。 お金を数えること (お釣りを計算する、など)。 時間を伝えたり、管理するこ
公開日 : 2022年12月19日 (2022年12月22日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支
公開日 : 2022年10月17日 カテゴリー : ユーザビリティ / アクセシビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。
公開日 : 2022年5月6日 (2023年7月19日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) 2022年4月8日付で、Twitter は「ALT」バッジをグローバルにリリースしました (参考 : @TwitterA11y によるアナウンス)。ツイートとして投稿された画像に代替テキストが付いている場合、このバッジが表示され、クリックまたはタップすることで代替テキストの記述内容を展開して見ることができる、という機能です。具体的な使用方法は、Twitter ヘルプセンターの記事「画像の説明を追加する方法」で紹介されています。 視覚障害者 (スクリーンリーダーの利用者) が画像内容を音声読み上げを介して理解できるよう、ツイートとして投稿された画像に代替テキスト (<img> 要素の alt 属性) を付ける機能は、以前からありましたが、今回「ALT」バッジが表示されるよ
公開日 : 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 解
公開日 : 2022年2月1日 (2022年7月23日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) 各種デバイスの主要 OS で、いわゆるダークモードが標準装備されている現在 (†)、既に多くのアプリが、ダークモードに対応したビジュアルデザインを併せ持つようになっています。 † macOS 10.14 Mojave 以降、iOS 13 以降、iPadOS 13 以降、Android 10 以降、Windows 10 以降で、ユーザーの任意によるダークモード (ダークテーマ) への切替が可能になっています。 ウェブコンテンツにおいて、ダークモードに対応したビジュアルデザイン (スタイル) を併せ持つことは、必ずしも必須というわけではありません。アクセシビリティの観点で見た場合、たしかにロービジョンのユーザーの中には (画面の背景色が明るいと眩しすぎるため) 暗い背景色と
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
公開日 : 2021年9月19日 (2021年9月22日 更新) カテゴリー : アクセシビリティ ウェブコンテンツにおけるアニメーションは、アクセシビリティの問題を引き起こすことがあります。W3C が勧告している WCAG (Web Content Accessibility Guidelines) でも、インタラクションに伴うアニメーションに関して、下記の達成基準が設けられています。 アニメーションが、機能又は伝達されている情報に必要不可欠でない限り、インタラクションによって引き起こされるモーションアニメーションを無効にできる。 出典 : WCAG 2.1 達成基準 2.3.3 「インタラクションによるアニメーション (レベル AAA)」 インタラクションの視覚表現として、必要以上の過度なアニメーションを盛り込んでしまうと、ユーザーのコンテンツへの集中を阻害したり、注意力を散漫にさせて
公開日 : 2021年8月12日 カテゴリー : アクセシビリティ ここ最近、米国を中心とする海外のウェブアクセシビリティ関連サイトで、アクセシビリティオーバーレイ (accessibility overlay) がホットな話題になっています。アクセシビリティオーバーレイとは、サードパーティ製のプログラム (基本的には JavaScript) で、ウェブサイトに適用することによってアクセシビリティを即座に高めることができるという (まるで魔法のような) 触れ込みのソリューションです。 アクセシビリティオーバーレイが適用されたウェブサイトにはウィジェットが追加され、そこに用意された機能を選んで実行することで、あたかもアクセシビリティが改善されたかのように、ウェブページの表示を変更することができます。 アクセシビリティオーバーレイの例 アクセシビリティオーバーレイを提供するサービスはいくつかあ
公開日 : 2021年7月11日 カテゴリー : アクセシビリティ 色覚特性を疑似的にシミュレーションできるツールは、デスクトップアプリケーション、ブラウザ拡張機能、デザインツール内の機能、などいろいろあります。 個人的には、Mac のデスクトップアプリ Sim Daltonism や Chrome 拡張機能の NoCoffee Vision Simulator をよく使っていました。特に NoCoffee Vision Simulator は、Windows でも Mac でも使うことができ、併せてロービジョンの疑似体験 (ぼやけ、光に対する感度、ぶれ、中心暗点、視野狭窄) もできるので、プロジェクト関係者の間で「見えにくさ」の具体的イメージを共有するのに重宝していました。 ところが最近になって、NoCoffee Vision Simulator が使えなくなってしまい、Chrome ウ
公開日 : 2021年6月6日 (2021年6月7日 更新) カテゴリー : アクセシビリティ 先の記事「折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで)」を書く過程で、オーバーレイで提示されるモーダルウィンドウのアクセシビリティについて改めて調べていたところ、aria-modal という属性が気になりました。aria-modal とは、2017年に勧告された WAI-ARIA 1.1 から追加されたプロパティで、あるコンテナ要素に aria-modal="true" という属性が適用されている場合、その要素がモーダルであることをスクリーンリーダーなどの支援技術に示し、それ以外のコンテンツの利用を排除する (インタラクション可能な範囲を、モーダルのコンテンツに限定する) というものです。(参考 : aria-modal の定義 (WAI-ARIA 1.1) /
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
公開日 : 2020年9月7日 (2020年9月8日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームにおいて、数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる場合、HTML の <input type="number"> を用いるのが基本です。ボックスに直接タイプ入力することができると同時に、ブラウザによってはスピナー (spinner) が提示されるので、それを「回す」ことで入力値を増減することもできます。 <input type="number"> の例 (Google Chrome)。ボックスの右側にスピナーが提示されている。 しかし、ブラウザ標準のスピナーは小さくて、ユーザーによっては見づらかったり使いにくかったりします。またユーザーの環境でスピナーが表示されない (ただのテキストボックスのように見える) こともあります。 比較的
公開日 : 2020年6月21日 カテゴリー : ユーザビリティ / アクセシビリティ / 情報設計 (IA) WCAG (Web Content Accessibility Guidelines : 原文 / 日本語訳) を読むと、たとえば以下のように「名前」という用語がところどころで出てきます。 達成基準 1.1.1 非テキストコンテンツ 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。 (中略) コントロール、入力 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 達成基準 2.5.3 名前 (name) のラベル ユーザインタフェース コンポーネントがテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name)
公開日 : 2020年10月31日 カテゴリー : アクセシビリティ / 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) はウェブデザインの要であると言えるでしょう。 ことウェブにおいては、同内容の情報であっても、ユーザーひとりひとりが抱える多様なコンテキスト (利用デバイス、シチュエーション、障害や加齢などに伴う身体特性、好ましい情報入出力のモダリティ、など) に応じてコミュニケートのしかたを柔軟に変えることが可能であり、こうしたウェブの特性を踏まえると、IA はアクセシビリティと密接に関係があると言えます。私自身、ウェ
公開日 : 2020年10月11日 カテゴリー : 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) は、ウェブデザインの要であると言えるでしょう。 ところで、この IA によってユーザーにもたらされる「情報」とは、何でしょうか?「情報」と「情報でないもの」があるとして、その違いは何なのでしょうか? 「情報」を意味する英語の「information」という語は「in + form」の名詞形で、「(人の頭の) 中に形づくられるもの」というニュアンスが含まれています (参考 : inform | Online Etymology
公開日 : 2020年8月30日 (2020年9月6日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームのテキスト入力を補完するインタラクションとして、「オートコンプリート」があります。テキストボックスに文字をタイプし始めると、それに呼応して、タイプされた文字列と部分一致する入力値候補が一覧として提示され、ユーザーはその中から入力値を選択できるという、コンボボックス型のインターフェースです。ミスタイプ (TYPO) の軽減、情報のファインダビリティの向上、といった効果が期待できます。 オートコンプリートのコンボボックス ちょっと文字入力するとすぐに入力値候補のオプションが出てきて、あとはマウスでクリックする (または指でタップする) だけで入力ができてしまうのがオートコンプリートの特長です。とても便利で有用なだけに、この UI を採用する際には、より多様なユーザーが利
公開日 : 2020年6月27日 カテゴリー : アクセシビリティ / 情報設計 (IA) ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェースであっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリーンリーダーなど) に伝達することができます。 アクセシビリティに関心のある制作者
公開日 : 2020年6月13日 (2020年6月21日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブコンテンツの UI 設計において、デフォルトでは全体俯瞰を重視するなどの理由で概要コンテンツのみを提示し、ユーザーの任意で詳細コンテンツを展開表示させたい、というケースがあるかと思います。まさにそのための HTML 要素として、<details> と <summary> の組み合わせがあります。 「Can I Use...」によると、IE と Opera Mini 以外は、<details> および <summary> 要素をサポートしているようです。Windows 10 のデフォルトブラウザである Edge も対応するようになった (†) ので、デスクトップ / モバイルを問わず、概ね問題なく使えるようになってきたのかな、という印象です。 † ただしレガシー版 (
公開日 : 2020年2月22日 (2021年7月17日 更新) カテゴリー : アクセシビリティ ウェブコンテンツのデザインにおいては、ユーザーに情報を識別させる手段として、色だけに依存しないことが重要です。W3C が勧告している WCAG (Web Content Accessibility Guidelines) (日本語訳) でも下記のとおり達成基準が設けられています。 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 出典 : WCAG 2.1 達成基準 1.4.1 「色の使用 (レベル A)」 言い換えれば、グレースケール (色を排除した状態) で表示しても、情報が十分に識別できる必要があります。そうすることで、様々な色覚特性を持ったユーザーや、モノクロの印刷または画面表示 (電子ペーパーなど) を介して閲覧するユーザ
公開日 : 2019年12月29日 (2023年9月6日 更新) カテゴリー : アクセシビリティ 米国の非営利団体 WebAIM (Web Accessibility in Mind) が開発しているウェブアクセシビリティ検証ツール「WAVE」が、2019年10月にアップデートされました。 検証対象のウェブページ上で「どこが問題か」をグラフィカルにオーバーレイ表示してくれるので、とっつきやすい (開発者以外のプロジェクト関係者ともビジュアルで情報共有しやすい) のが特長です。私自身、かれこれ10年以上 WAVE を愛用していますが、アクセシビリティ評価の最初の段階で、粗くチェックする (見出し構造、画像の alt、箇条書きやテーブル、フォームのラベル、aria 属性など、問題になりそうなところをざっと見て当たりをつける) のに重宝しています。 今回の WAVE のアップデートでは、UI
公開日 : 2019年12月19日 (2023年5月17日 更新) カテゴリー : ユーザビリティ / アクセシビリティ この記事は、Web アクセシビリティ Advent Calendar 2019 の19日目の記事です。 このたび監訳で関わらせていただきました「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、このクリスマスシーズンに出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。 言うまでもなく、ウェブにおけるフォームは、インタラクションの
公開日 : 2019年11月10日 カテゴリー : アクセシビリティ The Paciello Group が公開している配色コントラストチェックツール Colour Contrast Analyser (以下、CCA) の UI が、このほど日本語化されました。@motchie さんによる実装です。 UI が日本語表示された Colour Contrast Analyser (V1.2.0) WCAG 2.1 対応版の CCA がリリースされた直後から、日本語ローカライズの issue (インフォアクシアの植木さんによる) が立っていたので楽しみにしていましたが、私自身 UI 改善でコントリビュートさせていただいた CCA がこのように日本語化されて、とても嬉しいです。 ウェブアクセシビリティ委員会 (WAIC) が翻訳公開している WCAG 2.1 日本語版 の用語と一貫性がありますの
次のページ
このページを最初にブックマークしてみませんか?
『ウェブユーザビリティ向上を支援するWebsite Usability Info』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く