Designing for Accessibility Heading Styles, Lists and Tables

Headers

Using heading styles (or headers) is very important for users using assistive technologies such as screen readers. A visual reader can quickly scan a page to find text with larger font size or bold style designating specific topics or organizational hierarchy. Without heading styles, a person using a screen reader will not be able to find these important organizational visual cues and the content will be read as one large paragraph. Simply using a larger font size or bold will not work.

Some Words from WebAIM

Pages should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (usually page titles or main content heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).

...

Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Items that are bolded or display in a bigger font are not interpreted to be structural elements.

Likewise, do not use headers to achieve visual results only. For instance, if you want to highlight or emphasize an element within your content that is not a heading (such as I did with the previous sentence), do not use heading elements to achieve the visual appearance you want. Instead, use font size, bold, or italics. Actually, you should use styles to achieve visual results. If you want to emphasize something, you technically should use the <strong> element instead of <bold> and the <em>element instead of <i>. Bold and italics (<i>) both connote visual emphasis, whereas strong and emphasis (<em>) suggest semantic emphasis. Visually, <b> and <strong>, and <em> and <i> look exactly the same and are, unfortunately, generally treated the same (if differentiated at all) in screen readers, but developers should use the more proper HTML elements.

—Semantic Structure - WebAIMLinks to an external site.

Lists

Lists should be created using the bulleted (unordered) or numbered list (ordered) tools and not created by indenting and with icons.

This is an example of a bulleted list.
Canvas has the tools for creating lists such as this.

Tables

Don't use tables for graphical layout, such as when you want two images to appear side by side in two columns.

When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank statement), use headers for rows and columns, which helps explain the relationships of cells.

Complex tables may have several cells within the table that have a unique relationship to each other, and these should be identified by using the "scope" attribute in HTML. The scope attribute identifies whether a cell is a header for a column, row, or group of columns or rows.

Table captions can be used to give additional information to users about how best to read and understand the table relationships.

Creating Accessible Tables in Canvas

Canvas has accessibilty features built-in, which assist you in adding these attributes to tables. Just click the "accessibility check" icon when editing a page.

accessibility check icon in Canvas

In the accessibility checker, you can add a caption to the table which will help describe the table to those using screen readers.

adding an image caption and alt tag using the Canvas accessibility checker window

After each correction, be sure to click the "Apply Fix" button.

The accessibility checker will also allow you to add Header tags to the table. For most tables, you will simply choose to add a "header row."

Screen Shot 2017-11-14 at 8.33.44 PM.png

Adding a "header row" makes the top row the header for the table.

Students' Favorite Things
name	favorite food	favorite TV show
Rob	Chinese	Stranger Things
Mim	Baked potato	Gray's Anatomy

Ocassionally, the first column in a table also needs to be designated as a header. In this case, choose "Row and Column" in the accessibility checker.

Students' Favorite Things
name	favorite food	favorite TV show
Rob	Chinese	Stranger Things
Mim	Baked potato	Gray's Anatomy

Screen Reader Software Demonstration

lower case i designating additional resources Resources

General Accessibility Design Guidelines in Canvas