Explainer Template: How to keep a11y in mind when creating a project

INTRO

This blog post is about accessibility in web development because all websites and application should be able to use by everyone inclusive.

To get the most out of this post, it’s best if you be aware of WHAT accessibility in web development even means and how your code can affect the usability for other people. You might also want to consider taking a look into the official documentation by W3C and learn how to use a11y testing tools to make your website accessible for everyone by following some simple instructions.

This is an important topic because every user should be able to enjoy the website or application you are building, so make sure to write your code inclusive. You’ll most likely use testing tools when before deploying your code which will help you fixing unwanted outcome as soon as possible.

BODY

This concept was first introduced 2012 in order to solve the problem of difficulties when sharing knowledge. It was created by five leading global organizations at https://www.w3.org/. When it was first introduced it achieved a wider popularity by companies. And now in many countries companies of the public section, such as universities here in Austria etc are even obliged to make their websites 100% accessible, otherwise they have to pay penalties.

First, let's make to use semantic HTML tags like <h1>, <p> or <section> rather than <div>. It’s important to make note of how these tags work under the hood when using a screen reader some people rely on. Next, it goes into knowledge about how to use labels or roles in order to make forms more accessible. After that, you need to make sure that color contrast is high enough and not only use color when pointing parts of your website out, otherwise people with e.g. colorblindness aren't able to see the differences of what you want to show. And finally, you get to the usage of tools like Lighthouse and the Web Insights extension, which you can use to make sure which parts are still not accessible and to follow their suggestions on how to solve these problems.

Let’s take a look at how this works in a real app.

When we don’t use semantic HTML, labels or alt text, we can still publish our website of course but people with disabilities are limited by consuming our content. That makes things harder because if a person with permanent disabilities like blindness is not able to use our website, e.g. people with a short-term restriction after an eye surgery cannot use it too. But with the help of tools like Lighthouse, now we can easily get hints on how we can make our website more accessible, which lets us code more inclusive.

CONCLUSION

Now that you’ve learned about a11y, take a look at your site projects and your portfolio. Use Lighthouse and the web insights extension on Google Chrome to make sure everything is accessible.

For more reading, checkout W3C, coolTutorial, and informative Website.