Progressive Enhancement And Data Visualizations | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Chris Scott. Chris has written for us before – always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it’s based on something old: the fundamentals of the web itself. This m
BBC Mobile Accessibility Guidelines
The BBC Mobile Accessibility Guidelines are a set of technology agnostic best practices for mobile web content, hybrid and native apps. The Guidelines are based on the requirements of bbc.co.uk content developed for UK audiences and for use with the technology commonly available in the UK. They are intended as a standard for BBC employees and suppliers to follow, however, they can also be referenc
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
? How to use As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over. This sample text attempts to visually demonstrate how readable this color combination is, for normal, italic, bold, or
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Recommendation 06 June 2023 More details about this document This version: https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/ Latest published version: https://www.w3.org/TR/wai-aria-1.2/ Latest editor's draft:https://w3c.github.io/aria/ History: https://www.w3.org/standards/history/wai-aria-1.2 Commit history Implementation report: https
Using ARIA to enhance SVG accessibility - TPGi
Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. In all other browser/screen reader combinations the SVG is ignored. ARIA enhanced SVG accessibility It is possible to enhance t
Tips for Creating Accessible SVG — SitePoint
Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know which aspects of SVG are accessible to whom, which are not, and what we can do to improve both. SVG 1.0 was released by the W3C in 2001. SVG 1.1 came along in 2003, and SVG 1.1 2nd edition i
色とデザイナーとアクセシビリティ | チャットワーククリエーターズブログ
お久しぶりです、デザイン部の守谷です。 ここしばらくクリエイターズブログでのアウトプットができていませんでした。その間、チャットワークと私の周りで何が起こっていたかというと、グローバル展開と合わせブランドカラー／ロゴの変更、それに合わせたチャットワークの各サイトのリニューアル、一番最近ではツールのカラーもブランド統一に合わせ変更になったのをご覧いただいていることと思います。 ちなみに、既にご利用の方はお気づきかと思いますが、今回のリニューアルではUI変更を行わずにテーマ（と一部アイコンの変更）のみの最小限での調整、という方針で進みました。利用者がたくさんいるチャットワークを大胆にいじって混乱を招くより、早々にカラーだけでも「チャットワークブランド」と合わせることが重要との判断からです。 色のみの変更、という場合、バランスだけ見ていればOK！簡単！速攻完了！そうは行きません。 もしもそれだけ
ウェブアクセシビリティと言われて、昔を思い出してみた話 | ウェブに関する雑談 | ブログ | フォルトゥナ
色って「見えている」ことが前提なわけですが・・・ この記事は、Web Accessibility Advent Calendar 2014の10日目の記事です。 僕はいつも色のことを話したり書いたりする機会が多いのですが、そもそも色というのは「見えている」ということが前提になっているものです。その「見えている」人の中でもいろんな色覚特性の人がいて、そういう人たちでも、きちんと見ることができるよねという基準として、コントラスト比が定められていたりします。 それを実現するためにはうんぬんという話を書こうと思っていたのですが、ちょうど昨日チャットワークの守谷さんが「色とデザイナーとアクセシビリティ」という素晴らしい記事を書かれていらっしゃったので、そちらを読んでいただくことにして、私は妄想に舵を切らせてもらいます。 実装系の話ではなく、漠然と考えていることをそのまま書いただけなので、オチは付かな
早稲田大学のサイトリニューアルはウェブアクセシビリティに配慮したものか? | Junnama Online
早稲田大学のサイトリニューアルはウェブアクセシビリティに配慮したものか? 公開日 : 2014-11-18 11:49:51 この記事はサイトの善し悪しやリニューアル内容の是非について述べたものではありません。また、筆者が所属するいかなる団体・会社の意見でもなく、あくまで個人の見解であることをのっけからでっかい文字で表明しておきます! 色々な方が所感を述べられていますが、アクセシビリティについての言及があって何だか物議を醸しているようなので、実際どうなのかを確認してみようと思ったのです。忙しいので、機械任せです。自分の所感はひとこと、ふたことにとどめます。とどめます。とどまるのか? とどめよう。 早稲田大学のサイトリニューアルはなぜスゴイのか？ | It's Real Intelligence! 7 早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春 Re:
早稲田大学のサイトリニューアルはなぜスゴイのか？
2014年11月5日(水)、早稲田大学公式サイトが、株式会社CINRAの手により、見事なリニューアルを遂げました。 プレスリリースに書かれた彼らの目論見通り、「国内外の大学と一線を画す、最新のグローバルサイト」と言えると思いますが、なぜ、国内屈指の大規模校である早稲田の公式が、ここまで個性的なサイトになっていると感じるのでしょうか。 日々大学サイトの構築に向き合うWebディレクターの立場から、その「スゴイ」理由を、少し考えてみました。 1 – 「メディアサイト」として尖らせたから 一般的に大学サイトは、ある程度メニュー内容も共通化され、情報公開に重きを置いた「ポータルサイト」として位置づけられることが多いと思います。 しかし、新しい早稲田のサイトは、細かいコンテンツは「別サイト」に任せ、新着記事とリンク集で構成される「メディアサイト」に大きく振ってきました。 海外大学サイトでは「News」
早稲田大学サイトのリニューアルにモヤっとした話
早稲田大学サイトのリニューアルにモヤっとした話 リニューアルした早稲田大学のサイトは古いブラウザを非推奨ではなく非対応としていますが、非対応にする必要性がわからなかったため、違和感を覚えました。 time2014/11/15 hatenabookmark- 早稲田大学のサイトが2014/11/5にリニューアルされたのですが、それについていろいろと議論が巻きおこっているようです。 まずは事実を整理 同大学曰く「国内大学のWebサイトの主流であった“文字中心”の情報伝達から、写真や動画、ピクトグラムなど、視覚に訴える要素を効果的に配した構成に一新」（プレスリリースから）した リニューアルしたのは主に一般・父母向けのサイト。受験生や在学生向けのサイトは別に存在し、そこへは外部リンクの形で飛ばす形としている。 推奨ブラウザを Windows(8,7,Vista)の場合、IE10以上、Mozilla
早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春
久しぶりにセミナー以外でブログ書きます。 このたび早稲田大学のWebサイトがリニューアルされました http://www.waseda.jp/top/ が、かなり論議になりそうなリニューアルなので、 情報設計専門家として内容を見てみます。 1.なにがグローバルなサイトなの？ 今回のリニューアルではIE10以降を対象外としていて、 普通に使っているIE7や8では見ることができません、 これはアクセシビリティ上かなり問題だと思います、 多くの人が目にする大学というサイトでノンアクセシビリティを貫くというのは、 いまの時代にそぐわないのではないでしょうか。 わざわざIE10にアップデートまでしてみるサイトでもないですしね。 ぜんぜんグローバルじゃありません。かっこ悪いです。 2.レスポンシブデザイン？ スマートフォン、タブレットに対応したサイトになったみたいですが、 そもそものとこ
Re: 早稲田大学のサイトリニューアルがなぜこんなにひどいのか。
2014年11月18日 著 hokorinさんのお書きになった早稲田大学のサイトリニューアルがなぜこんなにひどいのか。という記事が炎上してしまっているようです。何となく言わんとしていることが分かる部分はあれど、しかし全体的に言葉足らずな印象はあって、残念な感じがします。本件については当初、触れるつもりはなかったのですけど（論点が複数絡み合っている印象があり触れにくく感じました）、とはいえWebアクセシビリティについて書かれた記事でもありますので、その領域についてのみ、自分の考えを整理する目的で書いてみようと思いました。 今回のリニューアルではIE10以降を対象外としていて、普通に使っているIE7や8では見ることができません、 これはアクセシビリティ上かなり問題だと思います、多くの人が目にする大学というサイトでノンアクセシビリティを貫くというのは、いまの時代にそぐわないのではないでしょうか。
Contrast-A: Find Accessible Color Combinations
WCAG 2.0 Luminance Contrast Ratio Accessibility Color Picker
カルーセルとWAI-ARIA | アクセシビリティBlog | ミツエーリンクス
Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。 記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。 カルーセルのアニメーションは利用者が開始できるようにする 利用者がカルーセルを一時停止できるようにする コントロールにはテキストによるラベルがあることを保証する 表示中のパネルとそのコントロールが、視覚的にも機械
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative