How to Make a Website Accessible: Guidelines, Design Practices, and Compliance Strategies

Web accessibility is much more than a regulatory requirement: it's an essential condition for guaranteeing equitable access to online information and services for all. Web accessibility ensures that websites are usable by people with various disabilities. By adhering to web accessibility guidelines, organizations can create inclusive digital experiences that cater to all users.

Yet accessible web design is not yet the norm. As a result, many websites remain inaccessible to some of their users, often without their publishers being aware of the fact. How do you know if your site is affected? Is it possible to correct the problem without rebuilding the whole site? What are the best practices to adopt to guarantee sustainable accessibility? This guide is designed to help you make sense of the situation, with a practical approach to the issues at stake, the warning signs and the levers for effective action.

[Quick reminder] The challenges of website accessibility

Web accessibility is a notion often evoked, sometimes misunderstood, and still too rarely anticipated. To fully grasp its importance, it's useful to take a brief look at what it covers, the audiences concerned, and the concrete benefits it brings - for users, of course, but also for organizations. This first section provides a quick overview to lay the foundations for an enlightened approach.

Definition of web accessibility

Web accessibility is commonly taken to mean anything that enables a user with a disability (sensory, motor, cognitive or psychological) to navigate a website. More broadly speaking, a site can be considered accessible if anyone can navigate it, regardless of age (blindness, for example) or Internet connection. On this second point, the notion of web accessibility ties in with that of eco-design.

Disabilities taken into account in web accessibility

Once again, accessibility should not be seen as an issue solely for people with disabilities. But the main web accessibility standards do aim to take this audience into account.

Broadly speaking, there are 3 families of disabilities:

• Motor disabilities (motor deficiencies),
• Sensory disabilities (hearing and visual impairments),
• Cognitive and psychological disabilities.

Motor disabilities

This concerns people with significant and permanent motor disabilities(dexterity problems, paralysis, etc.), as well as those with occasional disabilities(fractures, etc.).

These people need websites they can navigate without using a mouse (typically with a keyboard), or that don't require complex gestures (such as drag-and-drop).

Sensory disabilities

These include all visual and auditory impairments. Experts sometimes separate visual impairments (blindness, visual impairment, color blindness, cataracts, etc.) and auditory impairments (deafness, hearing impairment) to emphasize that they should be treated separately.

For the former, depending on the level of blindness, making a website accessible means making graphic adaptations (accentuating contrasts, for example) or ensuring compatibility with screen readers. For the latter, a website is considered accessible when all audio information is translated visually. This is the case with video subtitles, for example.

Cognitive and psychological disabilities

Cognitive(ADHD, dyslexia, autism...) and psychological(depression, anxiety, PTSD...) disorders limit concentration, patience and/or comprehension of content. To make a web interface accessible to these people, it is essential to design interfaces that are clear, predictable and simplified.

Here, web accessibility means, for example, clear website structure and simple vocabulary.

Arguments in favor of web accessibility

Even if the benefits of accessibility should be self-evident, here are a few arguments you should bear in mind internally to convince your company's decision-makers that web accessibility is now a must:

• 1 in 4 people in Europe suffers from disorders that require the use of accessible websites, so it's a whole market you can open up or close down;
• What improves the browsing experience for people with disabilities often also contributes to theuser experience of all visitors;
• An accessible website is aligned with the best SEO standards, and will therefore improve your website's SEO;
• Having an accessible website strengthens your CSR positioning and attracts customers who are sensitive to inclusion;
• Accessibility constraints encourage technical and functional creativity, and sometimes lead to the identification of better web design methods.

Should I completely redesign my website to make it accessible?

Many teams ask themselves the same question when initiating a compliance process: can we fix what already exists, or do we need to rethink everything? The answer depends on the level of technical debt and the problems encountered. Some errors can be corrected locally, but others require a more global overhaul. In this section, we help you to distinguish between cases where a partial overhaul is sufficient, and those where a complete overhaul is preferable, or even essential.

