In a world where we are more connected than ever before, it’s important that everyone has access to the same information and opportunities. Achieving web accessibility means removing any barriers that stand in the way of disabled people accessing online content, services, or activities on an equal basis with those who are not disabled. In this guide, you will learn how to create your website accessible for screen-readers and SEO robots.
What is accessibility?
Web accessibility (of A11Y) is about providing people with disabilities the same level of access to resources and information that you would provide to those without disabilities.
An accessibility website has to be accessible to a wide range of people. Many common issues that can make a site inaccessible include: Blind people cannot use most screen readers. People with low vision have trouble using small screen size devices. Large print is no longer standard on monitors. Speech-translation software is no longer a requirement on many websites.
So, accessibility is the practice of designing web content to be accessible to people of all abilities.
In WEB development we can explain a11y as - a set of tools and approaches that make the site accessible to people with disabilities
Why should you care?
Accessibility is a broad term, but it is incredibly important. Your website should be accessible to people with a wide range of disabilities. If you do this, you will be helping people who are visually impaired, hearing impaired, physically disabled, and those with other disabilities. Not only will you have satisfied the people who rely on your website, but you’ll also make them happier with their experience.
The second reason is SEO. Google robots pay attention to a11y on websites. Pages with better a11y have higher positions in search results.
How can you make your website more accessible?
The first step is to ask yourself why your site might not be accessible. You should come up with a list of the issues and potential issues that you might have. What’s the most difficult problem your site has? Is it the quantity of content, the amount of changes, the layout, or something else? Think about each issue and make a list of the likely solutions. After identifying what your issues are, create a list of what you can do to fix them. There are many things you can do, from implementing editing capabilities to implementing different coding conventions. You will need to research each issue, test them out, and see which work best for your site. Some may require you to perform additional testing.
Practical advice
Here I collect the most important advice about A11Y you can use. Follow them and your site will have high accessibility.
Make your elements focusable
This is the most important step to give users a chance to use your website without a mouse and even a keyboard.
The browser should see all actionable elements like:
- button
- select
- checkbox
- input / textarea
Use semantic tags
Semantic HTML tags come with HTML5, but even now I every day came across pages that have been built with only div elements.
Screen readers can use page structure for navigate and
Please avoid this structure of page:
<body>
<div id="header"></div>
<div id="main">
<div></div>
<div></div>
</div>
<div id="footer"></div>
</body>
Use instead:
<body>
<header>
<img src="/static/logo.png" alt="Logo">
<nav>
<a href="/">Main page</a>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main>
<footer></footer>
</body>
Also some advice about heading tags:
- Use
h1tags for the title of the page. On you, page should be only one title. - Use headings to structure your topic or article structure
Use ALT attribute on every image
<img src="/static/cat.jpg" alt="Cat" />
Avoid links with "here" and "link"
Provide more info about links for screen readers.
<!-- Bad -->
<a href="/url" >Click here</a>
<!-- Better -->
<a href="/url" aria-label="About us">Click here</a>
<!-- Good -->
<a href="/url" >About us</a>
Measure Your Accessibility
You can't manage what you don't measure. Here is the list of tools that help you find out a11y website level.
aXe Devtools
aXe: Chrome/Firefox extension that scans your HTML page, finds a11y problems and reports them to you
WAVE
Web Accessibility Evaluation Tool (WAVE): a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities
Chrome Screen Reader
Chrome Screen Reader: the official screen reader by Google for Chrome; allows you to check websites manually and see how they can be read
Conclusion
The status of accessibility of pages is poor quality lacking structure and user friendly experience. The majority of sites are not ready for today’s consumers or users! However, it is shaped for the user's experience or business objectives. There are a vast amount of improvements and adjustments that the majority can implement to aid accessibility today.
If you like content like this, follow me and stay tuned:
Top comments (0)