Skip to content

Instantly share code, notes, and snippets.

View davatron5000's full-sized avatar
🚀
Making Luro

Dave Rupert davatron5000

🚀
Making Luro
View GitHub Profile
@davatron5000
davatron5000 / gist:1012434
Created June 7, 2011 15:04
List of Things You'd like Blacklisted in Goodfoot
We're open to suggestions, especially international (Euro/UK) chains we are ignorant to. Just comment below!
/* Application.js -
* This could be improved 10 fold but I'll upt it up on here anyway :)
*
* @require jQuery hashchange plugin by Ben Alman http://benalman.com/projects/jquery-hashchange-plugin
*
* @var errorTmpl - template for injected error message.
* @var errorHex - verbiage for invalid hex formatting (could be better).
* @var errorNull - verbiage for call with no results.
*
*/
@davatron5000
davatron5000 / form.html
Created March 29, 2012 03:30
How to freaking line up checkboxes n' stuff.
<h1>Contact</h1>
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
layout title description categories
post
How-to: Future proof your accessibility efforts.
Ways to make your accessibility effort as future proof as possible.
How-tos
layout title description categories
post
How-to: Future proof your accessibility efforts.
Ways to make your accessibility effort as future proof as possible.
How-tos

How-to: Use role="application"

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

  1. Use if your page has no resemblance to a classic document in roughly over 90% of its content
  2. Use clear labels within your application

MYTH: Screen readers don't use JavaScript

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.

Javascript enabled: 98.6% vs. Javascript disbaled: 1.4%

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.

How-to: Use TITLE attributes

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

Quick Tip: WAVE your website

How-to: Have Great Color Contrast

2 benefits

  • Text is readable by people with low vision.
  • Luminosity difference aids color blindness.

Notable ratios

  • 4.5:1 for small text
  • 3.0:1 for large text (18pt/14pt Bold) (24px/19px Bold)
  • 2.5:1 for links