You know they help make pages more accessible for people using assistive technologies, but do you know *how* ARIA's Landmark Roles work? Accessibility consultant Leonie Watson offers a quick demo of exactly how ARIA's Landmark Roles make life easier for people browsing with assistive technologies.

Hopefully you’re using ARIA roles given that they’re such a simple, easy win with pretty much no downside, but have you ever wondered exactly how ARIA roles help people using assistive devices? In the video above accessibility consultant Leonie Watson gives a quick demo of exactly how screen readers benefit from landmark roles.

If you’re sold be sure to read up on our earlier coverage, including this post on how to add landmark roles to your site. The site Watson mentions in the video is also a great ARIA resource. Also have a look at accessibility guru Steve Faulkner’s recent post over on the The Paciello Group blog.

And note that, as Faulkner writes, “over time the necessity of explicitly assigning landmarks will lessen as browsers build in ARIA landmark roles to newer HTML element semantics.” For now though, even if you’re already using the new elements, it doesn’t hurt to add the roles as well.

The Accessibility Project wants to shed some light on a topic many developers shun -- web accessibility. It's not always easy to do, but making the web accessible to everyone was part of Tim Berners-Lee's original vision for it and indeed accessibility remains a cornerstone of good web design.

The Accessibility Project is relatively new, but already has a ton of great resources — everything from tutorials on how to hide content but still make it accessible to screen readers, to a handy checklist you can use to make sure you’ve covered the accessibility basics before you launch.

There’s also a great collection of links to accessibility resources, tools and tutorials around the web.

The Accessibility Project is very much a community effort, with all of the source code and posts on the site hosted on GitHub. If you’d like to contribute, head on over and read through the contribution guidelines before you fork the project.

Making the web accessible to everyone has been central to the mission of the W3C since the dawn of the browser. Accessibility guidelines abound, but sadly, easy to use tools are less common. Developer Lea Verou's new color contrast ratio tool changes that by giving developers a simple way to test their color schemes and create more readable websites -- and that benefits everyone on the web.

Making websites accessible to users with disabilities — things like poor vision, blindness, limited dexterity — has been central to the mission of the web’s overseers since the dawn of the browser.

Following accessibility guidelines actually helps just about everyone, especially when it comes to making your site readable. And one of the cornerstones of accessibility is making sure your background and text colors have proper contrast ratio. But how do you know what’s a proper contrast ratio? For that turn to WCAG 2.0, a set of accessibility guidelines that most government and many private sector websites adhere to.

Unfortunately, while the W3C has plenty of guidelines for building the web, it’s not in the business of creating tools to go with them, which means bringing the guidelines into the real world can sometimes be a hassle. That’s why developer Lea Verou built this awesome contrast ratio tool. Verou works for the W3C (though the tool is not an official W3C project) and needed a way to ensure that her color choices passed WCAG muster. That’s exactly what the contrast ratio tool does: give it any form of CSS color — hex, rgb(), rgba(), hsla(), etc — and it will automatically calculate the contrast ratio and let you know which level of the WCAG guidelines your contrast meets.

Verou’s contrast calculator even accepts semi-transparent colors for sites using overlays. To make the semi-transparent colors work Verou had to write her own algorithm. For semi-transparent backgrounds, the WCAG contrast ratio is presented with an error margin, since the actual contrast can vary depending on what’s under your semi-transparent overlay.

The contrast ratio tool supports all modern browsers and has “basic support for IE9.” The code is available on GitHub.

Also worth noting is Verou’s blog post on accessibility and contrast ratios. Like many of us, Verou “used to think that WCAG-mandated contrast ratios were too restrictive and basically tried to force you to use black and white.” The truth is, as Verou writes, “in practice, I found that in most cases they are very reasonable: When a color combination doesn’t pass WCAG, it usually is hard to read.”

]]>http://www.webmonkey.com/2012/10/create-more-accessible-color-schemes-with-contrast-ratio/feed/0Video: Google Chrome Extensions for Accessibilityhttp://www.webmonkey.com/2010/06/video-google-chrome-extensions-for-accessibility/
http://www.webmonkey.com/2010/06/video-google-chrome-extensions-for-accessibility/#commentsWed, 30 Jun 2010 22:24:12 +0000Michael Calorehttp://www.webmonkey.com/?p=47915Making websites accessible to users with disabilities — things like poor vision, blindness, limited dexterity — has been central to the mission of the web’s overseers since the dawn of the browser. There are a few browser extensions out there to help the disabled surf the web comfortably. Google has posted this video to show […]

Making websites accessible to users with disabilities — things like poor vision, blindness, limited dexterity — has been central to the mission of the web’s overseers since the dawn of the browser.

There are a few browser extensions out there to help the disabled surf the web comfortably. Google has posted this video to show us what the company is doing to improve the accessibility of its browser, Chrome. The video highlights a few of the extensions that have already been built for this purpose, like Chrome Vis and Keyboard Navigation.

There’s also some advice for extensions builders interested in accessibility, like remembering to include text color, text size and keyboard shortcuts options in your extensions. More here.