Learning how to make a website accessible matters more than ever, because the software people use to access information has grown far more sophisticated as the web has evolved. With the advent of smartphones and tablets have come some potent tools that make the internet available to anyone.
However, software can only get us halfway to a fully open, accessible web, because one size does not fit all; knowing how to make a website accessible is the other half. To ensure disabled users enjoy a complete web surfing experience, website designers must place accessibility at the core of their design.
While there are many standards that show teams how to make a website accessible, obvious web accessibility issues continue, preventing a large extent of the world’s population from having even access to online information.
According to the World Health Organization, roughly 15pc of the world’s population are with some form of disability. Also, about 3pc of this group encounter significant difficulties in functioning.
Legislation such as the Disability Discrimination Act to the Disability Equality Duty, there is plenty of guidance available which speaks about the precise recommendations in the form of the Web Content Accessibility Guidelines (WCAG) 2.0. There is even an enforcing body, the Equality and Human Rights Commission, which looks after the keystrokes.
Web Accessibility is vital
The UK Office of National Statistics estimated in 2011 about 4.25 million disabled people in the nation have never used the internet, which is more than one-third of all of the disabled adults in the country. As obvious as it sounds, disabled people don’t find it easy to access information over the internet or navigate through e-commerce sites.
Web developers today often treat how to make a website accessible as a compliance exercise, but what should matter is ‘true usability’. To be more precise, ‘true-usability’ denotes equal access to all transactions, content, and merchandise on a website, notwithstanding one’s disability or challenges.
Accessibility Awareness
Two Principal Approaches Have Been Adopted to Try to Change the Situation.
The first is to raise awareness amongst web developers by improving the understanding and skill set of web teams. Guidelines such as WCAG 2.0 and organizations such as OneVoice for Accessible ICT Coalition are making enormous strides in this area.
So with that in place, here is how to make a website accessible in practice: a few simple tips to apply when creating a disability-friendly site.
- Use Alt Text – The alt attribute is the text a screen reader speaks in place of an image (it is not the tooltip you see on hover; that is the title attribute). For someone who has a visual impairment and uses a screen reader (which is a commonly used software program that reads text on a website out loud), the alt tags are read loudly and are the only way a user identifies what the image is.
Designers should consider the alt tags seriously and use them as a chance to depict the image literally. For instance, if it’s a picture of a person, write his or her name. If it is of an object, use a couple of words to describe the same (such as “pile of bricks” or “bookshelf”). - Subtitles and Transcripts – If you make web content that regularly includes videos, try to give subtitles — mainly if you’re producing the bulk of your video content. Popular video hosting sites such as YouTube have their own set of tools that enable users to add subtitles to their clips.
Making a transcription of the online video is an incredibly helpful resource for users who are otherwise abled. - Utilize Color Control – Practising smart colour contrasts, and choices is one of the most useful ways for a website with any form of audience. Designers should shun pairing garish colours in the site and be cautious of using blue, yellow, and green next to one another (this is particularly difficult for colourblind people). Black text over a white background is the usual ideal practice because it’s readable for most audiences.
- Explain Abbreviations – Wrap an abbreviation in the HTML abbr element with a title, or spell it out in full the first time it appears (Central Intelligence Agency, CIA). Do not add periods between the letters; modern screen readers handle common abbreviations well, and the periods make the text harder to read for everyone else.
- Get Clickable – For users who are challenged with mobility problems, it can be challenging to click on small items within a short clickable range. It’s like trying to nail a bull’s eye every single time they play a game of darts. Give the clickable item a more extensive range so the user can click on it within the item’s general area.
There are loads of available guides for how to create this in code, such as the one from how-to from Webcredible. Keyboard navigation is the least understood part of how to make a website accessible, yet it should be the first thing to fix. - Testing an Accessible website – The best way to test your structure and content is to have a screen reader read the pages out: NVDA or JAWS on Windows, VoiceOver on macOS and iOS, TalkBack on Android. For the code, browser tools such as axe DevTools, WAVE and Lighthouse flag the common failures in seconds. Then unplug the mouse and go through every page with the keyboard alone; that single check reveals more about how to make a website accessible than any report.
How to make a website accessible: frequently asked questions
What is the first step in how to make a website accessible?
An audit. Run an automated scan with axe or WAVE, then test the key pages by keyboard and with a screen reader. The audit tells you which of the tips above matter most for your site, and it gives you a baseline to measure against – which is really the answer to how to make a website accessible for your own users.
Which standard should I follow?
WCAG 2.2 Level AA. It is the current version of the Web Content Accessibility Guidelines, it is backwards compatible with 2.0 and 2.1, and it is the level that laws such as the ADA, the European Accessibility Act and India’s GIGW point to. If you are wondering how to make a website accessible for a legal audit, this is the level to name in your contract.
How to make a website accessible on WordPress?
Start with an accessibility-ready theme, keep headings in order, add alt text to every image and use plugins that respect keyboard focus. Our WordPress accessibility theme and accessible plugins handle most of the technical work for you.
How long does it take, and how to make a website accessible faster?
A small site can be remediated in one to three weeks; larger sites with forms, video and e-commerce take one to two months. The work is fastest when it is planned into a redesign rather than bolted on afterwards, and when the blocking issues – keyboard access, labels and alt text – are fixed before the cosmetic ones.
How do I know the work is done?
When a keyboard-only user and a screen reader user can complete every important task without help, and an audit against WCAG 2.2 AA finds no blocking issues. Our web accessibility case study shows what that end state looks like on a real site, and how to make a website accessible without a full rebuild.
Conclusion
Knowing how to make a website accessible is a crucial aspect of good web design, and fortunately, the current web design trends encourage responsive layouts and large fonts which can adapt themselves to all different kinds of output devices (such as laptops, tablet computers, smartphones and even TVs).
If you are looking for expert advice, on how to make a website accessible, do not hesitate to contact us for a free evaluation of your website.
Leave a Reply