記事カテゴリー : ユーザビリティ
(全142件 : 1/15ページ)

ステッパー (stepper) による数の入力

数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる UI コンポーネントとして、増減ボタンを押して値を入れることができる「ステッパー」があります。この記事では、ステッパーの利点や、アクセシビリティを担保した実装について、考えてみたいと思います。

オートコンプリートのアクセシビリティを考える

フォームのテキスト入力を補完するインタラクションとして、「オートコンプリート」があります。テキストボックスに文字をタイプし始めると、それに呼応して、タイプされた文字列と部分一致する入力値候補が一覧として提示され、ユーザーはその中から入力値を選択できるという、コンボボックス型のインターフェースです。とても便利で有用なだけに、この UI を採用する際には、より多様なユーザーが利用できるようにアクセシビリティもしっかりと担保したいものです。

WCAG に出てくる「名前」とは?

WCAG (Web Content Accessibility Guidelines を読むと、「名前」という用語がところどころで出てきます。 この「名前」とはいったい何でしょうか?

<details> と <summary> によるコンテンツの折り畳み / 展開

ウェブコンテンツの UI 設計において、デフォルトでは全体俯瞰を重視するなどの理由で概要コンテンツのみを提示し、ユーザーの任意で詳細コンテンツを展開表示させたい、というケースがあるかと思います。まさにそのための HTML 要素として、details 要素と summary 要素の組み合わせがあります。

YouTube のチャプター機能

YouTube で、動画内にチャプター (内容ごとの区切り) が付けられるようになりました。

Essence of "Form Design Patterns" (アクセシビリティの祭典 2020)

2020年5月22日に開催された「アクセシビリティの祭典 2020」に、ボーナストラック的な位置づけで登壇させていただき、「Essence of "Form Design Patterns"」というテーマでお話をしました。

「Form Design Patterns」要点一覧 (その3)

監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。

「Form Design Patterns」要点一覧 (その2)

監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。

「Form Design Patterns」要点一覧 (その1)

監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。

Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド

「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」の日本語訳です。