Structure and navigation
It is important that the user can understand how the site is structured and can easily find it. Depending on what suits them best, they should be able to browse categories, filter or search for a product.
- Page structure in the code. It is important to start looking at the site's HTML to ensure that there is a logical structure, this will also help screen readers. Navigation menus can be placed at the beginning or end of the source code so that they can be skipped. Elements that recur are preferably placed in the same place on the different pages so that users can find them more easily.
- Elements and tags. Be careful when writing the code so that elements and tags are used correctly. The main content should be marked as <main> and <footer> for the footer, for example. Buttons should be coded as <button> and not <div>. The use of headings is also important to create structure, such as H1, H2 and H3.
Keyboard and accessibility
Everything you can do with a mouse should be able to be done with a keyboard. Pay particular attention to tab order if you are going to jump between different buttons and fields, otherwise it will be difficult for those who are dependent on using the keyboard.
- Visible focus points. Also make it clear where the focus point is on the site and that all elements that the user can interact with can be focused on via the keyboard. Feel free to adjust the marking so that it fits the color theme of the site.
- Dynamic content. If you are displaying new content with activity on the keyboard, or a click, it is a good idea to move the focus into that dialog or menu when it opens so that you are not stuck in the background. The same applies when it is closed so that the focus moves back to where you were.
- ARIA attributes. When you have information that is not in HTML, you can use ARIA attributes to provide more information about the purpose and functionality of the element to accessibility tools. Then check that they work as intended with screen readers and other accessibility tools.
If you have multiple buttons called Buy, it is important to link the button to the product name, for example with an aria label. Otherwise, it will be difficult for those using a screen reader to understand which Buy button belongs to which product when they are about to be added to the shopping cart.
- Test with different aids. Feel free to test with different forms of aids such as screen readers. Try using only one hand or using only the keyboard to see things that might be easy to miss that could increase conversion if they are fixed.
Contrast and colors
We have all encountered poor contrast on a web page at some point, making it difficult to read even for those without permanent or temporary vision impairment.
- Sufficient contrast. The minimum requirements are 3:1 for larger headings and graphics and 4.5:1 for body text in WCAG, but be sure to have even more contrast where possible. Some users need 7:1 to find it comfortable.
- Color choice. Preferably avoid yellow or light gray text on a white background, or light buttons. There are various tools for making accessibility checks, feel free to use them to get a measure of contrast. What may look OK to your eye may not be good enough. Also make sure to test on different screens and with different lighting.
- Patterns and background images. If you need to put text above a background image, it is important to keep in mind that you will probably need to use some shadow or colored layer behind the text. Also think about the color choice of the text so that there is sufficient contrast.
Images and media
To improve accessibility on the website, it is important to consider how information is presented visually, aurally and interactively.
- Descriptive ALT texts. It is valuable for accessibility with descriptive ALT texts for images so that the user gets the most important thing. Instead of just Dress, you can write Black short velvet dress with narrow straps as ALT text.
- Alternative information. If the media cannot be displayed for some reason, it is important to ensure that the most important information can be accessed in some other way. For example, that the product text is fully sufficient.
- Audio and video. Make sure to offer text for all speech that you show in videos on the site. This is not only good for the hearing impaired, but is good for all those who do not have sound on. An alternative to consider is audio interpretation as a complement if there is also important visual information that is shown in the video, but which is not conveyed with speech. For example, if you have a podcast on the site, make sure to offer a summary or transcription of the content.
- Zoom in on images. If you have the option for the user to zoom in on images, don't forget to make sure that it can be controlled with the keyboard. Also make sure to provide instructions on how to, for example, close the window if it is in full screen mode.
Readability and content
Whether it's product descriptions or terms and conditions and lead texts, it's important that the texts are easy to understand for as many people as possible. Work on improving readability.
- Write concisely and simply. Remember to write as directly as possible without omitting anything that is relevant. Feel free to write in simple and clear language to not lose anyone. If you ask yourself whether something could be misunderstood or simplified and start thinking along those lines, it's time to rewrite the text. Some use AI to work on language improvements. But don't forget to proofread everything to make sure that everything matches how you want it to be perceived and that all the facts are correct.
- Write consistently. Decide on a terminology and make sure that it is used everywhere on the site, this makes it easier for the user to understand that you are constantly talking about the shopping cart instead of mixing it up with the shopping basket, shopping cart, checkout and the like.
- Structure the content. It becomes easier to read if you divide longer texts into paragraphs and use subheadings, bullet lists, bold and other things to show what is important. Don't forget that the visual content is also available via ALT texts or descriptions. It is also important that, for example, product pages are structured in a similar way to make it easier for the user to find.
Flows and forms
When you have forms on your site, it is very useful to both clearly indicate which fields are mandatory and also specify prompts so that you can fill in the correct information immediately. Small improvements can make a big difference, there are many accessibility deficiencies in forms.
- Prompts. <label> can be used in the code to, for example, show in which format the social security number or mobile number should be entered. If you instead use a placeholder in the field that disappears when you start writing in the field, you risk that the user will forget what was there and enter it in the wrong format.
- Required fields. Be consistent when marking mandatory fields, most commonly with an asterisk *, don't forget to also specify what it means. Also think about which fields are really needed. The more fields, the greater the obstacle.
- Error messages. No matter how much you try to make it easier for users, some entries will be incorrect. Remember to clearly mark the field that is incorrect, for example with a red frame and explanatory text. Preferably also with instructions on how to fix it. Use the aria attribute and focus so that screen readers can also understand it. It is important to include the text so that color-blind people do not miss prompts that are only conveyed with color.
- Validate fields. Feel free to validate certain fields in real time to provide feedback, such as password strength, but here it is important to do it without it being too distracting and to ensure that the feedback is easy to understand.
- Clear flows. It can be a good idea to divide flows so that it is clear to the user. For example, explaining which step you are in during the purchase process, “Step 2 of 3 – Shipping Options”, will help consumers orient themselves. Also, remember not to save all fees and conditions for last, but show them as early as possible in the checkout flow. Transparency increases the chances of conversion. Also ensure that the payment methods you offer comply with accessibility requirements. Should the consumer experience any problems completing the purchase, it is important that they can easily contact customer service in connection with this.
Devices and responsiveness
Many of your users probably visit online shopping on mobile phones or tablets, it is necessary that it works as intended on different devices and screen sizes and at different zoom levels.
- Responsiveness. In order to create sites that adapt to different screen sizes, responsive design has long been used. The content is then arranged in a good way regardless of whether you are sitting with a large screen on your desk or a small mobile phone in your hand. It is important to keep in mind that you should preferably avoid the user having to scroll to the side on a mobile phone to read.
- Magnify and zoom. Those who have poor eyesight for some reason like to zoom in properly, make sure that the site can zoom at least 200% without anything important disappearing or negatively affecting the layout. Some exceptions exist for maps and diagrams, for example.
- Touch elements. Where you have a touch screen, buttons and links must be sufficiently separated and large so that you can easily press them.
- Orientation. Make sure that the content and functionality are retained even when the screen is rotated. If the content works best in a certain position, clearly inform the user about it.
- Test on multiple devices. See how the e-commerce site works on different devices by doing physical tests also with different browsers and devices with different screen sizes and not just simulated tests.
Prioritize accessibility in your continuous work with the site – in all teams. If it is something that both clients, designers, developers and editors think about immediately, it will become a natural part of further development. Accessible e-commerce is an investment that is both necessary and value-adding. By working through the areas above, you can future-proof your e-commerce in the face of new legal requirements while creating a better experience for all customers.
