Best Practice 1: Section Heading
Overview
Section headings are important as it describes the content that follows; much like a chapter of a book or a news headline. Developers and designers should implement the proper section headings in their web project because these help people easily jump to the content they want to see. Assistive technologies like screen readers also use it to jump from one section to another. It also helps people with learning disabilities understand the overall organization of the page content.
Implementing it properly helps screen readers to easily navigate sections as well as identifying the purpose or content of that section. Section headings must use appropriate heading tags since screen readers and assistive technologies rely on heading tags (<h1> to <h6>) to identify them. Text that is merely large, bold, or emphasized is not interpreted as a heading unless the <h1> to <h6>markup is used.
Examples
- A menu contains different sections for different courses. Each section has a heading: Appetizers, Salad, Soup, Entree, Dessert.
- A web application contains a settings page that is divided into groups of related settings. Each section contains a heading describing the class of settings.
Notes
- Use headings only when they represent the following content. A page should only have one <h1>.
- It is important to not skip heading tags like <h3> to <h6> just because <h6> is visually smaller than <h4>, since people who use screen readers might get confused on the sudden jump. It is better to use the next heading and apply CSS styles to it to achieve the same visual style.
- To highlight or emphasize text that is not a heading, use styles—not heading tags—to achieve visual results.
- Using tools like WAVE or AXE will help you check the hierarchy of your section headings.
More Information
https://www.w3.org/WAI/WCAG21/Understanding/section-headings
Best Practice 2: Error Identification
Overview
Implementing error identification on web forms helps users keep track of an error that has occurred upon form submission. Visual cues are such as highlighted fields, colored borders, messages with a different color that indicates an error message, and applying focus on the particular field could help the user easily identify things that they have missed. Screen reader users, for example, will not know there was an error until they encounter one of the indicators. Without these cues, users might think that your website does not work and abandon filling up the form. Per the definition in WCAG 2.0, an “input error” is information provided by the user that is not accepted. This includes:
- Information that is required by the web page but omitted by the user, or
- Information that is provided by the user but that falls outside the required data format or allowed values.
Here are some examples of the scenarios mentioned above:
- The user fails to enter the proper abbreviation in to state, province, region, etc. field;
- The user enters a state abbreviation that is not a valid state;
- The user enters a non existent zip or postal code;
- The user enters a birth date 2 years in the future;
- The user enters alphabetic characters or parentheses into their phone number field that only accepts numbers;
- The user enters a bid that is below the previous bid or the minimum bid increment.
Examples
Identifying errors in a form submission
An airline Web site offers a special promotion on discounted flights. The user is asked to complete a simple form that asks for personal information such as name, address, phone number, seating preference and e-mail address. If any of the fields of the form are either not completed or completed incorrectly, an alert is displayed notifying the user which field or fields were missing or incorrect.
Providing multiple cues
The user fails to fill in two fields on the form. In addition to describing the error and providing a unique character to make it easy to search for the fields, the fields are highlighted in yellow to make it easier to visually search for them as well.
Notes
- Providing information about input errors in text allows users who are blind or colorblind to perceive the fact that an error occurred. (e.g using a legend will help a user understand that an asterisk(*) beside the field label is required.) – This may help people with cognitive, language, and learning disabilities who have difficulty understanding the meaning represented by icons and other visual cues.
- ARIA-INVALID can be programmatically enabled to indicate errors on the field upon form submission; this will help assistive technologies such as JAWS, NVDA, and Safari Voiceover to notify errors to the user.
Best Practice 3: Link Purpose
Overview
Creating meaningful links will help your users understand the purpose of each link so they can decide whether they want to follow the link. It is recommended to provide the link text that identifies the purpose of the link without additional contexts; it should still make sense when read out of context. Link texts such as read more, click here, learn more, and others can be quite confusing to the user when it is read out of context.
Assistive technologies have the ability to provide their users with a list of links that are present on the website. Now, imagine if most of your links are ‘click here’, ‘view more’, and the like; a user using these technologies might not have a good experience as it will not help those who wish to tab from link to link. Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.
Benefits
- This helps people with motion impairment by letting them skip links that they are not interested in, avoiding the keystrokes needed to visit the referenced content and then returning to the current content.
- People with cognitive limitations will not become disoriented by multiple means of navigation to and from content they are not interested in.
- People with visual disabilities will be able to determine the purpose of a link by exploring the link’s context.
Examples
A link contains text that gives a description of the information at that URI
A link is preceded by a text description of the information at that URI
Book titles
Both an icon and text are included in the same link
News article summaries
A web page contains a collection of news articles. The main page lists the first few sentences of each article, followed by a “Read more” link. A screen reader command to read the current paragraph provides the context to interpret the purpose of the link.
This example describes a news site that has a series of short synopsis of stories followed by a link that says “full story”. Hidden link text describes the purpose of the link.
Code Snippet
<p>Washington has announced plans to stimulate economic growth.
<a href=”#”>
<span class=”visually-hidden”> Washington stimulates economic growth </span>
Full Story
</a>
</p> This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say “HTML” and “PDF.” Hidden text describes the purpose of each link. The span element with a visually-hidden tag will be hidden to regular users but the screen reader users will hear this text.
Code Snippet
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href=”winnie_the_pooh.html”>
<span class=”visually-hidden”>Winnie the Pooh </span>HTML</a></dd>
<dd><a href=”winnie_the_pooh.pdf”>
<span class=”visually-hidden”>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href=”war_and_peace.html”>
<span class=”visually-hidden”>War and Peace </span>HTML</a></dd>
<dd><a href=”war_and_peace.pdf”>
<span class=”visually-hidden”>War and Peace </span>PDF</a></dd>
</dl> This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as: “Read more …Storms hit east coast” and will display that same text in the links list which is very useful for screen reader users who may browse by links.
Code Snippet
<h2 id=”headline”>Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id=”p123″ href=”news.html” aria-labelledby=”p123 headline”>Read more…</a></p> Notes
Using CSS to hide a portion of the link text is helpful when you use images/icons as links such as logos, social media icons, etc. This is also helpful when you cannot avoid link texts that do not usually make sense on its own. We could also use ARIA-LABELLEDBY to give the link a meaningful text.