Web Content Accessibility Guidelines (WCAG) Tutorial - A and AA compliance levels

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:

Web accessibility takes into account all disabilities that affect access to the web: 

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: 

The suggestions from this article generally refer to levels A and AA compliance.

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.

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"). 

1. <!-- Decorative image - <img>  -->
2. <img src="image.jpg" alt="" class="image-class">
3.  
4. <!-- Decorative image - <svg>  -->
5. <svg aria-hidden="true"></svg>

2.2 Informational images

• set a role = "img" attribute and an aria-label = "[information conveyed]"; 
• contain a <title> tag with the same value as the aria-label attribute.

1. <!-- Informational image - <img> -->
2. <img class="informational-image-class" src="image.png" alt="Informational conveyed">
3.  
4. <!-- Information image - <svg> -->
5. <svg role="img" aria-label="Informational conveyed">
6.   <title> Information conveyed </title>
7. </svg>

3.Contrast

1. http://colorsafe.co/
2. https://contrast-ratio.com/
3. https://contrast-finder.tanaguru.com/

4. Tables

• 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.

• 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>.

5.Links

5.1 Picture Links

• 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

5.3 Empty links

5.4 Title of links

• the same title as the link title;
• the title voids.

6 Multilingual content

1. <p lang="en">Go to the next lesson</p>
2. <p lang="ro">Mergi la urmatoarea lectie</p>
3. <p lang="fr">Aller à la suivant leçon</p>

Code 6: Lang attribute

<p lang="ar" dir="rtl">انتقل إلى الدرس التالي</p>

7. Structuring information:

7.1 Headings

• 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.

7.2 Document structure (tags & roles)

• the main header;
• the main content;
• the main and any secondary navigation;
• the footer;
• the search engine;

• 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"

• 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.

7.3 Citations

1. <blockquote> "I was within and without, simultaneously enchanted and repelled by the inexhaustible variety of life"
2.   <cite>Fitzgerald F. Scott, The Great Gatsby</cite>
3. </blockquote>

8 Presentation of information

8.1 Using CSS exclusively

8.2 Making content visible without stylesheets

1. <div class="c-v__thumbnail" style="background-image:url('')">
2.   <div class="c-locked-icon"></div>
3. </div>

8.3 Enlarging text size (fixed units)

• set text size in relative units;
• avoid setting box sizes in fixed units;
• use certain CSS properties with caution.

1. <!-- Recommended -->
2. .class {
3.   min-height:50px;
4. }

Bad practice

1. <!-- Not Recommended -->
2. .class {
3.   height:50px;
4. }

9.  Forms

• have relevant labels;
• use a consistent method to link the fields to their respective labels;
• keep a simple and clear structure.

1. <label for="name">Name</label>
2. <input type="type" id="name"/>

This implementation is really helpful for a checkbox because by clicking on the label, the checkbox get checked.

1. <label for="yes">Yes</label>
2. <input type="radio" id="yes" value="item1" name="items"/>
3. <label for="no">No</label>
4. <input type="radio" id="no" value="item2" name="items"/>

1. <label>Yes
2. <input type="radio" value="item1" name="items"/>
3. </label>
4. <label>No
5. <input type="radio" value="item2" name="items"/>
6. </label>

• a label (e.g. <label>E-mail (required)</label>);
• an asterisk (*).

• 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

• not all users navigate in the same way;
• some navigation systems may be too complex to use, especially for people using assistive technologies.

• a main navigation menu;
• a site map;
• a search engine.

10.2 Fast access links

• 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).

1. <!--   Hidden fast access links visible to focus capture -->
2. a {
3.   position: absolute;
4.   top: -10000px;
5.   &:focus {
6.     top: 0;
7.   }
8. }
9.  
10. <!--   Fast access links always visible -->
11. a {
12.   position: static;
13.   top: -10000px;
14. }

Bad Practice

1. <!--   Hidden and inaccessible fast access links -->
2. a {
3.   display: none;
4.   &:focus {
5.     display: block;
6.   }
7. }

Code 15: Fast access links

• 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

• 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.

1. It’s better to avoid any value greater than 0.
2. Use -1 to move the focus to elements that have their focus set using scripts.
3. Use 0 only for elements that are not natively interactive.

1. <a href="#">Link</a>
2. <button>Press me</button>
3. <div tabindex="0"> I receive focus</div>
4. <span tabindex="0">I also receive focus</span>
5. <div tabindex="-1">I receive focus from J</div>
6. <a href="#">Another link</a>

Bad Practice

1. <a href="#" tabindex="0">Link</a>
2. <button tabindex="1">Button</button>
3. <ul>
4.   <li><a href="#" tabindex="2">Link inside list</a></li>
5.   <li><a href="#" tabindex="3">Link inside list</a></li>
6.   <li><a href="#" tabindex="4">Link inside list</a></li>
7. </ul>
8. <div tabindex="0"></div>

Code 16: Tab order

• 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.

1. <!--   Hidden state -->
2.   <button aria-expanded="false" aria-controls="example-good">Press me</button>
3.   <div id="example-good" style="display: none;"></div>
4. <!--   Status displayed -->
5.   <button aria-expanded="true" aria-controls="example-good">Press me</button>
6.   <div id="zone" style="display: block;"></div>

Bad Practice

1. <!--   Hidden state -->
2.   <button role="button" class="toggle-me" aria-label="Toggle content"></button>
3.   <div id="bad-example" style="display: none;"></div>
4. <!--   Status displayed -->
5.    <button role="button" class="toggle-me" aria-label="Toggle content"></button>
6.    <div id="bad-example" style="display: block;"></div>

12. Carousels

• 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);

• Basic
• Tabbed
• Grouped

• 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.

1. <section class="carousel"
2.         aria-label="Image example">
3.   <div class="carousel-inner">
4.     <div class="controls">
5.       <span class="next-slide"
6.            aria-label="Next slide">Next</span>
7.       <span class="previous-slide"
8.            aria-label="Previous slide">Prev</span>
9.     </div>
10.     <div class="carousel-items">
11.       <div class="carousel-items"
12.           aria-label="Carousel item">
13.         <img src="" alt="Carousel image">
14.       </div>
15.         <!-- Next carousel slides -->
16.     </div>
17.   </div>
18. </section>

Code 18: Carousel

13. Modal windows

• 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.

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