{"id":1854,"date":"2024-01-13T22:28:28","date_gmt":"2024-01-14T03:28:28","guid":{"rendered":"https:\/\/orphic.ca\/?p=1854"},"modified":"2024-02-09T09:27:38","modified_gmt":"2024-02-09T14:27:38","slug":"8-essential-rules-for-a-more-accessible-website","status":"publish","type":"post","link":"https:\/\/orphic.ca\/en\/8-essential-rules-for-a-more-accessible-website\/","title":{"rendered":"8 essential rules for a more accessible website"},"content":{"rendered":"\n
\n
\n

In an increasingly digital world, website accessibility is becoming essential. For the online experience to be truly inclusive, it’s important to take into account the needs of all users, including those with different abilities – the so-called rules of digital accessibility.<\/p>\n\n\n\n

This article presents eight fundamental rules for improving the accessibility of your website. By understanding and implementing these rules, you can help create an online space where everyone can access content fairly and effectively.<\/p>\n\n\n\n

<\/div>\n<\/section>\n\n\n\n
\n
\n
\n

1. Create a keyboard-ready site<\/h2>\n\n\n\n

For a variety of reasons, some users navigate exclusively with their keyboard, which means that websites must be accessible with both mouse and keyboard.<\/p>\n<\/div>\n\n\n\n

\n
\"keyboard<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/article>\n\n\n\n
\n
\n
\n
\"Focused<\/figure>\n<\/div>\n\n\n\n
\n

2. <\/strong>Show focus on pages<\/h2>\n\n\n\n

Keyboard users generally use the “tab” key to navigate between different elements on the page, such as links or forms. Showing the focus allows keyboard users and those who enlarge the display to clearly find their way around the web page.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n<\/article>\n\n\n\n
\n
\n
\n

3. Give web pages relevant titles<\/strong><\/strong><\/h2>\n\n\n\n

The title of a web page is the first piece of information perceived by a screen reader, and helps to distinguish between browser tabs. It must be descriptive, unique and correspond to the main content of the page.<\/p>\n<\/div>\n\n\n\n

\n
\"relevant<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/article>\n\n\n\n
\n
\n
\n
\"use<\/figure>\n<\/div>\n\n\n\n
\n

4. Use appropriate contrasts<\/strong><\/strong><\/h2>\n\n\n\n

Enhanced contrast on a web page benefits not only the visually impaired, but also other users, such as those who are far from their screen or subject to reflections. It’s therefore essential to check that web pages respect a good contrast ratio, and this applies to all textual content on the website.<\/p>\n<\/div>\n<\/div>\n\n\n\n

It’s also important to ensure that information is not presented solely in a specific color. Indeed, any user who does not have access to this color (for example, people with color blindness) will not have access to this information.<\/p>\n\n\n\n

Relevant tool: the Color Contrast Analyser (CCA) tool enables you to test the contrast ratio between text and background. This tool can be downloaded free of charge<\/a>.<\/p>\n\n\n\n

<\/div>\n<\/article>\n\n\n\n
\n
\n
\n

5. Structuring content using HTML5 tags<\/strong><\/strong><\/h2>\n\n\n\n

HTML5 relies on tags to structure content, such as headers, titles, text, lists, quotations, links, forms, footers and so on. A well-defined structure makes it easier for screen readers to navigate and understand content.<\/p>\n<\/div>\n\n\n\n

\n
\"Structure<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/article>\n\n\n\n
\n
\n
\n
\"Readable<\/figure>\n<\/div>\n\n\n\n
\n

6. Create readable pages at 200% magnification<\/h2>\n\n\n\n

Web pages must remain legible when the user wishes to change the display size of fonts and content within them, without elements overlapping, being truncated or disappearing.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n<\/article>\n\n\n\n
\n
\n
\n

7. Describe images that convey information<\/h2>\n\n\n\n

Images that are crucial to understanding the content should be accompanied by a text description, making it easier for those who can’t see the images to access the information.<\/p>\n<\/div>\n\n\n\n

\n
\"Insert<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/article>\n\n\n\n
\n
\n
\n
\"accessible<\/figure>\n<\/div>\n\n\n\n
\n

8. Building accessible forms<\/h2>\n\n\n\n

To be as accessible as possible, forms need to take several factors into account:<\/p>\n\n\n\n

 \u2192 The fields to be filled in a form are accompanied by a label (for example, the texts “last name”, “first name” and “date of birth” are labels). In addition, the label and the field to be filled in are positioned close to each other, so that their visual proximity highlights their relationship.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\u2192 Each button has a clear, self-explanatory title. For example, a button labeled “Submit form” or “Start search” is more explicit than one labeled “OK”.<\/p>\n\n\n\n

\u2192 Mandatory fields must also be indicated in the form, as well as any errors in completing these mandatory fields.<\/p>\n\n\n\n

\u2192 Fields that only work if the user fills them in according to a predefined format (such as date of birth) must be accompanied by the type of format expected, or by help to enable the user to fill in these fields correctly.<\/p>\n\n\n\n

<\/div>\n<\/section>\n<\/section>\n\n\n\n
\n
\n
\n

You have a project in mind?<\/h3>\n\n\n\n
\n
Get in touch<\/a><\/div>\n\n\n\n
+1 514-553-4350<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Learn more about our digital products<\/h3>\n\n\n\n