Automated accessibility audit: what conclusions can be drawn?

Some tools make it easier to identify accessibility errors. These include PageSpeed / Google Lighthouse, WAVE and AChecker, but there are many others. These solutions are sometimes mistakenly referred to as automated auditing tools, but their role is limited to detecting certain accessibility faults. But not all.

Nevertheless, carrying out an accessibility test of your website with these tools is a good step towards realizing just how much work it will take to comply with web accessibility standards.

Among the information provided by these tools, you'll find :

• Contrast errors,
• Form markup errors,
• ARIA markup errors,
• Alternative text errors for images,
• Title structure errors.

The results of these analyses will give you a good indication of the need for a redesign to bring your website into line with accessibility rules. But that's not the only thing to consider. Once again, having an accessible website isn't about ticking all the boxes on a tool, it's about enabling everyone to navigate a website. Web accessibility testing tools can give indications, but they can't certify a website's accessibility.

3 accessibility errors you can easily correct

These errors are common, but easy to correct - especially on smaller websites (showcase site, blog, simple web portal...). By tackling these points now, you'll considerably improve your users' browsing experience... while laying the foundations for your compliance.

1. Correct basic graphic and editorial elements
   Make sure you respect color contrasts, use a readable font size, and simplify your texts. Avoiding jargon and favoring short sentences improves accessibility not only for people with cognitive impairments, but for all your visitors.
2. Add text alternatives to images and videos
   Every meaningful image should be accompanied by an alternative text (alt tag), and your videos should at least feature subtitles. This is essential for blind, visually impaired or deaf visitors.
3. Publish an accessibility declaration
   Even if your site is not yet fully compliant, publishing an accessibility declaration shows your commitment. In France, this declaration is currently the main obligation for regulated sectors. It informs users about the status of your site, any limitations, and how to report problems.

3 signs that your website's accessibility requires a redesign

If the various web accessibility tests reveal numerous errors, it's reasonable to assume that the results of a real accessibility audit will be even heavier. In this case, a complete redesign is more advisable than a compliance project. All the more so if the website was designed more than 5 years ago.

Regardless of the volume of errors, certain web accessibility shortcomings should also lead you to consider redesigning your website rather than upgrading it.

No keyboard navigation

The impossibility of navigating your site using the keyboard is one of the clearest signals that accessibility has not been integrated right from the design stage.

It's not simply a question of adding a CSS style or a missing tag: in most cases, theorder of elements, the HTML structure and theinteractivity of the entiresite need to be rethought. This is particularly true for dynamic components (drop-down menus, carousels, modals...), which are often designed for the mouse, but not tested for the keyboard or assistive technologies.

A redesign is therefore an opportunity to :

• adopt an "accessibility by design" approach, right from the mock-ups.
• choose a front-end framework or components that are already accessible.
• include keyboard navigation tests at each validation stage.

Integrating accessibility from the outset ultimately costs much less than late, partial corrections.

Most of the time, it's almost impossible to go back to a graphic design and CSS, which may have evolved over years, and try to make it accessible. In the end, it's cheaper to start from scratch and rethink a much cleaner and simpler navigation and page structure. So, for the time being, it's an investment, for sure. But in the long run, I think it's a win-win situation.

Unmarked forms

Forms are often critical elements of a website - registration, contact, applications, requests for information. Yet they are also among the most frequently inaccessible elements.
An unmarked form means, for example, that fields are not correctly associated with their labels(<label>), that error messages are not readable by a screen reader, or that keyboard navigation is inconsistent.

For a blind or visually impaired user using a screen reader, an input field without an explicit tag becomes incomprehensible: he simply hears " text field " without knowing what it corresponds to. The same applies to users with cognitive difficulties, who can get lost when faced with missing or misplaced information.

Large volumes of PDF files

Some of the problems identified in the audits - such as images without alternative text, low contrast or missing tags - can often be corrected individually. But others, such as a media library full of unreadable PDFs, are far more complex.

