One-Stop ‪‎Accessibility‬ resources for Developers from W3C

The World Wide Web Consortium (W3C) has launched W3C Developers avenue, a one-stop page featuring the offerings and tools W3C has for Web Developers.

Among the offerings and tools W3C has for Web Developers are:

  • Free and Open-Source W3C validators, checkers and tools
  • Discourse, to discuss and learn
  • W3C Community Groups to propose and incubate new web technologies
  • Learning, in a W3Cx MOOC or a course from W3DevCampus
  • Testing the Web Forward

The resources are organized into 4 sections:

Learn

In the comfort of your browser, learn Web technologies such as HTML, CSS from the people who create them.

Tools

Lead your code to its full potential with great and open source tools.

Get Involved

Get involved in the creation of Web standards. Yes, that’s where cool people hang out.

Test the Web Forward

W3C’s one stop shop for Open Web Platform testing.

Jeffrey Jaffe, CEO of the W3C, explained that W3C Developers would provide free and Open-Source W3C validation tools and accessibility checkpoints.

More info at:
https://www.w3.org/blog/2015/10/w3c-releases-web-developer-avenue/

W3C Accessibility guidelines for Developers

 

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.