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.
The video below shows how web accessibility benefits everyone.
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
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
For instance, although you can use any HTML element (such as
<div>) to create a button.
<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.
<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.
<h1>Your A–Z Guide to Web Development</h1>
An accessible language conveys information explicitly.
<h1>Your A-to-Z Guide to Web Development</h1>
Learn CSS Grid with Images
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:
Click <a href="https://codesweetly.com/">here</a> to access simplified web
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:
<a href="https://codesweetly.com/">Visit CodeSweetly</a> to access simplified
web development tutorials.
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."
alt attributes for images
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.
An accessible image describes the image briefly and concisely.
alt="Illustration of CSS grid lines"
alttext should be distinct from the image's surrounding text. It's best to avoid text duplication.
- Use empty
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:1is the minimum (level AA) requirement for normal text.
3:1is the minimum (level AA) requirement for large text.
7:1is the enhanced (level AAA) requirement for normal text.
4.5:1is 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.
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.