記事カテゴリー : ユーザーインターフェース (UI)
(全137件 : 1/14ページ)

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

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

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

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

ファセットナビゲーション

ファセットナビゲーションは、膨大な検索結果をさまざまな側面 (ファセット) から絞り込むことができる機能です。この記事では、ファセットナビゲーションに期待されるユーザー体験およびインタラクション要件、そしてアクセシビリティについて検討します。

WAI-ARIA 実装の5つのルール

ウェブアクセシビリティを高めるための実装方法のひとつに、WAI-ARIA があります。WAI-ARIA はとても有用ですが、無節操に使ってよいわけではありません。「Using ARIA」という W3C 文書に、5つのルールが定められているので、簡単にご紹介します。

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