Software Development Engineer I at ASSIST
Life is the art of drawing without an eraser.
ASSIST intern at ASSIST
Never discourage anyone who continually makes progress, no matter how slow.
Read time: 30 minutes
1. Introduction in Web Accessibility
Before discussing web accessibility, we should understand what "accessibility" means. This term refers to the importance of everyone having access to something.
Accessibility can be viewed as the "ability to access" and benefit from some system or entity. The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone. - Wikipedia.
Web accessibility means that websites, tools, and technologies should be designed and developed in a way that allows people with disabilities to use them. Specifically, they should be able to:
- understand, navigate and interact with the web;
- contribute to the web.
Web accessibility takes into account all disabilities that affect access to the web:
- auditory;
- cognitive;
- neurological;
- physical;
- speech;
- visual.
One way for browsers to present web content in an accessible way is by accurately communicating details about user interface components using assistive technologies such as NVDA, JAWS etc.
In order to develop an accessible website, it must comply with the WCAG (Web Content Accessibility Guidelines) standards. The standards from the document explain how to make web content more accessible to people with disabilities.
In this article, you will find do's and don'ts to take into consideration while implementing your website. According to the WCAG standard, there are three levels of compliance:
- Level A (minimum);
- Level AA (recommended);
- Level AAA (advanced).
The suggestions from this article generally refer to levels A and AA compliance.
2. Images
Regarding images on websites, the first rule is to set an alt attribute on the <img/> tag. This requirement is necessary because, without this attribute, a screen reader would render the path or name of the source file, which would confuse the user. Also, it is recommended to avoid text images as much as possible.
2.1 Decorative Images
It is necessary to determine whether an image provides any information concerning the context, or if it's purely decorative; if the image can be removed without any loss of information, it is a decorative image.
In some cases, the value of the alt attribute must be empty (alt = "").
However, if the image has been inserted with the <svg> tag, set the aria-hidden attribute to true (aria-hidden = "true").
-
<!-- Decorative image - <img> -->
-
<img src="image.jpg" alt="" class="image-class">
-
-
<!-- Decorative image - <svg> -->
-
<svg aria-hidden="true"></svg>
Code 1: Decorative images
2.2 Informational images
On the other hand, if an image contains information, this text must appear in the value of the alt attribute, for example using: alt = "information conveyed".
Instead of using the <img/> tag, the <svg> tag can be used. In this case, you must:
- set a role = "img" attribute and an aria-label = "[information conveyed]";
- contain a <title> tag with the same value as the aria-label attribute.
-
<!-- Informational image - <img> -->
-
<img class="informational-image-class" src="image.png" alt="Informational conveyed">
-
-
<!-- Information image - <svg> -->
-
<svg role="img" aria-label="Informational conveyed">
-
<title> Information conveyed </title>
-
</svg>
Code 2: Informational images
3.Contrast
Contrast is very important for accessibility because users who have difficulty perceiving colors must be able to go through a web page without having difficulties in reading the content. So, in order to make the content accessible for everyone, you need to at least provide the minimum contrast values.
Contrast relates to the contrast ratio between the writing color and its background color.
The minimum contrast ratios for levels AA and AAA compliance are explained in the following diagram:
Figure 1: Contrast Ratios
You can check the contrast ratio of your text by using the following online tools:
Chrome DevTools can also be used to check contrast ratios. Select any text in your HTML code and in the Styles tab, locate the color property. Click on the color swatch to open the picker tool, which will display the contrast ratio.
Figure 2: Chrome Dev Tools
4. Tables
Tables are useful tools for representing different information because they make the content easy to understand and possibly easier to read. Visually, tables seem good to use, but from the accessibility point of view, these can be very difficult to go through. Even so, using tables cannot be avoided. Sometimes, the content or the design imposes the need to implement a tabular structure, so it is necessary to make it accessible and understandable for everyone.
Tables can have different structures depending on the presented information. Thus, the approach for making a table accessible depends on its complexity.
A simple table refers to one that does not have merged cells, which ensures an understandable format. Such a table looks something like this:
Table 1: Simple table
When implementing a simple table, you must:
- add a <caption> element just after the <title> tag. The text inside the <caption> is the title of the table and allows users to understand what the table contains;
- implement headers in <th> elements;
- add scope="col" on <th> for column headers;
- add scope="row" on <th> for row headers.
So, the structure for this table is shown below:
-
<table>
-
<caption> List of countries </caption>
-
<thead>
-
<tr>
-
<th scope="col">Countries</th>
-
<th scope="col">Official language</th>
-
<th scope="col">Capital</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>Angola</td>
-
<td>Portuguese</td>
-
<td>Luanda</td>
-
</tr>
-
<tr>
-
<td>Bahrain</td>
-
<td>Arabic</td>
-
<td>Manama</td>
-
</tr>
-
<tr>
-
<td>Cameroon</td>
-
<td>Englidh/French</td>
-
<td>Yaoundé</td>
-
</tr>
-
<tr>
-
<td>Danmark</td>
-
<td>Danish</td>
-
<td>Copenhagen</td>
-
</tr>
-
<tr>
-
<td>Egypt</td>
-
<td>Literary arabic</td>
-
<td>Cairo</td>
-
</tr>
-
</tbody>
-
</table>
Code 3: Simple table HTML structure
On the other hand, complex tables are represented by structures with merged cells or subcontexts. Below, is an example of this type of table:
Table 2: Complex table
It is very important to make the right connections between headers and content itself. In the case of the merged cells, you need to use the relationship's id, and headers to link data cells to their headers.
-
<table>
-
<caption>Increasing number of employees in companies</caption>
-
<thead>
-
<tr>
-
<th id="xcompany" colspan="2">X Company</th>
-
<th id="ycompany" colspan="2">Y Company</th>
-
<th id="zcompany" colspan="2">Z Company</th>
-
</tr>
-
<tr>
-
<th id="1item" headers="xcompany">2017</th>
-
<th id="2item" headers="xcompany">2018</th>
-
<th id="3item" headers="ycompany">2017</th>
-
<th id="4item" headers="ycompany">2018</th>
-
<th id="5item" headers="zcompany">2017</th>
-
<th id="6item" headers="zcompany">2018</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td headers="xcompany 1item">100</td>
-
<td headers="xcompany 2item">50</td>
-
<td headers="ycompany 3item">80</td>
-
<td headers="ycompany 4item">10</td>
-
<td headers="zcompany 5item">267</td>
-
<td headers="zcompany 6item">22</td>
-
</tr>
-
<tr>
-
<td colspan="2" headers="xcompany">150</td>
-
<td colspan="2" headers="ycompany">90</td>
-
<td colspan="2" headers="zcompany">289</td>
-
</tr>
-
</tbody>
-
</table>
Code 4: Complex table HTML structure
Thus, for complex tables, it is necessary to:
- add a <caption> element just after the <title> tag;
- implement headers in <th> elements;
- add an id (id="xid") for the header;
- ensure that the main header id (id="item") is the same as the multi-level heading attribute (headers="xid");
- ensure that the multi-level heading also has an id;
- add a headers attribute (headers="xid item") on the <td> that contains the values of the headers’ attributes and the id of the <th>.
Recommendation: If you don't want the text of the <caption> to be visible, you can just add an "sr-only" class and the text will be visible only for screen readers.
5.Links
It is essential for visually impaired users to be able to understand the function of a link because they don’t have an overall view of the page. Unclear links don't encourage any action for these users and if a link is not descriptive enough, it is very difficult for the user to understand which page they are heading to.
5.1 Picture Links
When a link contains a single image, the alternative text of the image is the title of the link. In this case, the alternative text is no longer the description of the image, but rather the destination of the link.
For <img> images, the content of the alt attribute is the title of the link.
-
<!-- Image links with an alternative -->
-
<a href="#" class="btn">
-
<img src="https://img.icons8.com/clouds/100/000000/gift.png" alt="Gift">
-
</a>
-
<!-- Image links without an alternative(empty links) -->
-
<a href="#" class="btn">
-
<img src="https://img.icons8.com/clouds/100/000000/gift.png">
-
</a
Code 5: Picture links
Depending on the type of image, the alternative text (title link) is defined differently:
- on <img> or <area> tags with an href attribute, the alternative is the content of the alt attribute;
- on <object>, <canvas> and <embed> tags, the alternative is contained between the opening and closing tags;
- on the <svg> tag, the alternative is contained in the 'aria-label', 'title' or <desc> tag.
5.2 Composite links: Image and text
When a link contains an image and visible text, this text is enough for visually impaired users to understand the destination of the link. The image is decorative so it must have an empty alt attribute.
-
<!-- Composite links (decorative image and text) -->
-
<a href="#" class="btn">
-
<img src="https://img.icons8.com/clouds/100/000000/gift.png" alt="">
-
Gift
-
</a>
-
<!-- Composite links (image with irrelevant alternative -->
-
<a href="#" class="btn">
-
<img src="https://img.icons8.com/clouds/100/000000/gift.png" alt="gift.png">
-
Gift
-
</a>
Code 6: Composite links
5.3 Empty links
All links must have an explicit text between the opening and closing tags of <a>. Even though this is mandatory, we often find empty links when icons are generated in CSS or when the source of an image is specified in the background property.
The solution to this problem is to put a relevant text positioned off-screen using the sr-only class. The screen reader will be able to read the alternative text.
5.4 Title of links
The attribute title is used to provide additional information to the title of the link and to make it more explicit. It is mandatory for this title to be built using the model: link title + additional information.
<a href="..." title="My Title - My Additional Information"> My Title </a>
Examples of poor usage of the attribute title:
- the same title as the link title;
- the title voids.
When implementing an accessible link, you must remember that the presence of a title on a link doesn't make it a proper link; It must always have a text caption between tags <a> and </a>.
6 Multilingual content
Sometimes, screen readers can have issues regarding pronunciation. These kinds of issues appear especially when the interface language is not English and the screen reader cannot identify the right language accent. For blind users, this is a huge problem because the web content becomes incomprehensible.
To solve this problem, it is necessary to add a lang attribute. This attribute can be applied to any tag (<p>, <a>, <ul>, <li>, etc.).
-
<p lang="en">Go to the next lesson</p>
-
<p lang="ro">Mergi la urmatoarea lectie</p>
-
<p lang="fr">Aller à la suivant leçon</p>
Code 6: Lang attribute
For languages like Arabic that read from right to left and not from left to right, indicate the direction with the attribute dir = "rtl".
<p lang="ar" dir="rtl">انتقل إلى الدرس التالي</p>
Code 7: Dir attribute
7. Structuring information:
7.1 Headings
For a blind user, content on a web page is only a long series of text. If the user uses a screen reader, they have keyboard shortcuts to navigate through item types such as titles, lists, tables, etc. Without a proper structure, it is very difficult for the user to find their way through the content of the website.
Titles are very important when it comes to structuring content on a web page. There are three requirements to take into consideration when using titles:
- the page must have at least one <h1> title;
- the title hierarchy must be consistent (For example, after an <h3>, you should have an <h4> or another <h3>, but especially not an <h5>);
- all necessary titles must be present.
Tip: To check the title hierarchy on your page, you can use the Firefox extension HeadingsMap.
Note: Titles in the modal window must be managed separately from those in the page.
According to WAI-ARIA 1.1, you can use role="heading" and aria-level="n" to transform any HTML element into a title.
Example:
Good practice
-
<div>
-
<h1>Main heading</h1>
-
<p>Structure of a page is very important</p>
-
<h2>About</h2>
-
<p>This is a demo</p>
-
<h3>Example heading level 3</h3>
-
<p>Dummy text</p>
-
<h3>Subtitles</h3>
-
<p>Another dummy text</p>
-
</div>
Bad practice
-
<div>
-
<div role="heading" aria-level="1">Main heading</div>
-
<p>Structure of a page is very important</p>
-
<p>This is a demo</p>
-
<h3>Example heading level 3</h3>
-
<p>Dummy text</p>
-
<div role="heading" aria-level="2">About</div>
-
<h3>Subtitles</h3>
-
<p>Another dummy text</p>
-
</div>
Code 8: Headings
Regarding accessibility best practices, the best way to implement a correct structure of titles is to not use this role at all and instead use the native heading tags from <h1> to <h6>.
7.2 Document structure (tags & roles)
HTML5 and ARIA landmarks
From my experience, I can say that it is very important to structure your document in such a way that a screen reader can easily navigate through the main elements of the content.
I recommend locating the following elements if you have to implement accessibility on your project or if you make it from scratch:
- the main header;
- the main content;
- the main and any secondary navigation;
- the footer;
- the search engine;
If you use HTML5, there are tags for each of these parts of the page and ARIA properties (attribute roles) to easily identify them:
- the main header - <header> with role="banner"
- the main content - <main> with role="main
- the navigation - <nav> with role="navigation"
- the footer - <footer> with role="contentinfo"
- the search engine - role="search"
Important points to take into consideration:
- several header tags can be found but their role="banner" attributes must be unique in the page;
- the main tag and role=" main" attribute are unique in the page;
- several footer tags can be found but their role="contentinfo" attributes must be unique in the page;
- the role="search" attribute is unique in the page;
- we can find several nav tags and also several role="navigation" attributes.
Example:
Good practice
-
<header role="banner" class="c-header">
-
<!-- Header content goes here ... -->
-
</header>
-
<nav role="navigation" class="c-main-navigation">
-
<!-- Navigation content goes here... -->
-
</nav>
-
<div role="search">
-
<!-- Search content goes here... -->
-
</div>
-
<main role="main" class="c-main-content">
-
<!-- Main content goes here... -->
-
</main>
-
<footer role="contentinfo">
-
<!-- Footer content goes here... -->
-
</footer>
Bad practice
-
<div class="c-header">
-
<!-- Header content goes here ... -->
-
</div>
-
<div class="c-navigation">
-
<!-- Navigation content goes here... -->
-
</div>
-
<div class="c-content">
-
<!-- Main content goes here... -->
-
</div>
-
<div class="c-footer">
-
<!-- Footer content goes here... -->
-
</div>
Code 9: HTML5 and ARIA landmarks
7.3 Citations
Be sure to use the <blockquote> tag for quote blocks. Even though this aspect may not seem very important, any deviation from this rule would make the content more complex for blind and visually impaired people to understand and could generate ambiguities and misunderstandings.
-
<blockquote> "I was within and without, simultaneously enchanted and repelled by the inexhaustible variety of life"
-
<cite>Fitzgerald F. Scott, The Great Gatsby</cite>
-
</blockquote>
Code 10: Blockquote
8 Presentation of information
8.1 Using CSS exclusively
Users who have some reading difficulties may want to adapt the content of the pages with their own formatting. This can be done easily if the website is not fitted with inline CSS style, which makes adaptations more complicated, if not impossible. So, you must remove all the inline style and apply the style only by CSS classes.
The following elements and attributes are forbidden: basefont, blink, center, font, marquee, s, strike, tt , big, align, alink, background, bgcolor, border, cellpad, cellspacing, float, charoff, clear, compact, color, frameborder , hspace, link, marginheight, marginwidth, text, valign, vlink, vspace and size.
Moreover, the width and height attributes used on elements other than the <img>, <object>, <embed>, <canvas>, and <svg> tags are also prohibited.
-
<!-- "align" attribute in this context is prohibited -->
-
<div align="right">
-
<!-- "width" and "height" are ok on the <img> tag -->
-
<img src="img.png" width="100%" height="100%">
-
</div>
Code 11: Using CSS exclusively
8.2 Making content visible without stylesheets
Informative content inserted with background or content properties may not be rendered properly by screen readers. For example, if you have multiple lessons in your content and some of them are locked, in this case, they are locked by the use of lock icons (see Figure 3). However, a screen reader won't be able to identify these locked lessons.
The solution to this problem is to add information via an sr-only class. This hides the text visually and it makes it visible only to screen readers.
Example:
Figure 3: Locked lesson
Good practice
-
<div class="c-v__thumbnail" style="background-image:url('')">
-
<div class="c-locked-icon"></div>
-
<span class="sr-only">Blocked Exercise</span>
-
</div>
-
Bad practice
-
<div class="c-v__thumbnail" style="background-image:url('')">
-
<div class="c-locked-icon"></div>
-
</div>
Code 12: Content visible without stylesheet
8.3 Enlarging text size (fixed units)
Visually impaired users and people with reading difficulties such as dyslexia, may need to adjust the text size on a web page.
The enlargement of the text must not cause loss of information and the web page content must remain legible and understandable.
To comply with this, is enough to:
- set text size in relative units;
- avoid setting box sizes in fixed units;
- use certain CSS properties with caution.
Set the font-size using relative units.
In order to ensure that text on a web page is adjustable, it is necessary to use relative units such as em, rem,%, etc., rather than fixed units such as px, which are prohibited. By doing this, the text size can be adjusted relative to the content.
Recommendation: If you need to convert the font size from px to em, make sure to do the conversion based on the font-size of the <body>. In this way, the font size will remain the same.
Avoid setting fixed heights
When it comes to setting heights for text containers, the main point to remember is to not set a fixed height because there is a risk of losing pieces of information when a user increases the text size. In order to avoid this issue, it is recommended to change the units into relative units (em, rem, etc.) or to use a minimum height (min-height) rather than a fixed height.
Good practice
-
<!-- Recommended -->
-
.class {
-
min-height:50px;
-
}
Bad practice
-
<!-- Not Recommended -->
-
.class {
-
height:50px;
-
}
Code 13: Height of a text container
CSS properties
There are some CSS properties that must be used with care. A good example is overflow:hidden. If a box does not contain text, it will not be a problem, but if it contains text and in addition you have defined a fixed height in pixels, the text will disappear. Other CSS properties that need to be used carefully are position: absolute and position: fixed.
The position of the elements could cause some problems, so you need to be sure that text enlargement does not overlap with other elements. Another property to consider is white-space: nowrap because this does not allow text to be fitted normally and information can be lost.
9. Forms
When it comes to filling in online forms, users need to provide some information (e.g. name, email, password, etc.), and visually impaired users need to know exactly what information they need to provide and why. For this reason, a form must:
- have relevant labels;
- use a consistent method to link the fields to their respective labels;
- keep a simple and clear structure.
Labels
When a screen reader enters an input field, it reads the content of the label. The user then understands what he must enter.
Blind and visually impaired people who use screen readers will have major difficulties in understanding the form if it contains fields without labels. A relevant label provides enough information regarding the field to which it is connected.
Properly link forms
It is important to know that there is more than one way to bind fields and labels, so you need to choose the best method for your case. The most recommended method is to use for / id attributes, which can be written in two ways:
-
<label for="name">Name</label>
-
<input type="type" id="name"/>
This implementation is really helpful for a checkbox because by clicking on the label, the checkbox get checked.
-
<label for="yes">Yes</label>
-
<input type="radio" id="yes" value="item1" name="items"/>
-
<label for="no">No</label>
-
<input type="radio" id="no" value="item2" name="items"/>
The second way looks like this:
-
<label>Yes
-
<input type="radio" value="item1" name="items"/>
-
</label>
-
<label>No
-
<input type="radio" value="item2" name="items"/>
-
</label>
Code 14: Properly link forms
Binding is very important for form accessibility; without it, even if a label is present visually, for blind users the field will appear empty and they will not know what to enter.
Another way to ensure accessibility is by using ARIA attributes such as aria-labelledby and aria-label.
Recommendation: Try to avoid labeling by title attribute or placeholder. These are not considered valid labeling methods and they are not accessible.
Required fields
Required fields can be indicated by using:
- a label (e.g. <label>E-mail (required)</label>);
- an asterisk (*).
Recommendation: Fields indicated by color are not compliant as blind users and even some visually impaired users will not be able to distinguish the color differences.
Grouping fields
In order to group fields together, you must do the following:
- use the <fieldset> tag;
- add a <legend>Title</legend> just after the <fieldset> tag;
- properly bind fields and labels;
- make sure that check/uncheck function works with the arrows keyboard.
10 Navigation
10.1 Navigation systems
Providing at least two navigation systems is important because:
- not all users navigate in the same way;
- some navigation systems may be too complex to use, especially for people using assistive technologies.
By navigation systems, we mean any process in a site or on a page that allows navigation, such as:
- a main navigation menu;
- a site map;
- a search engine.
10.2 Fast access links
Fast access links (also called avoidance links) are anchors to certain elements of a page. You must provide users with fast access links because, without them, quadriplegic users would need to press tab multiple times to reach a certain element on the page.
Therefore, it is important to implement the following features on your site:
- a link that provides access to the main content area;
- a link that provides access to each group of important links (e.g. navigation menu).
Important note!
The access link to the main content should always be present. Other access links are only useful if you have many tabular contents before the main navigation menu.
For them to be effective, fast access links should always be positioned at the beginning of the code and at the top of the page.
Good Practice
-
<!-- Hidden fast access links visible to focus capture -->
-
a {
-
position: absolute;
-
top: -10000px;
-
&:focus {
-
top: 0;
-
}
-
}
-
-
<!-- Fast access links always visible -->
-
a {
-
position: static;
-
top: -10000px;
-
}
Bad Practice
-
<!-- Hidden and inaccessible fast access links -->
-
a {
-
display: none;
-
&:focus {
-
display: block;
-
}
-
}
Code 15: Fast access links
If you need to position them off-screen, you should at least make them visible at the focus state. Do not use the following CSS properties and attributes to hide them:
- display: none;
- visibility: hidden;
- width:0; and height: 0;
- font-size: 0;
- hidden HTML5 attribute;
- aria-hidden="true" ARIA property.
10.3 Consistent tab order
The path of tabulation usually follows the order of the HTML code. If you use tabindex values that exceed 0 (tabindex="1", "2", etc.), the tabulation path is modified. This modification can cause various problems for screen readers.
I recommend using only the following values for your website:
- 0, which means that the element can receive focus and can be accessed with the tab key in the natural order of the source code. You can even make the elements that are not natively interactive (<div>, <p>, <span>, etc.) focusable.
- -1, which means that the element can receive focus, but can't be accessed with the tab key.
Important:
- It’s better to avoid any value greater than 0.
- Use -1 to move the focus to elements that have their focus set using scripts.
- Use 0 only for elements that are not natively interactive.
Good Practice
-
<a href="#">Link</a>
-
<button>Press me</button>
-
<div tabindex="0"> I receive focus</div>
-
<span tabindex="0">I also receive focus</span>
-
<div tabindex="-1">I receive focus from J</div>
-
<a href="#">Another link</a>
Bad Practice
-
<a href="#" tabindex="0">Link</a>
-
<button tabindex="1">Button</button>
-
<ul>
-
<li><a href="#" tabindex="2">Link inside list</a></li>
-
<li><a href="#" tabindex="3">Link inside list</a></li>
-
<li><a href="#" tabindex="4">Link inside list</a></li>
-
</ul>
-
<div tabindex="0"></div>
Code 16: Tab order
11. Show/hide an area
In order to control the visibility of a section of the content, we can use a disclosure button.
Properties
- The element that shows and hides the content must have the button role.
- The element with the button role must have the aria-expanded attribute set to true when the content is visible, otherwise, it should be set to false.
- When the disclosure control has focus, the enter and space keys toggle the visibility of the disclosure content.
Good Practice
-
<!-- Hidden state -->
-
<button aria-expanded="false" aria-controls="example-good">Press me</button>
-
<div id="example-good" style="display: none;"></div>
-
<!-- Status displayed -->
-
<button aria-expanded="true" aria-controls="example-good">Press me</button>
-
<div id="zone" style="display: block;"></div>
Bad Practice
-
<!-- Hidden state -->
-
<button role="button" class="toggle-me" aria-label="Toggle content"></button>
-
<div id="bad-example" style="display: none;"></div>
-
<!-- Status displayed -->
-
<button role="button" class="toggle-me" aria-label="Toggle content"></button>
-
<div id="bad-example" style="display: block;"></div>
Code 17: Show/hide area
12. Carousels
Carousels are very complex elements and it's hard to make them accessible because if they are automatic, a screen reader might not have enough time to read the content on each slide.
Several web development strategies can be used depending on the case. Whatever model you have, the carousel must meet the following requirements as a minimum:
- navigation items (previous/next arrows) must be buttons (HTML button tags or ARIA buttons);
- a method of consistent navigation between the navigation area and the controlled content area;
- if the carousel is automatically scrolling, a method to pause and restart must be provided ("play" / "pause" buttons);
We have three types of carousels:
- Basic
- Tabbed
- Grouped
Minimum requirements for basic carousel elements
- a carousel container element, which must include all the components of the carousel;
- The carousel container has the aria-roledescription property set to the carousel;
- The controllers are native buttons;
- If the carousel has a visible label, its accessible label is provided by the aria-labelledby property;
- Each slide container has its role group with the aria-roledescription property set to slide;
- Each slide has an accessible name.
For further information about carousels, you can check the documentation of WAI-ARIA 1.1 on https://www.w3.org/TR/wai-aria-practices-1.1/#carousel
Good Practice
-
<section class="carousel"
-
aria-roledescription="carousel"
-
aria-label="My carousel example">
-
<div class="carousel-inner">
-
<div class="controls">
-
<button
-
class="previous"
-
aria-controls="exampleCarousel-items"
-
aria-label="Previous slide">Prev</button>
-
<button
-
class="next"
-
aria-controls="exampleCarousel-items"
-
aria-label="Next slide">Next</button>
-
</div>
-
<div class="carousel-items"
-
id="exampleCarousel-items"
-
aria-live="off">
-
<div class="exampleCarousel-items"
-
role="group"
-
aria-roledescription="slode"
-
aria-label="1 of 3">
-
<img src="" alt="Carousel image">
-
</div>
-
<!-- Next slide items -->
-
</div>
-
</div>
-
</section>
Bad Practice
-
<section class="carousel"
-
aria-label="Image example">
-
<div class="carousel-inner">
-
<div class="controls">
-
<span class="next-slide"
-
aria-label="Next slide">Next</span>
-
<span class="previous-slide"
-
aria-label="Previous slide">Prev</span>
-
</div>
-
<div class="carousel-items">
-
<div class="carousel-items"
-
aria-label="Carousel item">
-
<img src="" alt="Carousel image">
-
</div>
-
<!-- Next carousel slides -->
-
</div>
-
</div>
-
</section>
Code 18: Carousel
13. Modal windows
A modal is actually a component that is not permanently visible. It is displayed and hidden at certain times. So, for users with some disabilities, the modal should have the same behavior: It must be visible and ignored when it is the case. Thus, it must ensure the following HTML implementations:
- Add role = "dialog", aria-modal = "true", and tabindex = "- 1" on the container of the modal;
- Add a representative name to the modal:
- aria-label="[Window Title] property;
- or aria-labelledby = "title-id" linked to a passage of text identified as the title.
Also, the close button of the modal must be a <button> element with a relevant title.
Keyboard behaviors
To understand better the way in which an accessible modal works, you should know the following:
- when opening the modal window, the focus goes on its first focusable element (it could be an input, a link or some other element, or even the modal window itself);
- the focus moves only between the tabular elements of the modal window, it never traverses the contents in the background;
- the Esc key closes the modal window;
- when closing the modal, the focus is returned to the element in the content that opened the modal.
14 Conclusion
From our experience with web accessibility, we can say that it is a difficult concept to understand and is often misunderstood. It requires a lot of time to research and read all the necessary information.
On the other hand, it is also difficult to fully implement for every kind of disability. I would strongly recommend you to start implementing accessibility from the beginning and discuss with the graphic designer to provide the right content to easily apply the WCAG standards.
We know how hard it is to browse for all the information, so this article should come in handy in helping you to meet the A and AA levels of conformance.
In conclusion, accessibility is required for websites due to legal requirements and humanitarian reasons. All people must be able to navigate through a website; you cannot limit their access.
In the next article, we will cover more advanced web accessibility topics and provide a short demo to help you increase your level of compliance. If you want to learn more about forms, page titles, visible order vs real order, code validity and accessibility testing tools, stay tuned.
