Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
カラー・コントラスト・アナライザー 2013J｜エー イレブン ワイ ［WebA11y.jp］
「カラー・コントラスト・アナライザー」は、色のチェックツールです。前景色と背景色のコントラストをチェックしたり、色覚の違いによる見え方をシミュレーションしたりすることができます。 このソフトウェアは、The Paciello Groupが提供しており、Windows版とmacOS / OS X版があります。 色のコントラストのチェック ウェブコンテンツの前景色と背景色のコントラストが十分かどうかを判定する基準には、W3Cの『WCAG 2.0』で定義されている「コントラスト比」の計算式を用いています。このコントラスト比を用いた達成基準は、そのまま日本工業規格の『JIS X 8341-3:2016』でも採用されています。 1.4.3 コントラスト（最低限レベル）に関する達成基準 テキスト及び文字画像の視覚的提示には，少なくとも4.5:1 のコントラスト比がある。ただし，次の場合は除く（レベル
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
WEB担当者必見！アクセシビリティで業界を先駆けよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターのYUKIです。 私が書いた前回の記事、“Amazon”から学ぶ、4つの観点から考察するUXデザインで、簡単にお話したウェブアクセシビリティについて、 今回は更に詳しくご説明したいと思います。また、世界の大企業では、このトピックをどのように考え、取り組んでいるかを知りたい方は、以下のリンクにあるサイトを参照して頂ければと思います。 Appleのアクセシビリティへの取り組み Samsung Electronics のアクセシビリティに関する考え方 ウェブアクセシビリティとは何か ウェブアクセシビリティとは、「年齢や身体的条件に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」ならびにその度合いを意味します。 ここで言う、「年齢や身体的条件」は以下のようなものが含まれます。 全盲 弱視 色覚障害 聴覚障害 肢体不自由 知的障害 高齢者 どうして重
WebAIM: Contrast Checker
Explanation Enter a foreground and background color in RGB hexadecimal format or choose a color using the Color Picker. Enter an Alpha value to adjust the transparency of the foreground color. Use the Luminance slider to adjust the perceived lightness of the color. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast rat
Android のアクセシビリティ機能 | Accessible & Usable
公開日 : 2012年9月17日 (2018年1月20日 更新) カテゴリー : アクセシビリティ 先の記事「iOS 標準のアクセシビリティ機能 (支援技術)」で、「モバイル機器の中でも、アップルの iOS デバイス (iPhone や iPad) は、アクセシビリティの面で他よりも一歩先んじている」と書きましたが、ライバル OS である Android はどうなのでしょうか。 「スクリーンリーダー利用に関するトレンド : 2012年5月実施の WebAIM 調査より」という記事中の「モバイル機器で音声読み上げをする人が増加している」で、モバイル環境で使用されているスクリーンリーダーの順位を書きましたが、iOS の VoiceOver が48.7％だったのに対し、Android は (TalkBack の5.4％と Mobile Accessibility の3.8％を足して) 9.2％に
アクセシビリティ - 視覚
視覚に障がいがある方にも、単に大きな文字を好む方にも。ディスプレイをカスタマイズしたり、デバイスをコントロールしたり、周囲の環境を確認するのに役立つ機能を紹介します。 VoiceOverは、デバイス上で起きていることを正確に説明する業界最先端の画面読み上げ機能です。要素の説明を耳で聞くことで、タッチスクリーンやトラックパッド上でのシンプルなジェスチャーやBluetoothキーボードを使って、画面上で簡単に移動できるようにします。タッチスクリーンやトラックパッド上でダイヤルのように機能する独自のロータージェスチャーを使えば、ウェブサイトなどのコンテンツをブラウズするのも思いのまま。人物、オブジェクト、テキスト、グラフも、かつてないほど詳しく説明します。VoiceOverは60以上の言語と地域で利用でき、ニーズに合わせて細かくカスタマイズするオプションもあります。音声フィードバック用の声の中か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
