アイコンフォントのアクセシビリティ向上 | Accessible & Usable
公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
Webアクセシビリティ・ファースト
Web業界やその界隈には、「ファースト」と名の付くフレーズがいろいろあります。 モバイル・ファーストユーザー・ファーストコンテンツ・ファーストコンテキスト・ファーストオフライン・ファースト どれも間違ってはいないし、それぞれに有意義な考え方。 けれど、Webデザインにおいて、私が何を第一に重視するかと問われれば。 アクセシビリティ これ以外には考えられません。 かつてWebの創始者、Tim Berners Lee卿は言いました。 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. WebがWebであるために必要なこと、それは普遍的であること、誰に対してもアクセシブルであること。誰でも、どんなデバイスからでも、コンテンツ
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
アクセシビリティから変わるビジュアルデザイン
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
テーブルとアクセシビリティ -- ごく簡単なHTMLの説明
大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者（聴取者）に伝える機能を持っています（WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました）。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足：テーブルsummary属性の読み上げ 音声ブラウザとth要素 表（テーブル）は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニバーサルデザイン - FUJITSU Japan