DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Website Accessibility: What You Need to Know
Michael Sakhniuk
Michael Sakhniuk

Posted on • Originally published at dzone.com

Website Accessibility: What You Need to Know

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Also some advice about heading tags:

  • Use h1 tags 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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

🌚 Life is too short to browse without dark mode