Accessibility Guidelines
Contents
Overview
Magento application should be accessible for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. These are general guidelines that when adhere to, people with diverse range of hearing, movement, sight, and cognitive ability should be able to use.
Visual
1. Be mindful of text length
Don鈥檛 make textual content too long or too short.
2. Provide adequate contrast
Be extra careful with light shades of gray, orange, and yellow. Check your contrast levels here: http://webaim.org/resources/contrastchecker/ or here: http://www.paciellogroup.com/resources/contrastAnalyser
Acceptable
Not Acceptable
3. Limit the use of CAPS
All caps can be difficult to read and can be read incorrectly by screen readers.
4. Use appropriate font size
Large text: 18 px Bold (22 px Regular) or larger
Normal text: 13-14 px
5. Consider reading order
The reading order should match the visual order.
6. Keep the focus indicator visible
Ensure keyboard users can visually identify a focused link.
7. Design a 鈥渟kip 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 in keyboard focus.
Examples
http://www.standardchartered.com/en/
http://nemesisdesign.net/blog/accessibility/nice-css-skip-links-appearing-focus/
https://uie.paypal.com/ (Skip-To Widget)
8. Use animation, video and audio with caution
If used, provide a play/pause button. Avoid flashing or strobing content, which can cause seizures.Provide captions and other alternatives for multimedia.
9. Don鈥檛 convey content with color alone
Evaluate the design in grayscale. Make sure to use both shapes and color to differentiate icons.
10. Use images to enhance the experience for users with full vision
11. Make sure links are obvious
Differentiate link text from other text.
12. Doo not use content that causes seizures.
Content
1. Ensure that link text makes sense by itself
Avoid 鈥淐lick Here鈥 in link text. Ambiguous links such as 鈥淢ore鈥 or 鈥淐ontinue鈥 can also be confusing.
2. Provide text alternatives for non-text content.
3. Content should be present-able in different ways without losing meaning.
4. Content should appear and operate in predictable ways.
User Interaction
1. Use animation, video and audio with caution.
If used, provide a play/pause button. Avoid flashing or strobing content, which can cause seizures.
2. Create design that adapts to phone and tablet form factors
Don鈥檛 override native accessibility features.
3. Design accessible form controls
Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.
4. Give users enough time to read and use content.
5. Help users navigate and find content.
Development
(This section is high level only and is no way a complete list for engineering.)
1. Ensure that all content can be accessed with just the keyboard in a logical way using tab order
Make sure dynamic interactions (hide/show, open/close, update) can be used with the keyboard itself, without any peripheral devices. The reading order should match the visual order.
2. Plan heading structure early
Ensure all content and design fits under a logical heading structure.
3. Use true text whenever possible
True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.
4. Support the link focus indicator
Make sure keyboard users can always visually identify a focused link.
5. Support a 鈥渟kip 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 in keyboard focus.
6. Code accessible form controls
Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.
7. Provide alt text if icons or glyphs are used without text
Cascading style sheets (CSS) for purely decorative images. Hyperlinked images without supporting text must be inline, with alternative text.
Resources
Overview: http://www.w3.org/WAI/WCAG20/glance/
Authoring Tool Accessibility Guidelines (ATAG) 1.0: http://www.w3.org/TR/WCAG10-HTML-TECHS/
Authoring Tool Accessibility Guidelines (ATAG) 2.0: http://www.w3.org/TR/WCAG20-HTML-TECHS/
Find us on