Store accessibility #

This page is for designers, developers and merchants who want everyone to be able to buy from their store, including people who use a keyboard, a screen reader or magnification. A checkout that cannot be completed is a lost sale and, in many places, a legal problem. This page names the parts of the shop's markup you control and what to check in each; the general guidance is in Accessibility for site builders.

Contents #

1. Where the markup comes from
2. Product pages
3. Basket
4. Checkout forms
5. Errors and status messages
6. Payment and receipts
7. Checklist

Where the markup comes from #

All shop pages are templates you can override in your design (Template overrides):

Check the templates your theme actually uses, not only the standard ones; the shipped themes carry their own shop templates (Running a shop: overview).

Product pages #

• The price is text, with the currency, not only a graphic.
• The Add to basket control is a real button with a text label.
• Option fields (size, color) each have a visible label tied to the control; extra prices are in the label text.
• Product images have text alternatives that describe the product; decorative images have empty alternatives.

Basket #

• The basket is a table with header cells for product, quantity, price and total.
• Quantity fields have labels naming the product ("Quantity of Blue shirt").
• Remove controls say what they remove.
• A change to the basket count in the page header is announced, or the customer is taken to the basket (RedirectAfterAddToBasket=basket), so the change is not silent.

Checkout forms #

• Every field has a visible label; required fields are marked in text, not only by color.
• Fields have the right input types and autocomplete hints for name, e-mail and address.
• The country select is usable with a keyboard; the shipped select lists the most used countries first (Country groups and regions).
• A custom shop account handler's form follows the same rules (Shop account handlers).

Errors and status messages #

• Errors such as an invalid quantity or removed items (the removed_items list of the basket) are shown in text near the top, with focus moved there or announced.
• shop/checkoutagain.tpl and shop/cancelcheckout.tpl explain in plain words what happened and what to do next.

Payment and receipts #

• On the gateway selection page each gateway is a labeled choice.
• A redirect to the provider is announced on the button ("Continue to PayPal").
• The receipt has a Print view of the receipt alone and a Download as a self-contained HTML file (Permanent order receipts); check both with a screen reader.
• An HTML order mail has a sensible reading order and alternatives for images.

Checklist #

• To do: The full path, product to receipt, with the keyboard only.
• To do: The same path with a screen reader.
• To do: Zoom to 200 percent: nothing overlaps or needs horizontal scrolling.
• To do: Contrast of prices, buttons and error messages.
• To do: Error messages for every form field.
• To do: Tested with the methods in Testing accessibility.

Related pages #

• Operating a store
• Accessibility for site builders
• Testing a store
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.