HTML5 semantic structure
eCommerce websites should start by using HTML5 semantic structure elements to properly describe their content.
When an e-commerce website uses HTML5 Semantic Structure elements, the semantic meaning of their content can be communicated to assistive devices like screen readers. You can easily navigate the e-commerce website and get the right information quickly.
It helps to easily identify and access the headings, lists, menu links, Add to Cart button, Wishlist, etc. Use these semantic elements if you have the opportunity to create them from scratch.
Here are a few examples of HTML5 semantic elements:
| Semantic Element | Purpose |
|---|---|
| <header> | Header of a web page or section |
| <nav> | Navigation links |
| <main> | Main content of a web page |
| <section> | Section of a web page |
| <article> | Independent, self-contained content |
| <aside> | Content aside from the content it is placed in and indirectly related to the surrounding content (i.e., a sidebar) |
| <header> | Header of a web page or section |
| <h1> to <h6> | HTML headings |
| <figure> | Self-contained content such as photos, illustrations, etc. |
| <figcaption> | Caption for a <figure>element |
| <form> | Form for user input |
| <table> | Tabular data. Make sure to use in conjunction with a <caption> element. |
| <ol> | Ordered list (i.e., numbered list) |
| <ul> | Unordered list (i.e.,bulleted list) |
| <p> | Paragraphs |
| <button> | To identify buttons (interactive elements that perform an action within the current page). |
| <footer> | Footer of a web page or section |
Focus on End-Users
Color Contrast & Text
Target end users must have sufficient motor abilities to explore and click on targets, as well as enough visual ability to read text, distinguish between colours and contrast. These ought to be measured throughout the design phase, and they need to be examined and improved upon as you go about your business.
Abilities
There’s a learning curve in e-commerce. The convenience of an online purchasing experience depends on being at ease with the navigation, search, filters, payment, etc. End customers must be capable of navigating your website or app, making choices, and making purchases with simple and accessible.
Accessible Product Data
All your products must have the Images with alt description, Pricing, Proper Title and Short Description. The more information you provide to the user, the easier it becomes for them to build trust and make decisions.
- Accessible Video ( Captions, Subtitle, Transcript)
- Accessible Document ( Product PDF, User Guide and User Manual)
- Accessible Image ( Alternative Text, Detailed Image description)
- Accessible Pricing ( easy to verify the different pricing)
- Accessible Navigation ( Proper Heading, Accessible functionalities)
Usability and Accessibility
The e-Commerce site should have
- Proper HTML5 Semantic sturcture and hierarchy,
- Simple Navigation and access the Quick finds (eg.. Add to Cart / Buy Now)
- Avoid too much Data / Content
- Provide User need content first
Search & Filter
The search role is used to identify the search functionality.
<form role="search">
<!-- search input -->
</form>e-Commerce accessible search should look for terms in all of the product info not just the title. Spelling mistakes are far more common than we think (eg.. persons with visually impaired difficult to enter the right word).
Your search should spell check and suggest alternatives. It’s impossible to go through 100s of products.
Your readily available filter is finding the proper item quickly and readily depends greatly on the sizes, colours, pricing, and other parameters with accessible.
How Enabled.in helps eCommerce Websites
Enabled.in Accessibility services handles all kinds of compliance issues for you. From back-end to front-end, ensuring full ADA and WCAG compliance is our standard.
With Enabled.in accessibility testing framework, website owners can effortlessly reach compliance with WCAG 2.1, ADA, ATAG 2.0, EN 301-549 and Section 508 regulations, as required by any governmental and regulatory bodies.
We are committed to involving people with disabilities in the accessibility testing process. As a result, we can offer future-proof digital e-Commerce accessibility solutions.
Contat info@enabled.in
