Web accessibility: the basics for a more inclusive site
Learn the basics of web accessibility, from contrast to forms, including keyboard navigation and alt text, for a more inclusive website.
summary13 sections
Making a site more accessible isn't just about ticking a box for people with disabilities. It's primarily about allowing more visitors to understand, navigate, and take action, regardless of their abilities, device, or situation.
Short answer: the basics of an accessible site are concrete: readable contrast, keyboard navigation, relevant image descriptions, correctly labelled forms, and easy-to-understand content. Starting with these fundamentals already improves the experience for many visitors, without waiting for a complete redesign.
An accessible site doesn't require everyone to use the web in the same way. It offers multiple paths to access information and avoids depending on a single sense, a single device, or a single way of clicking.
The most well-known standard is WCAG, for Web Content Accessibility Guidelines. It organises best practices around four simple ideas: content must be perceivable, operable, understandable, and robust enough to remain compatible with assistive technologies. For a small business, the goal isn't to recite the entire standard, but to identify the most frequent obstacles and reduce them progressively.
As a technical benchmark, WCAG 2.2 level AA generally requires a contrast of at least 4.5:1 for body text and 3:1 for large text. This figure doesn't replace human judgement, but it helps quickly identify colours that are too weak.
You should also avoid conveying information through colour alone. A mandatory field indicated only in red, a chart understandable only through three colours, or a status displayed without text can leave some visitors without guidance.
To check on your site:
The basic test is simple: unplug the mouse and use the Tab key to move forward. You should be able to reach links, buttons, fields, and controls in a logical order. The Enter key should activate a link or button, and the Esc key should generally allow you to close a modal window when applicable.
The visitor must also know where the cursor is. The visible focus — an outline, underline, or other clearly identifiable indicator — must not be removed simply because it doesn't match the design.
To check on your site:
For a team photo presented as proof of proximity, text like "The Cadarsir team gathered around a table" can be relevant. For a purely decorative image that adds nothing to the content, the alt text should remain empty so that assistive technology can ignore it. Conversely, an image containing important information should not be published without a text equivalent.
Icons used as buttons must also have an understandable name. A magnifying glass alone might be visually clear, but its button must announce its action, for example "Search".
The right question to ask yourself: if this image disappeared, what information would be missing? The answer helps decide whether to describe it, make it decorative, or include its content in the text.
Each field must have a visible and explicit label. "Name", "Email address", and "Describe your needs" are more useful than vague hints placed only in grey text inside the field. The placeholder can provide an example, but it must not replace the label.
Instructions should appear before the error. If a phone number must follow a specific format, state it from the start. In case of a problem, the message should explain what is incorrect and how to fix it. Avoid simple "Invalid form" messages or fields turning red without explanation.
Finally, limit questions to what is truly necessary. A shorter form is often more accessible, faster, and more effective.
Form checklist:
Start by clearly announcing the subject of the page. Use headings that actually describe the sections, short paragraphs, lists where helpful, and links that indicate their destination. "Discover our services" is more informative than "Click here" repeated several times.
Explain technical terms at their first appearance. A small business doesn't need to speak like a technical specification to appear expert. On the contrary, expertise explained simply is more reassuring to people discovering your business.
The page language must also be correctly declared in the code, and language changes must be flagged when the content contains them. This helps screen readers and certain reading tools pronounce words more appropriately.
HTML structure also matters. A single main heading, hierarchical subheadings, correctly tagged lists, and buttons used for actions make the page more readable for both visitors and assistive technologies.
Animations deserve special attention. Permanent movement, a video that starts on its own, or content that changes too quickly can hinder reading and concentration. Provide a way to pause, avoid autoplay when not essential, and do not rely on an animation for important information.
So, add simple tests with concrete goals:
An audit helps distinguish priority actions from larger projects. It also avoids redoing an entire page when a targeted fix is enough. Conversely, if accessibility, performance, mobile, and maintenance are all fragile, a redesign can be an opportunity to start over on more consistent foundations.
The important thing is not to promise abstract compliance without checking actual usage. A serious approach describes what has been tested, what remains to be improved, and how corrections will be tracked.
This approach also applies to entrepreneurs and small businesses that don't have a dedicated team. You can start with a targeted audit, fix priority pages, and then integrate accessibility into future creations, content, and routine maintenance.
The most effective way is to start from real journeys: understanding your offer, finding information, requesting a quote, booking, or contacting you. Test these actions using several methods, fix the most significant obstacles, and keep track of improvements.
A more accessible site isn't just more inclusive. It's often clearer, more comfortable on mobile, more robust over time, and more welcoming for everyone.
Short answer: the basics of an accessible site are concrete: readable contrast, keyboard navigation, relevant image descriptions, correctly labelled forms, and easy-to-understand content. Starting with these fundamentals already improves the experience for many visitors, without waiting for a complete redesign.
What exactly is web accessibility?
Web accessibility consists of designing pages and features that people with different abilities can use. This includes people who are blind or visually impaired, deaf or hard of hearing, those with motor, cognitive, or concentration difficulties, as well as people temporarily limited by an injury, a noisy environment, a poor connection, or a screen that is hard to read.An accessible site doesn't require everyone to use the web in the same way. It offers multiple paths to access information and avoids depending on a single sense, a single device, or a single way of clicking.
The most well-known standard is WCAG, for Web Content Accessibility Guidelines. It organises best practices around four simple ideas: content must be perceivable, operable, understandable, and robust enough to remain compatible with assistive technologies. For a small business, the goal isn't to recite the entire standard, but to identify the most frequent obstacles and reduce them progressively.
1. Check contrast and do not rely solely on colour
Light grey text on a white background might look elegant in a mockup but become painful to read on a phone, in bright sunlight, or with eye strain. The contrast between the text and its background must be sharp enough for information to remain readable.As a technical benchmark, WCAG 2.2 level AA generally requires a contrast of at least 4.5:1 for body text and 3:1 for large text. This figure doesn't replace human judgement, but it helps quickly identify colours that are too weak.
You should also avoid conveying information through colour alone. A mandatory field indicated only in red, a chart understandable only through three colours, or a status displayed without text can leave some visitors without guidance.
To check on your site:
- Is body text still readable on mobile?
- Do buttons and links stand out clearly from surrounding text?
- Are error messages accompanied by an explanation, and not just a colour?
- Does important information remain understandable in greyscale?
2. Make keyboard navigation possible
Not everyone navigates with a mouse or a touchscreen. Some people use a keyboard, a switch, voice control, or assistive technology. A site that only works with clicks can therefore make a menu, a window, or a form inaccessible.The basic test is simple: unplug the mouse and use the Tab key to move forward. You should be able to reach links, buttons, fields, and controls in a logical order. The Enter key should activate a link or button, and the Esc key should generally allow you to close a modal window when applicable.
The visitor must also know where the cursor is. The visible focus — an outline, underline, or other clearly identifiable indicator — must not be removed simply because it doesn't match the design.
To check on your site:
- Is every interactive element reachable with Tab?
- Is the focus always visible, including on coloured buttons?
- Does the navigation order follow the reading flow of the page?
- Can menus, carousels, and modal windows be used without a mouse?
3. Write truly useful alternative text
An image isn't automatically accessible just because it has an "alt text" field. This text must convey useful information to a person who cannot see the image, without needlessly repeating what is already written around it.For a team photo presented as proof of proximity, text like "The Cadarsir team gathered around a table" can be relevant. For a purely decorative image that adds nothing to the content, the alt text should remain empty so that assistive technology can ignore it. Conversely, an image containing important information should not be published without a text equivalent.
Icons used as buttons must also have an understandable name. A magnifying glass alone might be visually clear, but its button must announce its action, for example "Search".
The right question to ask yourself: if this image disappeared, what information would be missing? The answer helps decide whether to describe it, make it decorative, or include its content in the text.
4. Design understandable forms
A form is often the most important touchpoint on a site. If it's difficult to fill out, accessibility directly becomes a business issue: a visitor might give up before sending their request.Each field must have a visible and explicit label. "Name", "Email address", and "Describe your needs" are more useful than vague hints placed only in grey text inside the field. The placeholder can provide an example, but it must not replace the label.
Instructions should appear before the error. If a phone number must follow a specific format, state it from the start. In case of a problem, the message should explain what is incorrect and how to fix it. Avoid simple "Invalid form" messages or fields turning red without explanation.
Finally, limit questions to what is truly necessary. A shorter form is often more accessible, faster, and more effective.
Form checklist:
- Does each field have an associated and visible label?
- Are mandatory fields identified in text?
- Do errors indicate precisely what to correct?
- Does the form work with a keyboard and on a small screen?
- Is the confirmation message understandable after submission?
5. Make content easy to understand
Accessibility isn't limited to code. Very long text, filled with jargon, nested sentences, or ambiguous buttons can become difficult to understand, even when the page is technically well-built.Start by clearly announcing the subject of the page. Use headings that actually describe the sections, short paragraphs, lists where helpful, and links that indicate their destination. "Discover our services" is more informative than "Click here" repeated several times.
Explain technical terms at their first appearance. A small business doesn't need to speak like a technical specification to appear expert. On the contrary, expertise explained simply is more reassuring to people discovering your business.
The page language must also be correctly declared in the code, and language changes must be flagged when the content contains them. This helps screen readers and certain reading tools pronounce words more appropriately.
6. Take care of structure, mobile, and zoom
An accessible page must remain usable when the visitor enlarges the text, uses a narrow screen, or views the site with a different display setting. A layout that depends on a specific screen size risks hiding information or creating painful horizontal scrolling.HTML structure also matters. A single main heading, hierarchical subheadings, correctly tagged lists, and buttons used for actions make the page more readable for both visitors and assistive technologies.
Animations deserve special attention. Permanent movement, a video that starts on its own, or content that changes too quickly can hinder reading and concentration. Provide a way to pause, avoid autoplay when not essential, and do not rely on an animation for important information.
7. Test with real user journeys, not just an automated tool
Audit tools are useful for identifying repetitive problems: insufficient contrast, images without alt attributes, missing labels, or questionable structure. However, they don't always understand the intent of an image, the clarity of text, or the actual logic of a user journey.So, add simple tests with concrete goals:
- Find information: can a person understand in a few seconds where your main service is located?
- Get in touch: can they fill out and send the form without a mouse or guessing the errors?
- Read on mobile: does the text remain comfortable without permanent zooming?
- Go back: does the journey remain consistent if the browser's back button is used?
- Have it proofread: does an outside person understand the headings, buttons, and instructions?
An accessibility checklist to start today
Here is an initial check that can be done in less than an hour:- Read the homepage while zooming and on a phone.
- Navigate the menu and form using the Tab key.
- Identify grey text that is too pale and links distinguished only by colour.
- Check that each useful image has an appropriate description.
- Check that form fields have labels and explicit error messages.
- Replace vague links with labels that announce the action.
- Have a key journey tested by someone who doesn't know the site.
Do I need to redo the whole site to make it more accessible?
Not necessarily. Some improvements are quick: fixing contrast, adding a label, rewriting a button, or providing alt text. Other problems stem from the theme structure, a component that's impossible to use with a keyboard, or a dependency that blocks corrections.An audit helps distinguish priority actions from larger projects. It also avoids redoing an entire page when a targeted fix is enough. Conversely, if accessibility, performance, mobile, and maintenance are all fragile, a redesign can be an opportunity to start over on more consistent foundations.
The important thing is not to promise abstract compliance without checking actual usage. A serious approach describes what has been tested, what remains to be improved, and how corrections will be tracked.
At Cadarsir, an inclusive site must remain simple to use
For Cadarsir, accessibility is part of quality web design: understanding the need, structuring content, choosing clear components, testing journeys, and improving the site over time. The goal isn't to add a technical layer that's hard to explain, but to reduce the obstacles that prevent a visitor from finding an answer or getting in touch.This approach also applies to entrepreneurs and small businesses that don't have a dedicated team. You can start with a targeted audit, fix priority pages, and then integrate accessibility into future creations, content, and routine maintenance.
Conclusion: making your site more inclusive, step by step
The basics of web accessibility are within reach for a small business. Readable contrast, keyboard navigation, relevant alt text, guided forms, and understandable content already improve the experience for many visitors.The most effective way is to start from real journeys: understanding your offer, finding information, requesting a quote, booking, or contacting you. Test these actions using several methods, fix the most significant obstacles, and keep track of improvements.
A more accessible site isn't just more inclusive. It's often clearer, more comfortable on mobile, more robust over time, and more welcoming for everyone.
FAQ: the basics of web accessibility
No. It primarily targets people who encounter long-term or temporary limitations, but its benefits extend beyond this audience: better readability on mobile, clearer navigation, simpler forms, and more understandable content.
