A beginner's guide to accessibility

Accessibility in the modern era

In today's digital age, the internet has become an integral part of our daily lives, but not everyone has the same experience using the internet. For people with certain health conditions and physical impairments, accessing the web can often be a frustrating and difficult experience. Web developers and designers are the engineers and architects of the internet, and just like regular architects and engineers, they can make life easier for disabled people by considering accessibility during construction. As a designer or developer, you can make the internet easier to use by ensuring that your website is accessible and providing an inclusive and seamless experience for all users, regardless of their abilities

Benefits of prioritizing accessibility in Web Development

Making your website accessible is always the right thing to do, and aside from the main benefits of accessibility, there are also side benefits like writing cleaner and better codes that will be easier to understand and maintain in the future, for both you and others that might work on your code, making your site better aesthetically, and giving you an upper hand in search engine optimization (SEO). Granted, there is an endless list of benefits from considering accessibility, but if you're new to the concept, it can be overwhelming to learn all the best practices at once because there is a lot to cover. But it's great to keep in mind that every slight improvement you make in considering accessibility when building something goes a long way, and you can always get better with it. That said, let's start with the foundation, which is HTML, the building block of the internet. In other articles, we will discuss CSS, JavaScript, and accessibility tools.

Where do you start ?

The first step to considering accessibility in HTML is making sure your markup is semantic. This simply means that you use appropriate HTML tags when scripting a webpage. This gives more context to tools such as screen readers to get a better understanding of your page and thus present it in a better manner to people who rely on it to navigate a page. You might be tempted to use the <div> tag on every element in a webpage, especially since you can easily get away with making each element look the way you want with some lines in CSS, but it's best practice to use tags that are meant for each element. For example, you can technically wrap a paragraph inside a<div> tag, but you would agree with me that it would be more appropriate to wrap it in a <p> paragraph tag. This is also the case for many HTML tags that aren't as popular. You can always read up on less popular tags that have semantic meaning and try to apply them the next time you write HTML; there's a whole list available on w3schools. A good side effect of writing semantic HTML is better Search engine optimisation (SEO), A search engine will get a better understanding of your webpage if it's written in semantic HTML and this will give it an edge in search rankings
On the other hand, some HTML tags and attributes are made mainly to improve accessibility; learning when, where, and how to use them can greatly improve the accessibility of your page. Some of them include:

<label>This tag is used to associate a text description with a form control, such as a text input or checkbox. This helps users who rely on screen readers understand the purpose of the control.

<legend>This tag is used to provide a caption or title for a fieldset element, which groups related form controls. This helps users who rely on screen readers understand the relationship between the controls.

"alt": This attribute is used to provide a text alternative for images. This helps users who are blind or have low vision understand the content of the images. It is quite popular and can be seen in action even on tweets

<aria-*>The ARIA (Accessible Rich Internet Applications) attributes are used to provide additional information about the purpose and state of elements on a webpage. For example, the aria-label attribute can be used to provide a text label for an element, and the aria-described attribute can be used to associate a text description with an element.

<title>This tag is used to provide a title for the webpage, which is read by screen readers as the name of the webpage. This is another one we are familiar with, and it should be added inside the <head> tag.

Navigating complexities in Web Accessibility

These are just a few examples of the many HTML tags and attributes that can be used to improve accessibility. There are always many options when approaching a particular task, which makes it important to keep in mind that accessibility is a complex and multi-faceted issue, and creating an accessible webpage involves many other considerations beyond the use of specific tags and attributes. Take an "alt" text, for example. It should be properly written to convey how a picture relates to the information on the webpage without being too lengthy. At the same time, there are scenarios when an "alt" attribute should be left entirely empty. so what is more important in the long run is knowing what specific accessibility problem to fix and looking for the most fitting tag to solve each problem

Next steps in your accessibility journey

This article is barely scratching the surface of what's possible with accessibility, but do not let that scare you; the goal of this article is to get you started on a journey to help create a much more inclusive internet. For a deeper dive into this topic, I recommend looking at the well-detailed articles on MDN web docs