Best Practices for store to follow to keep their site accessible
- Alternative Text for Images : For content that has an ‘Image’ field (Landing Page, Event etc.), the Alternate Text for the Image field is a required field. Alternate Text is the most concise description possible of the image's purpose, it is used by screen readers and displayed when the image is not loaded. It should be no more than 125 characters as some screen readers stop at 125 characters. https://webaim.org/techniques/alttext/
- Images with text : Images with text are generally not considered to be accessible as the screen readers cannot read the text. Exceptions - A particular presentation of text is essential to the information being conveyed and logos
- Usage of CTA Blocks : Use CTA blocks whenever possible. CTA blocks come with text fields for title and subtitle, which can be read by screen readers. An image overlay option is available, which helps with accessibility
- Creating Content : When adding text to the ‘body’ field Pages, Events, Blogs etc. follow the proper content structure.
- Use Paragraphs
- Use Ordered List and Unordered List depending on the purpose of the list
- Use tables sparingly, only if necessary
- Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with lower rank start new subsections. Skipping heading ranks can be confusing to screen readers and should be avoided where possible.
- Use these specs as much as possible
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
- Links : Link texts should be descriptive
- Avoid content that flashes
- Color should not be used as the only way of conveying information
Categories