Category Archives: Accessible Web

Make your WooCommerce store accessible slide

“How to make your WooCommerce store accessible” Slide Presentation

To contribute to the ‘HACK-cessibility Days‘ on May 19th and 20th, an awareness event for software developers, designers, manufacturers, and others, AccessibleWeb has created a Slide Presentation titled “How to make your WooCommerce store accessible” that you can view below:

The Presentation was prepared with Google Slides by Rafael Minuesa from AccessibleWeb, based on the original Post found at:

You can view and download the original presentation from:

New EU directive requires public sector websites and mobile applications to be accessible

Representatives of EU governments, the European Parliament, and the European Commission have drafted the first mandatory rules to enforce accessibility on European public sector websites and mobile apps. These include state, regional and local authorities, and bodies and associations serving the general interest that are governed by public law.

visual description of website' image

The rules will include guidelines on providing descriptions of non-textual content for persons with visual limitations, creating content that can be better presented across a range of devices that can be browsed without a mouse, making older content available to citizens in accessible form on demand, making mandatory for government videos to have closed captioning or another accessible alternative, including live streaming within a maximum of 14 days of broadcast, or providing accessibility options for online services that involve paying fines or fees. Additionally it must be clearly stated on each website what parts are not accessible.

The scope of the directive has not only been extended to mobile applications, which are more popular than websites, but also to extranets and intranets, to allow employees and students to access information that is essential in their daily lives.

The directive will enter into force 20 days after its publication in the EU Official Journal. European member states will then have 21 months to adopt national legislation to comply with it, and they must start applying the new rules to new websites one year later. For older websites the deadline is two years and for mobile apps 33 months.

Andrus Ansip, Vice-President for the Digital Single Market, welcomed the agreement:

“Internet access should be a reality for everyone. Leaving millions of Europeans behind is not an option. Tonight’s agreement is an important step towards a Digital Single Market, which is about removing barriers so that all Europeans can get the best from the digital world.”

Günther H. Oettinger, Commissioner for the Digital Economy and Society, said:

“It is not acceptable that millions of European citizens are left behind in the digital society. The agreement that we have just reached will ensure that everyone has the same opportunity to enjoy the benefits of the internet and mobile apps, to participate in society to a fuller extent and to lead a more independent life.”

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:


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


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:

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 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: and we’d like to also link to a very interesting article named “Using NVDA to Evaluate Web Accessibility”:

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.