On the UCANSS site, there are quite a few PDF files that are not legible, some of which are even still images. There are no transcriptions. We're working on this, but it's complicated. Lasecurecrute.fr, on the other hand, is a bit of a blank slate.

As part of a redesign, we can completely rethink the way content is produced, organized and presented:

• Set up a search engine to filter accessible files.
• Provide a validation circuit for new documents.
• Integrate the production of tagged PDFs into business processes.

Design rules for an accessible website

Once you've decided to make your site accessible, you need to know how to go about it. Accessibility is not based on isolated actions, but on a coherent whole that involves editors, designers, developers and project managers. This final section proposes concrete best practices to be adopted at every stage of the design process, to anchor accessibility in the long term and build truly inclusive interfaces.

Website accessibility standards: what the W3C says

The W3C (World Wide Web Consortium) is the international organization behind web standards such as WCAG (Web Content Accessibility Guidelines), ARIA and other standards guaranteeing the accessibility and interoperability of web technologies.

WCAG are international recommendations that define best practices for making websites accessible to people with disabilities. According to this standard, a website is accessible if it is :

1. Perceptible : Information must be perceived via all possible senses (e.g. alternative texts for images).
2. Usable : Components must be accessible, even by keyboard only.
3. Understandable : Interfaces must be easy to understand and use.
4. Robust : Content must work with assistive technologies.

Achieving WCAG compliance is crucial for meeting international standards and legal requirements related to web accessibility.

What aspects of web design are affected by accessibility issues?

When it comes to designing an accessible website, it's essential to raise awareness and mobilize all web project stakeholders. In fact, web accessibility is based on 3 pillars (which we'll detail shortly):

• Editorial - Web content accessibility;
• Graphic - Application of accessibility standards to web design;
• Technical - Designing accessible websites (good web development practices).

This is an important clarification, as web accessibility issues are often more appropriately addressed by communications teams, and therefore more easily take into account visual issues (contrasts, fonts, alternative texts on images). However, an aspect as essential as the ability to navigate correctly on the keyboard, for example, is a technical subject, so it's important to also get developers on board when you want to make website accessibility a priority issue. In fact, having both a web accessibility referent on the communication side, and a more technical web accessibility referent is one of the best web accessibility practices you can keep in mind.

A final aspect of web design concerned by accessibility issues is often overlooked: the CMS. Theoretically, all your tools (and therefore your CMS too) must be made accessible so as not to create a barrier to entry for the recruitment of people with disabilities. There is no such thing as a 100% accessible CMS, but some are more accessible than others. Jahia is one of the CMS solutions working on this issue.

Best practices in web accessibility

If you decide to implement a web accessibility approach for your website, here are a few best practices to follow. They will not only help you pass your web accessibility audit, but also keep your site accessible.

Web content accessibility

On the editorial side, the first rule is clarity. Use simple, straightforward language, structure content with hierarchical headings, and avoid multiplying acronyms or complex formulations. It's also essential to write alternative texts for each image carrying information, and to ensure that links are explicit: a link entitled "click here" says nothing to a user navigating by voice synthesis.

Finally, every downloadable document must be checked: a PDF must be legible, tagged, and contain real text - not a scanned image.

Accessibility and web design

When it comes to design, visual consistency is an ally of accessibility. Using sufficient contrast between text and background, avoiding text superimposed on images or colors that are too light, and defining a legible and sufficiently large font are all simple gestures that make reading easier.

Another point: good accessible design doesn't rely on color alone to convey information, but adds symbols, text or icons.

Accessible web design (technical aspects)

On the technical side, a clean, semantic HTML structure is essential. Each element must have a clear role, titles must respect a logical hierarchy, and interactive zones must be accessible via the keyboard.

And once again, forms must be properly marked up, with labels linked to fields, clear indications of mandatory fields and error messages that everyone can understand.

Note that adopting inclusive web design practices, such as designing for screen reader compatibility and ensuring form fields are properly labeled, enhances usability for all users.