Content Accessibility

Making an accessible website means making your website usable and visible to all users. Not only people with disabilities should be taken into account, but also users on smartphones, users with network problems, etc. In some countries, accessibility is the law. It is important to achieve content accessibility because we want to give everyone an equal opportunity in using our website. In this topic, you will learn good coding practices that achieve content accessibility. So, let's get started!

Content Accessibility

Accessibility, in the context of web development, means that the website is accessible to all people regardless of any impairments. Users' impairments can be split into four categories:

• Vision, an impairment that ranges from limited or low vision to complete blindness.

• Motor, an impairment that affects the ability to use a mouse, touchscreen, or pointing device.

• Auditory, an impairment that ranges from difficulty hearing to speech processing issues, to full inability to hear any sounds.

• Cognitive, a category that includes a variety of impairments such as ADHD, dyslexia, etc.

Your website could be looking perfect and have the best functionality, but still it won't be accessible to everyone if you are not considering these four user categories. So, keep them in mind while building a website to accomplish the best functionality.

Users with impairments often use a screen reader. A screen reader is an assistive technology that is most commonly used by people with vision or cognitive impairment. A screen reader scans the web page from top to bottom and reads out each element, helping users get to the desired section of the web page. Here is a good example of a content structure that can help screen readers:

<h1>Main heading</h1>

<section>

  <h2>Sub-heading</h2>
    <p>List item description<p>

      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>

</section>

Up until now, you've learned the importance of using correct HTML tags for their intended purpose, such as <title>, <header>, <footer>, for example. These tags are of great importance because they enhance accessibility and functionality. Also, they are being scanned by the screen reader. There are a few good practices you could implement into your HTML code to accomplish content accessibility, and that is what we are going to cover in the following steps.

Good Semantics

Using good semantics means using proper HTML tags for their intended purpose. There are numerous benefits of good semantics, but one of the most important is Content Accessibility.

First and foremost, a good structure of your website can go a long way when it comes to content accessibility. It is very important to have a good structure so your users can easily navigate through the website. This can be accomplished with headings, paragraphs, lists, navigation bar, and other HTML semantic tags.

Use tags such as main, nav, aside, and section to divide your website so the screen readers can easily and quickly navigate to a section of a page, and skip over sections of a page that they do not need. Usually, developers rely greatly on div tags, but they are easy to overuse and get overwhelmed with. Also, they do not help screen readers because developers give them meaning using different sets of attributes.

To achieve the best content accessibility, use the main tag to specify the main content of the website, and the section tag to divide the content into sections. Use aside to represent a portion of a web page with content that is only indirectly related to the web page's main content. Finally, use nav to define a set of navigation links so screen readers can determine whether they are going to omit the initial rendering of this content. Here is a code structure you can easily follow:

Choosing the correct heading is the next example of a good code practice for content accessibility. Screen readers will pick up a heading code and notify the user. After that, screen readers enable users to skip from one heading to another, ensuring that they can easily navigate through the web page. By choosing the correct heading you can help your users navigate the website by creating a skeleton that forms a mental picture of the content. Think of headings like this: use the h1 heading for the most important title and the h6 heading for the least important title. Here is a code example:

<h1>Main title</h1>
<section>
  <h2>Section title<h2>
  ...
  <h3>Sub-section title<h3>
</section>

Keyboard accessibility

Some users have motor impairments and they can only rely on keyboard accessibility while navigating through the web page. That's why it's important to have a good keyboard strategy. So how can you accomplish universal accessibility? You can do that with interactive HTML elements. Interactive HTML elements are text fields, buttons, and select lists because they are focusable. In order to move focus to your web page simply tap TABand SHIFT + TAB to go backward. Just keep tapping the TAB button until you focus on the element you need.

There are a few strategies you can follow to achieve a smooth keyboard navigation experience. First, you can place elements in the DOM to achieve logical order. This is pretty straightforward: if you want something to appear first, simply put it earlier in the DOM tree. Secondly, correctly set the visibility of offscreen content that should not receive focus. Some elements must be in DOM, but they shouldn't be focusable. You can disable this by applying the CSS properties listed down below:

• display: none;

• visibility: hidden;

Lastly, use built-in interactive elements such as:

• <a>

• <input>

• <button>

• <select>

• <textarea>

These elements are interactive elements, focusable, and when paired with good semantics and keyboard support they make great content accessibility.

Conclusion

In this topic, you've learned about content accessibility, what it is and why it is important. Now, you can make accessible content in no time with:

• good semantics,

• keyboard accessibility, and

• good coding practices.

Now that you are finished with the theoretical part, let's put it to the test!