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:
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.
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.”
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 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.
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
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.
Creating meaningful links
Make Sure Links are Recognizable
Differentiate links in the body of the page with underlines or something other than color alone.
Design Link Focus Indicators
Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.
Design a "Skip to Main Content" Link
A link for keyboard users to skip navigation should be at the top of the page. It can be hidden, but should be visible when it receives keyboard focus.
Ensure Link Text Makes Sense on Its Own
Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing.
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 (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 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.