Principles of Accessible Design

Web Accessibility for Designers Infographic

Web Accessibility for Designers

Great web accessibility starts in the design.

Structuring your design

Plan Heading Structure Early

Ensure all content and design fits into a logical heading structure.

Consider Reading Order

The reading order should be the same as the visual order.

Styling your text

Provide Good Contrast

Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.

Use True Text Whenever Possible

True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.

Watch the Use of Caps

All caps can be difficult to read and can be read incorrectly by screen readers.

Use Adequate Font Size

Font size can vary based on the font chosen, but 10 point is usually a minimum.

Remember Line Length

Don’t make it too long or too short.

Designing with color

Use Animation, Video, and Audio Carefully

If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.

Don’t Rely on Color Alone

Because users often can’t distinguish or may override page colors, color cannot be the only way information is conveyed.

Design Accessible Form Controls

Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.

NVDA: an Open Source Screen Reader

NVDA (Non-visual Desktop Access) is a free and Open Source Screen Reader for Windows operating systems.

With this application, blind and visually impaired people are able to use most of the applications available in the market for windows operating system. It obviously allows even to surf the web with the most popular browsers, such as Internet Explorer, Firefox or Chrome, in a similar way to JAWS and Window-Eyes. NVDA supports 26 hotkeys to quickly move to webpage elements and also has an elements list that provides access to all the links, headings, and ARIA landmarks on a page. NVDA’s “focus mode” is used when interacting with forms, and it works much like JAWS’s “forms mode” to effectively enter form data.

NVDA keyboard overlay

NVDA also works with WordPad, Notepad and supports the basic functions of Outlook Express, Microsoft Word 2000/XP/2003 and Microsoft Excel 2000/XP/2003. Support for the free office suites LibreOffice and OpenOffice.org requires the Java Access Bridge package. Additionally, NVDA supports the WAI-ARIA standard for Accessible Rich Internet Applications, placing web applications within the reach of blind users.

Although at the moment it cannot be compared to the top commercial screen readers in the market, thanks to its Open Source framework is rapidly catching up and it can still be considered a good alternative solution.

Here is the link of the official website: http://www.nvda-project.org and we’d like to also link to a very interesting article named “Using NVDA to Evaluate Web Accessibility”:  http://webaim.org/articles/nvda/

NVDA would be a good reference for all the people who are working with web accessibility, and obviously for those who don’t want to spend a lot of money buying  a commercial screen reader. You can simply download the portable version, run it and point your browser at the website that you’d like to test. This tool will certainly help you get an idea of whether your website can be easily read from people with sight disabilities.



ChromeVox: A Screen Reader for Google Chrome

The ChromeVox screen reader is an extension for the Google Chrome browser that brings the speed, versatility, and security of Chrome to visually impaired users.

ChromeVox Accessibility Extension

Unlike most accessibility software, it is built using only web technologies like HTML5, CSS and Javascript. ChromeVox was designed from the start to enable unprecedented access to modern web apps, including those that utilize W3C ARIA (Access to Rich Internet Applications) to provide a rich, desktop-like experience. This enables visually impaired users to experience the power of web applications while also giving developers a way to verify the accessibility of their web applications.

Its simple yet powerful navigation is easy to learn and quickly gets new users up to speed browsing web sites and web-based applications eyes-free. Check out the documentation at chromevox.com for the user guide, tutorial, keyboard shortcut and developer reference guides.

Note: ChromeVox is still in development and currently doesn’t work in conjunction with desktop screen readers. In order to best use ChromeVox on your computer, you will need to disable your desktop screen reader when using ChromeVox.


Other Google Accessibility extensions worth checking out are:

  • ChromeVis: This extension magnifies any selected text on a webpage. You can change both the lens text color and the lens background color.
  • ChromeShades: Reformats everything in your browser as text-only, organizing it more like how a blind user would perceive the page with a screen reader.
  • ChromeLite: ChromeLite makes the web to display as text-only, just as how the web was originally conceived and the way a blind person would perceive it.

Braille Smartphone Prototype ready for testing

Braille-smartphone

A new braille smartphone is being developed by Sumit Dagar, a National Institute of Design post-graduate, who teamed three years ago with the IIT Delhi and the LV Prasad Eye Institute.

The innovative prototype comes with a touch-screen that elevates and depresses at specific spots, emulating a Braille display, allowing blind users to read and send emails and text messages. This type of technology is known as Shape Memory Alloy: the idea is that each individual spot possesses “memory” with which it can remember its initial state after rising to form a Braille character.

Additionally, the phone makes extensive use of sound and vibrations to help the user recognize the different functions different functions.

The first model is expected to be available by the end of 2013 and retail for a price of about $185. Dagar also confirmed that more advanced versions of the smartphone are on the works.




Sources:

Things that Sighted People can learn from Blind People

In this video, Tommy Edison, who has been blind since birth, gives four household tips that sighted people can learn from blind people.



Tommy is now producing videos that reveal a glimpse into his life and the funny challenges that he faces daily, such as what it’s like for someone who is blind to use an ATM or how some people who are visually impaired may organize their money.

One of the most interesting videos Tommy has produced is the story of how his parents told him he couldn’t see. Because being blind was all he’d ever known, he never figured that there was something wrong with him. He says that he doesn’t remember the exact moment when he was told about it, but being blind is natural and normal as far as Tommy is concerned. He doesn’t think he’s missing anything. “To us, my family, it was normal,” he says. “It was all I knew.” It’s quite apparent from his videos that Tommy has a great sense of humor. Other interesting videos include: ‘Best Things about Being Blind’, ‘Why Nature Scares Me’ and the ‘Blind Basketball’ series.

Tommy is also reviewing movies as the Blind Film Critic. With his unique and interesting perspective, Tommy says “I watch movies and pay attention to them in a different way than sighted people do. I’m not distracted by all the beautiful shots and attractive people. I watch a movie for the writing and acting.”

In addition to being the Blind Film Critic, Tommy has been a radio professional for over 20 years, having spent the last 16 at STAR 99.9 FM in Connecticut as a traffic reporter. Tommy’s engaging personality, along with his on-air excellence and entertaining demeanor has garnered him much media attention.

For more information about Tommy Edison head over to:

BlindFilmCritic YouTube Channel
http://www.youtube.com/user/BlindFilmCritic

BlindFilmCritic.com
http://blindfilmcritic.com/

Twitter
http://www.twitter.com/blindfilmcritic

Facebook
http://www.facebook.com/tommy.edison

Instragram
http://instagram.com/blindfilmcritic

Tumblr
http://blindfilmcritic.tumblr.com

Google+
http://plus.google.com/u/0/106996822775667182469

iTunes Podcast: Audio Only Versions
http://itunes.apple.com/us/podcast/tommy-edison/id511201251

Tommy Edison
Tommy Edison