The Importance of Lists

Lists are essential elements as they organize elements in a clear manner. Lists provide structure that help users understand the relationship between items/elements.

There are two types of lists in Canvas:

ordered - where sequence, ranking, or order matters
unordered - where sequence, ranking, or order doesn't matter

Unordered & Ordered List Examples

Unordered lists generally use bullets.

Apples
Bananas
Cherries

Ordered lists are presented using numerical or alphabetical values.

Boil water
Brew Coffee
Serve and Enjoy

HTML View of Lists

HTML View of Sample Unordered List

<ul> 
<li>Apples</li> 
<li>Bananas</li> 
<li>Cherries</li> 
</ul>

HTML View of Sample Ordered List

<ol> 
<li>Boil Water</li> 
<li>Brew Coffee</li> 
<li>Serve and Enjoy</li> 
</ol>

Creating Accessible List / HTML

Properly using list tags such as <ol>, <ul>, and <li> adds semantic meaning to the HTML*, which assistive technologies use to interpret the content accurately:

<ol> is used for ordered lists
<ul> is used for unordered lists
<li> is a list element (in either of the lists)

*You do not have to switch from the Rich Content Editor (RCE) to the HTML side. By using the RCE list tool desired list option, the editor will create a proper HTML tag for a list.

Why Lists Are Important for Accessibility

Lists provide a clear structure that helps users understand the hierarchy and relationship between elements. A screen reader typically announces the total number of list elements, and as it reads through each item, it announces the current position (e.g., 'item # of the total'). This way, users with assistive technology always know where they are within the list.

What is a Fake List?

A fake list is a list that looks like a list visually but doesn't use proper HTML list tags. In simpler terms, this means the list was manually typed without using tags like <ul>, <ol>, or <li>. While visual users can see the list, users of assistive technology will not recognize the content as a list. Instead, they will hear each item read individually without the semantic structure, making it harder to understand and navigate.

Avoid manually typing lists or using non-semantic tags, such as <div> or <span>, as this will confuse screen readers.

The Importance of Links

Links/Hyperlinks allow navigation between web pages and are a fundamental piece of the web's functionality. Links facilitate access to content and resources.

Universal Resource Locator (URL)

Links are presented via Universal Resource Locator (URL) and are composed of:

the protocol (https://) and a domain (consisting of a string of letters, characters, and numbers).

Link Types

Raw Links

A raw link is a link where the entire URL is displayed. These types of links can be long, less readable, and not user-friendly.

Raw Link Example

Please go to https://www.examplewebsite.com/folder/subfolder/resource.html?id=123&search=example+query&
category=example-category&sort=ascending&filter=active&user=sampleuser#section2 and read that resource.

Descriptive Links

Descriptive links are links that use a word or a phrase that conveys a link destination. These links are user-friendly and informative, providing clear destination information before the user even accesses the link.

Descriptive Link Example

Please view detailed resources on Example website.

Creating Accessible Link / HTML Link Tag

The HTML <a> tag defines a hyperlink. It has the following syntax <a href="url">link text</a>.

"href" indicates the link's destination, and "link text" is visible to the reader.

Why Links Are Important for Accessibility

Descriptive links ensure accessibility, readability, and usability. They offer a better experience for users, especially those relying on screen readers, by conveying more meaningful context and improving overall navigation. Raw links often disrupt the visual flow of content and are considered non-accessible. When using a raw link, a screen reader reads the entire URL, which can be cumbersome and not informative for users relying on assistive technology.

Avoid using ambiguous phrases such as "click here" or "read more" or "start here," or "click this link," as these do not describe the link's destination.

Resources

Links

WebAIM: Links and Hypertext
Deque's Web Accessibility Checklist: Links

Lists

W3C Content Structure
Deque's Web Accessibility Checklist: Lists