| layout | title | description | categories | |
|---|---|---|---|---|
post |
How-to: Future proof your accessibility efforts.
|
Ways to make your accessibility effort as future proof as possible. |
|
Dave Rupert davatron5000
🚀
davatron5000
/ futureproof_a11y.md
Created
January 18, 2013 01:43
davatron5000
/ role-application.md
Last active
December 11, 2015 20:48
Summary: Use role="application" very sparingly, if at all.
NEVER use role="application" on a widely containing element such as <body> if your page consists mostly of traditional widgets or page elements such as links that the user does not have to interact with in focus mode. Using role="application" unnecessarily can cause huge headaches for any assistive technology user trying to use your site/application. Only put it on the <body> element if your page consists solely of a widget or set of widgets that all need the focus mode[^focusmode] to be turned on.
Do Use
- Use if your page has no resemblance to a classic document in roughly over 90% of its content
- Use clear labels within your application
davatron5000
/ myth-screen-readers-dont-use-javascript.md
Last active
December 12, 2015 05:08
A common misconception among web developers is that screen readers only read the non-JavaScript page. Due to this misconception, we sometimes assume it's unnecessary to make JavaScript apps and other functionality accessible. This is categorically false.
According to a May 2012 survey conducted by WebAIM, 98.6% of screen reader users have JavaScript enabled.
Be sure to make efforts to ensure that the JavaScript functionality (apps, custom UI controls, forms, etc) within your site is accessible. It could be as simple as opting for native links and form inputs instead of custom scripted form elements.
davatron5000
/ use-title-attributes-correctly.md
Last active
December 12, 2015 05:09
Short answer: Don't use them, except in special circumstances.
HTML title attributes are often perceived as an accessibility (and SEO) bonus, but the opposite is true. For screen reader users the content included inside of the title attribute is typically unncessary, redundant, and possibly not even used. Conversely, content being put in the title attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it's probably not necessary.
There are a few times when using a title attribute is appropriate:
- For
<frame>and<iframe>elements - For providing a label when a text label would be redundant
davatron5000
/ wave-your-website.md
Created
February 6, 2013 15:31
davatron5000
/ colorcontrast.md
Created
February 19, 2013 17:43
davatron5000
/ accessibleforms.md
Created
February 19, 2013 17:47
Sample Form
<label for="email">Email</label>
<input id="email" type="email" aria-required="true" />
Form validation
davatron5000
/ transcriptions.md
Created
February 19, 2013 18:04
1hr of video = 6-8 hours of transcription by a trained professional
davatron5000
/ placeholder_not_a_label.md
Last active
December 16, 2015 12:08
Form input placeholder attributes are helpful for providing tips to (sighted) users on the format of content required. Often times, due to design decisions, a placeholder is used to replace a more semantic label element. Unfortunately, accessible placeholder browser support isn't complete and placeholder often lack sufficient color contrast.
- Redesign to include a proper
label - Use
aria-labeloraria-labelledbyto provide assistive text - Visually hide
labelelements (in an accessible manner)
While we're paying attention to our placeholder text, be sure to add better contrast to you placeholder text:
davatron5000
/ introducing-timejump.md
Created
May 1, 2013 17:07
layout: post title: "Introducing TimeJump" tldr: "Drop-in deep linking for audio and video podcasts." published: true head: | <style type="text/css"> body { position:relative;