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:
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.
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.
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.