はてなブックマーク

公開日 : 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年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

公開日 : 2022年12月19日 (2024年6月19日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。 ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。 見出し (およびそのレベル) アクセシブルな名前 (画像の alt、アイコンの aria-label など) ランドマーク WAI-ARIA (ユーザーに動的な状況変化を伝達するためにどの aria 属性を用いるか、ユーザーの理解支援

公開日 : 2022年10月17日 カテゴリー : アクセシビリティ / ユーザビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。

公開日 : 2020年11月15日 カテゴリー : ユーザビリティ 「コンピュータは、むずかしすぎて使えない！」という本があります。ペルソナの提唱者として有名なアラン・クーパー (Alan Cooper) 氏の古典的名著で、日常 (仕事や生活) の様々な場面でソフトウェアテクノロジーによる道具が浸透している中、テクノロジーに詳しくない大半のユーザーにとっても使いやすくなるような、操作 (インタラクション) のデザインの重要性を説いた書籍です。 1999年の出版 (日本語訳の出版は2000年) で、表現がやや過激であったり (なにせ原題が「The Inmates are Running the Asylum」という...)、内容面で古くなっている部分もありますが、「目標駆動形デザイン (Goal-Directed Design)」や「ペルソナ / シナリオ法」の原典とも言える本書は、今読んで

公開日 : 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日 (2024年6月21日 更新) カテゴリー : アクセシビリティ / ユーザビリティ / 情報設計 (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日 (2024年10月14日 更新) カテゴリー : アクセシビリティ 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年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