Accessibility in HTML5

Last Updated: 22nd June, 2023

What is Accessibility in Web?

Accessibility in web refers to designing and developing websites, web applications, and digital content in a way that makes them usable and accessible for people with disabilities. This means that people with disabilities should be able to perceive, understand, navigate, interact with, and contribute to the web, using assistive technologies such as screen readers, speech recognition software, keyboard-only navigation, and alternative input devices. Accessibility in web aims to remove barriers and provide equal access to information and services for everyone, regardless of their physical, sensory, or cognitive abilities.

Importance of Accessibility in Web Design

Accessibility is crucial in web design because it ensures that websites are usable and understandable by everyone, including those with disabilities. Making web content accessible means that users with visual, auditory, motor, or cognitive impairments can access and interact with the content using assistive technologies such as screen readers, braille displays, or voice recognition software.

Improving accessibility not only benefits individuals with disabilities but also improves the user experience for all users. For example, captions on videos not only benefit individuals who are deaf or hard of hearing but also users in noisy environments or those who prefer to watch videos without sound. Similarly, providing alternative text descriptions for images not only helps users with visual impairments but also provides additional context for search engines to understand the content on a page.

Moreover, accessibility is not only a moral obligation but also a legal requirement in many countries. Failing to meet accessibility standards can result in legal action, fines, and damage to a company's reputation. Ensuring accessibility is not only the right thing to do but also makes good business sense.

Accessibility features in HTML5 that benefit people with disabilities:

1. Semantic markup
2. ARIA attributes
3. Alternative text
4. Video captions and audio descriptions
5. Keyboard Navigation

Semantic HTML

Semantic HTML is a way of writing HTML that emphasizes the meaning of the content, rather than just its presentation. It involves using HTML elements that have a clear and meaningful purpose to both human readers and web browsers, rather than using generic elements that could be interpreted in a variety of ways.

By using semantic HTML, web designers and developers can create web pages that are easier to understand and navigate for people with disabilities, as well as for search engines and other automated systems that rely on clear structure and labeling.

Examples of semantic HTML elements include headings, paragraphs, lists, and tables. These elements have specific meanings and functions that are recognized by web browsers and assistive technologies, allowing them to provide more accurate and effective interpretation and rendering of web content.

Some examples of semantic HTML elements include:

• <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>: These elements define different sections of a web page and describe their purpose and content.
• <h1> to <h6>: These elements define headings and subheadings and describe the hierarchy and structure of the content.
• <p>: This element defines a paragraph of text and describes the content within it.
• <ul> and <ol>: These elements define unordered and ordered lists, respectively, and describe the items within them. Screen reader users can navigate through these lists using shortcuts, which helps them understand the content better.

Using semantic HTML helps improve accessibility by providing a clear and structured document outline that can be easily navigated by screen readers and other assistive technologies. It also helps improve search engine optimization by providing search engines with a clear understanding of the content and structure of a web page.

ARIA Attributes

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to help make web content more accessible to people with disabilities, particularly those using assistive technologies like screen readers. ARIA attributes provide additional information about the functionality and behavior of web components beyond what is conveyed through standard HTML.

ARIA can be used to improve the accessibility of non-semantic elements like divs and spans by providing them with the necessary roles, states, and properties. For example, the role="button" attribute can be added to a div element to indicate that it should behave like a button. This is particularly useful for components that don't have a semantic equivalent in HTML, like custom widgets or interactive elements.

ARIA attributes can also be used to provide additional context and meaning to standard HTML elements. For instance, the aria-label attribute can be used to provide a descriptive label for a button or link that doesn't have visible text. This label is then read aloud by screen readers, providing important information to users with visual impairments.

Examples of ARIA roles and attributes:

1. role="navigation": This attribute is used to indicate that a section of the page contains navigation links. Screen readers will announce this section as a navigation region, making it easier for users to navigate through the site.

Example:

<nav role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

2. aria-label="": This attribute is used to provide a custom label for an element. For example, you can use aria-label to provide a descriptive label for an icon that doesn't have any text.

Example:

<img src="example.jpg" alt="" aria-label="A group of people enjoying a picnic in the park">

2. role="button": This attribute is used to indicate that an element functions as a button. This is useful for users who navigate the web using a keyboard or other assistive technology.

Example:

<div role="button" tabindex="0" onclick="doSomething()">Click me</div>

4. aria-describedby="": This attribute is used to provide additional information about an element. For example, you can use aria-describedby to provide a more detailed description of a form field.

<label for="username">Username:</label>
<input type="text" id="username" aria-describedby="username-help">

<div id="username-help">Please enter your username. It should be between 6 and 20 characters long.</div>

5. role="alert": This attribute is used to indicate that an element contains important or time-sensitive information. Screen readers will announce this element as an alert, making it clear to the user that they should pay attention to it.

<div role="alert">
<p>There was an error processing your request. Please try again later.</p>
</div>

