The web is a public place accessible to everyone. The content of your site may need to be adapted to provide improved accessibility for people with physical or mental disabilities. This is a real issue for their social, professional, and educational integration.
Accessibility also means helping people who do not or cannot have access to good technological equipment. This does not only affect people with disabilities but also older people who are not used to the new technologies that the internet has brought.
In my previous articles, we have discussed the most successful SaaS websites
, if you want some more information on other business-related topics, feel free to check out Eleken's blog
Attention should be paid to usability, as well as to the design and code of each web page. Moreover, the cleanliness and structure of the code will not only help the people who need it to visit your site, but also the search engines to understand the content of your pages.
Let's talk about HTML structure:
- Use a logical title hierarchy with the h1 through h6 tags
- Enter a specific title on each page
- Enter the main language of the page with the lang attribute on the HTML tag
Structure the navigation menus with lists if necessary. Adopt a “funnel” method. Go from the broad information to the more precise. The navigation model should not vary from page to page. We must be able to locate and read them. To facilitate navigation, place a breadcrumb trail, a site map, and if possible an internal search engine. In the menu, you should be able to see which section you are in, with a visual indication of the section for example.
Buttons and links
Be explicit in the labels of buttons and links. Instead of “Click here”, prefer “Go to information on such page”. Always specify the destination of the links.
Visually differentiate links in the text. Differentiate between buttons and links, the former has more of a call-to-action role than the latter.
There is the alternative attribute or alt attribute which allows giving an alternative text to a visual medium (image, video) when it cannot be seen or loaded on the page. It is essential for understanding the information. Be careful, however: it is necessary to write it only if the image has real informative value or if it has an action such as a link. If it is only decorative, the alt text is not important. Be short, clear, and concise when writing these texts.
Avoid CAPTCHAs! It’s already uncomfortable with conventional use, it’s better to avoid any unnecessary obstacles. Explain errors when they happen, don't just color a field red. Take the opportunity to make correction suggestions to help the user. If the page needs to reload to display a confirmation or error message, it is recommended that you change the title of the page, to make it easier for screen readers to understand. Explicitly name each field on the form. In an HTML structure, you will need to use the label tag. Provide a confirmation message to validate the submission of the form.
The content should be clear and well structured. Group similar or complementary information. Use HTML tags to structure the text. If you are working on a CMS (Content Management System) like WordPress for example, this work will be done automatically for most content blocks. Do not leave an abbreviation without defining it at least once. The visual aspect (shape, color) of an element on your page should not be the only reference to designate it.
The rules for writing on the web are not the same as elsewhere. Short sentences are preferred. Your paragraphs don't have to be bulk justified. Keep the accents on upper case letters. Repeated line breaks are not recommended.
Take care to choose your colors. Some people with color blindness may not perceive them as you do. For simulations, you can add the Google Chrome Colorblind extension. In the absence of color, the information transmitted must be understandable. Avoid color codes, for example. Content must be separate from style so that it can be read separately by a screen reader. Manage contrasts to keep a clear distinction between text and background. Here is a little online tool to help you find out if the contrast is sufficient.
It is difficult to be able to comply with all of them, but those stated above already greatly facilitate access to websites. Some are just code, others are closely related to user experience.