The most important accessibility areas to check

Where to start?

With the accessibility check feature in Snoobi you can review the web pages for accessibility errors. But the technical review of your website pages cannot capture all issues.
And the resulting report in Snoobi can be overwhelming when many errors or warnings are reported.
Fortunately there are some straight-forward guidelines that have an immediate effect on accessibility. To assist our customers, we collected the most important ones in the list below.

Navigation

• Can you use the tab key to navigate the site with a keyboard?
• Is there a visible focus indicator (outline or underlining, color).
• Where possible all headings in text blocks should follow a logical order (H1 → H2 → H3).

Images and graphics

• Do all images that matter for the content have descriptive alt text?
• Decorative images (these are images that are not used for content are marked as decorative).
  That means an empty alt: alt="").
• Promotional or other banners should have alt text describing the message, not just “banner.”  Especially when the banner is an image.

Color and contrast

• Review color and text contrast: use at least 4.5:1 for normal text and 3:1 for large text.
• Don’t rely on color alone when you expect an action, for instance show an error with red text and an icon/label, as well as an appropriate alt text.
• Buttons should stand out clearly against the background.

Forms & checkout, shopping basket items

• Ensure that every form field has a label, which should be linked to what input is requested).
• Errors are explained in the text, and with the right size. So not just small text or red highlight.
• Ensure tab order moves through fields logically and required fields are clearly marked, not just with a color.
• Make sure that buttons (e.g., Submit, Checkout, Place Order) have clear text labels.

Buttons and links

• Buttons or named links should use meaningful text ("Add to Cart", not “Click here").
• Tap targets are large enough (for instance a square 45×45px would be ok).
• Same link text should use the same destination. E.g. no multiple "Read More" link should be going to a different location. Use additional text where possible.

Media

• Where possible, videos should have captions, these should at least be auto-generated, but ideally edited.
• Audio/video has a transcript available, either on the same page or linked to the text.
• It should be possible to slow down a video and/or do not use autoplaying audio that can’t be stopped.

Mobile and responsive design

• Make sure that content reflows on the screen without the need for horizontal scrolling.
• It should be possible to close a pop-up or modals with keyboard (best is Esc).
• Buttons and links are sufficiently large to be easily tappable on touch screens.

Last but not least: performance / usability

• Web pages should load quickly (slow loads means slow assistive technology like screen readers do not provide results quick enough, which leads to frustration).
• Skip links (consider, "Skip to main content", or "Summarize for me") are available.
• Make sure there are no flashing or blinking elements that could trigger seizures.