In the previous post, we presented what the WCAG 2.1 AA standard actually is. Below we present specific solutions for adapting an online store in accordance with the four principles of accessibility.
Perceivable
- Alternative Texts: Every product image should have an alternative description (e.g., “Red leather handbag with a silver clasp”). This also applies to basket icons or the logo.
- Color Contrast: Text on the page must have a minimum contrast ratio of 4.5:1 relative to the background (e.g., black text on a white background).
- Text Scalability: The page should allow text to be enlarged up to 200% without loss of functionality.
- Text Spacing: Users should have the ability to adjust the spacing between lines and paragraphs.
Operable
- Keyboard Operation: All store functions, such as adding products to the cart or finalizing a purchase, must work using the keyboard.
- Keyboard Trap: Situations where the user cannot leave an element using the keyboard should be avoided.
- Visible Focus: Interactive elements should have a clear focus indicator (e.g., an outline).
- Skipping Content Blocks: Adding a “Skip to main content” link facilitates navigation.
Understandable
- Page Language: The language of the page should be programmatically defined (e.g., “pl” for Polish).
- Form Labels: Form fields (e.g., address details) must have clear labels associated with the corresponding fields.
- Consistent Navigation: The layout of menus and components should be uniform across all subpages of the store.
Robust
- Correct HTML Code: The page code must be free of errors so that assistive technologies can interpret it correctly.
- Interactive Elements: Every button or link must have a defined programmatic name and role (e.g., using ARIA).
Adapting a website to the WCAG 2.1 AA standards not only increases its accessibility for people with disabilities but also improves overall usability and SEO. It is an investment in a more inclusive future for the internet and… better conversion for your e-commerce. Usability = benefit.
