Skip to main content

Accessibility Meaning Explained – How to Create Accessible Web Applications

Accessibility means allowing everyone access to a specific resource regardless of a person's abilities or limitations.

In other words, an accessible web application has a universal design that makes it usable to everyone, irrespective of the user's ability barriers.

The video below shows how web accessibility benefits everyone.

Video: A short documentary on why accessibility is essential for some and useful for all.

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

—W3C
note

Accessibility is often called "a11y" due to the occurrence of eleven (11) letters between the first letter (a) and the last one (y).

Types of Limited Abilities​

Below are some types of limited abilities a person may have.

  • Permanent limitations: Lifelong constraints that limit a user's ability to use a facility—for example, complete blindness or deafness.
  • Temporary limitations: Short-term constraints that prevent a user from using a specific resource as usual—for instance, a broken arm or impairments after surgery.
  • Situational limitations: Incidental constraints that make it difficult to use a facility—for example, slow internet, malfunctioning keyboard, or low mouse battery.

How to Use HTML to Create an Accessible Web App​

Below are a few ways to use HTML to create accessible web content.

1. Use semantic HTML​

Semantic HTML means expressing the meaning of an HTML element by using the correct tags to annotate the content.

For instance, although you can use any HTML element (such as <span> or <div>) to create a button.

❌Inaccessible
<div>Click to subscribe</div>

However, it is best to use the <button> tag because you get access to useful built-in features such as keyboard accessibility.

✓Accessible
<button>Click to subscribe</button>

2. Use clear language​

A clear language is a text that is easy to understand.

For instance, writing A–Z falsely assumes everyone knows what the dash (–) symbol implies.

❌Inaccessible
<h1>Your A–Z Guide to Web Development</h1>

An accessible language conveys information explicitly.

✓Accessible
<h1>Your A-to-Z Guide to Web Development</h1>

3. Use accessible labels​

Accessible labels are texts that are meaningful on their own and as part of the context in which you've used them.

For instance, consider the following link:

❌Inaccessible
<p>
  Click <a href="https://codesweetly.com/">here</a> to access simplified web
  development tutorials.
</p>

The link above is an inaccessible label because the text "here" is not meaningful on its own (where exactly is "here"?). Screen reader users will find multiple instances of "here", "here", "here" text labels problematic.

Here is a better alternative:

✓Accessible
<p>
  <a href="https://codesweetly.com/">Visit CodeSweetly</a> to access simplified
  web development tutorials.
</p>

The link above is an accessible text label because the text "Visit CodeSweetly" is distinctive and meaningful out of context for all users. Screen readers will announce the text as "Visit CodeSweetly, link."

4. Provide alt attributes for images​

An alt attribute means "alternate text". We use it to provide helpful descriptions of an image. Screen readers read out the alt text to inform their users what the image means.

Suppose you do not provide an alt attribute. In that case, screen readers will read out the image's filename instead—which is not always helpful, especially if it's a machine-generated filename.

❌Inaccessible
<img
  src="https://codesweetly.com/assets/images/css-grid-lines-illustration-codesweetly-0f1793ffcf56ed98206bd7fb3ae81e12.webp"
/>

An accessible image describes the image briefly and concisely.

✓Accessible
<img
  alt="Illustration of CSS grid lines"
  src=" https://codesweetly.com/assets/images/css-grid-lines-illustration-codesweetly-0f1793ffcf56ed98206bd7fb3ae81e12.webp"
/>
note
  • An alt text should be distinct from the image's surrounding text. It's best to avoid text duplication.
  • Use empty alt attribute (alt="") for decorative images that convey no meaning. Screen readers will recognize the image but will not read out any information about it. Instead, they will simply say "image" or something similar. A better alternative is to use CSS to display decorative images.

How to Use CSS to Create an Accessible Web App​

Below are a few ways to use CSS to create accessible web content.

1. Use accessible color contrast​

Make sure your foreground and background colors have a high contrast ratio.

WebAIM's Contrast Checker is an excellent tool for checking the contrast ratio between your foreground and background color.

Note the following:

  • 4.5:1 is the minimum (level AA) requirement for normal text.
  • 3:1 is the minimum (level AA) requirement for large text.
  • 7:1 is the enhanced (level AAA) requirement for normal text.
  • 4.5:1 is the enhanced (level AAA) requirement for large text.
  • A normal text is regular text with a font size of less than 18 points (24px) or a bold text with less than 14 points (18.66px).
  • A large text is a regular text with a minimum font size of 18 points (24px) or bold text with a minimum of 14 points (18.66px).

2. Beware of display: none and visibility: hidden CSS declarations​

Screen readers ignore elements with a display: none or visibility: hidden CSS declarations. Therefore, do not apply them to content you wish to make accessible. Only use them to hide items from all users.

note

Elements with zero (0) pixel width or height are also inaccessible because browsers typically remove them from the page flow. Therefore, screen readers will not read such content.

How to Use JavaScript to Create an Accessible Web App​

Do not overuse JavaScript​

Relying too much on JavaScript affects an app's accessibility. Therefore, use JavaScript only where needed. For example, think carefully about whether you need a JavaScript-powered animation or whether a CSS animation would do the job.

Overview​

This article discussed what accessibility is. We also discussed using HTML, CSS, and JavaScript to create accessible web applications.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article