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:
To celebrate the Global Accessibility Awareness Day (GAAD) on May 19th and 20th, an awareness event for software developers, designers, manufacturers, and others, has been organized by the Ancona branch of the UICI (Unione Italiana dei Ciechi e degli Ipovedenti).
During the event there will be several initiatives:
– sessions and laboratories with which to learn the theory and do some practice, with the support of experts in the various technologies and the opportunity to meet with disabled users, to test if what we are doing is actually accessible. We will talk, for example, about UX and design, development (web, mobile, desktop), IoT and the implementation of devices to improve the quality of life of people with disabilities.
– “sensorial” experiences to better understand, first of all, what it means to live with disabilities: among them there will be, for example, a “dark dinner” and guided tours to a “Tactile Museum”.
These experiences are very important because it is useless to talk about developing accessible solutions (whether they are software or electronic devices) unless you are actually experiencing how a disabled user relates to the “outside world”.
– CoderDojo: since today’s little ones will be tomorrow’s “hackers”, we have set up initiatives to transmit, beyond the passion for technology, the importance of themes such as accessibility!
The event will take place in Ancona on May 19th and 20th (Friday and Saturday).
Since the event has been organized by the Ancona branch of the UICI (Unione Italiana dei Ciechi e degli Ipovedenti), some of the initiatives will be more focused on the topic of visual disabilities, while others will deal with the aspect of disabilities in general.
More information, as well as how to sign up (free) at the event, are available on http://hackcessibilitydays.it/
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.
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.
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.