By using ARIA roles and attributes, you can greatly improve the accessibility of your website for users with disabilities. It's a small step that can make a big difference in making the web a more inclusive place for everyone.

Alt text

Alternative text, also known as alt text, is a brief description of the content and context of an image, video, or audio file that can be read by assistive technologies such as screen readers. Alternative text is essential for people who rely on assistive technologies to access digital content. Without alternative text, users who are blind or visually impaired may miss important information and context conveyed through images and other visual media. Alt text also benefits users with cognitive disabilities who may have difficulty processing visual information. In addition to improving accessibility, providing alternative text can also improve the search engine optimization (SEO) of a website by providing contextual information to search engines.

Example of alt:

<img src="example.jpg" alt="A red apple on a white background">

How to Write Effective Alternative Text:

Writing effective alternative text requires a thoughtful and detailed approach. Here are some tips for writing effective alternative text:

1. Be concise: Alternative text should be brief and to the point, providing a concise summary of the content and context of the media.
2. Be descriptive: Alternative text should accurately describe the content and context of the media. Avoid using generic or vague descriptions that do not provide meaningful information.
3. Provide context: Alternative text should provide context for the media, such as the relationship between the image and the surrounding content.
4. Use proper grammar and punctuation: Alternative text should be written using proper grammar and punctuation to ensure it is clear and understandable.
5. Consider the audience: When writing alternative text, consider the needs and preferences of the intended audience, such as the level of technical knowledge or cultural background.

Examples of Good and Bad Alternative Text

Here are some examples of good and bad alternative text:

Bad alternative text: "Picture of a man."

This alternative text is too generic and does not provide any meaningful information about the image.

Good alternative text: "Portrait of a smiling man wearing a red shirt and holding a smartphone."

This alternative text provides a descriptive summary of the content and context of the image.

Bad alternative text: "Chart showing sales data."

This alternative text is too vague and does not provide any meaningful information about the chart.

Good alternative text: "Bar chart showing sales data for the first quarter of 2022, with the highest sales in January and the lowest sales in March."

This alternative text provides a detailed and informative summary of the chart, including the time period and the relative sales figures.

Multimedia Accessibility

Multimedia has become an integral part of the web, providing various ways to engage and convey information to users. However, not all users can access multimedia content in the same way, which makes multimedia accessibility an important consideration for web developers.

Multimedia accessibility refers to making multimedia content, such as videos, audio, and animations, accessible to people with disabilities. This includes individuals who are deaf, hard of hearing, blind, or have limited mobility.

Here are some best practices for making multimedia accessible:

1. Provide captions and transcripts for videos: Captions provide a text version of the audio portion of the video, while transcripts provide a text version of the entire video, including dialogue, sound effects, and music. This makes the content accessible to users who are deaf or hard of hearing, as well as those who prefer to read along.
2. Use audio descriptions: Audio descriptions provide a narration of what is happening on the screen, making the content accessible to users who are blind or have low vision. This can include descriptions of actions, facial expressions, and other visual cues.
3. Provide alternative formats: Provide alternative formats for multimedia content, such as audio-only or text-only versions, for users who cannot access the original format.
4. Ensure player controls are keyboard accessible: Make sure users can control multimedia content using only the keyboard. This is especially important for users with limited mobility who may not be able to use a mouse or touch screen.
5. Choose colors and contrast carefully: Use high contrast between foreground and background colors to make content easy to see for users with low vision. Avoid using color alone to convey information.

Keyboard Navigation

Creating accessible labels and interactive elements is essential for ensuring that keyboard users can effectively navigate and interact with web content. Here are some tips for creating accessible labels and interactive elements for keyboard users:

1. Use descriptive labels: When creating labels for interactive elements such as forms, buttons, and links, ensure that the labels are descriptive and provide clear information about the element's purpose or function. For example, instead of using a label like "click here," use a label like "view more information about our products."
2. Use the "for" attribute: When creating labels for form elements like input fields, use the "for" attribute to associate the label with the corresponding form element. This makes it easier for keyboard users to understand the relationship between the label and the form element.
3. Use the "title" attribute: For interactive elements like buttons and links, use the "title" attribute to provide additional information about the element's purpose or function. This is particularly important for elements that may not have descriptive labels, such as icons or graphics.
4. Ensure elements are keyboard focusable: Ensure that all interactive elements on your website, including links, buttons, and form fields, are keyboard focusable. This means that users can navigate to and interact with these elements using only the keyboard.

Conclusion

In conclusion, web accessibility is the practice of designing and developing websites, applications, and content to be usable by people with disabilities. By prioritizing accessibility in web design, developers can ensure that everyone, regardless of their physical, sensory, or cognitive abilities, has equal access to information and services. Implementing accessibility features like semantic HTML, ARIA attributes, alternative text, multimedia accessibility, and keyboard navigation can significantly improve the user experience for individuals with disabilities. Furthermore, accessibility is not just a moral obligation, but a legal requirement in many countries, making it crucial for businesses to meet accessibility standards to avoid legal repercussions and maintain a positive reputation.