ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。とくに、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「WAI-ARIA」を実装に取り入れてる人もいるかもしれません。今回はウェブ制作に関わる人に役立つウェブアクセシビリティの基本を紹介します。 ウェブアクセシビリティのガイドライン「WCAG」 世界中のウェブアクセシビリティの基本となるガイドラインとして、W3Cの「Web Content Accessibitility Guidelines」(通称：WCAG)があります。現在は2008年に勧告された「WCAG 2.
WAI-ARIAの考え方と使い方を整理しよう
（※ P.17、P.23、P.30、P.77を加筆修正しました。2017-03-09） 2017-03-05（日）にサイボウズ大阪オフィス セミナールームにて行われた「D2D アクセシビリティ勉強会 2017」でのスライドです。
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
WebAIM: 10 Easy Accessibility Tips Anyone Can Use
Today is Global Accessibility Awareness Day (GAAD). To celebrate and to help promote accessibility, here are 10 simple accessibility tips that most anyone can implement today into their web site’s HTML and CSS to make it more accessible. 1. Add Alternative Text to Your Logo Alternative text is presented to blind screen reader users in place of images they cannot see. Every image that conveys conte
Practical ARIA Examples
The HTML (ARIA and ARIA-associated attributes displayed in green) <form action=""> <fieldset> <legend>Login form</legend> <div> <label for="username">Your username</label> <input type="text" id="username" aria-describedby="username-tip" required /> <div role="tooltip" id="username-tip">Your username is your email address</div> </div> <div> <label for="password">Your password</label> <input type="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
HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計
aria-required ウィジェット プロパティの例を以下に示します。 <label for="username">User name:</label> <input id="username" type="text" aria-required="true"> このコードでは、フォームの入力フィールドが必須になります。 図 3 は、ARIA の全状態と全プロパティをまとめたものです。詳細については、bit.ly/OlbLeh (英語) を参照してください。 ARIA と ARIA のロール、状態、およびプロパティについてある程度理解したところで、この ARIA を使用してプログレッシブ エンハンスメントを適用したアクセシビリティ対応の Web サイトを作成しましょう。 アクセシビリティ対応の Web サイトを作成する 通常の Web サイトには、多くのコンポーネントが含まれています。
ARIA Validatorを利用したWAI-ARIAの検証 | アクセシビリティBlog | ミツエーリンクス
WAI-ARIAを使ってアクセシブルなコンテンツを作成したいと考えていても、WAI-ARIAの指定方法に問題がないかどうか不安、という方も多いと思います。そのような場合には、まずはWAI-ARIAの仕様に従っているかどうかを確認すると良いと、私は考えています。というのも、明白なミスを防ぐことができる制約がWAI-ARIAの仕様にはいくつか定められているためです。この記事では、ARIA Validatorを使った検証方法とWAI-ARIAの仕様で定められている制約のいくつかを紹介します。 ARIA ValidatorはページがWAI-ARIAの仕様に従っているかどうかをチェックするGoogle Chromeの拡張機能です。記事執筆段階での最新版は0.10です。 現時点ではまだベータ段階とのことですが、閲覧中のページに対して様々な検証を行うことができます。ただし、ARIA Validatorは
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
Use Radio Buttons For Single Option » cssmojo
In Designing an Effective Donate Form Brad Frost recommends using buttons in lieu of radio buttons, citing a tweet from Luke Wroblewski. I disagreed and Brad responded saying he had a different point of view. After more people got involved the demo was updated to use radio buttons, but I think there is still room for improvement; I intend to demonstrate that Plain Old Semantic HTML (POSH) + CSS ca
What ARIA does not do - TPGi
ARIA is a set of attributes that can be added to HTML elements (and other markup languages) to communicate accessibility role, state, name and properties which are exposed by browsers via platform accessibility APIs. This provides a common, interoperable method of relaying the information to assistive technologies. That’s it. It is the same method used by browsers to convey the inbuilt (or default
An Introduction to WAI-ARIA — SitePoint
It might come as a shock, but I tell you: The web has changed! The last eight years have seen the rise of Ajax, JavaScript, HTML5, and countless front-end frameworks. Consequently, the internet is no longer a place of static HTML pages, as funny as they sometimes are. Rather, it has become a playground for complex, almost desktop-like web applications, each with their own widgets, controls, and be
HTML5 + WAI-ARIA: 入門篇
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WAI-ARIA珍プレー好プレー
HTML5 と SVG で考える、これからの画像アクセシビリティ
Notes on fixing incorrect table structure using ARIA - TPGi
How To Make Modal Windows Better For Everyone — Smashing Magazine