Author: Nadia Khan

Headings & Structure

Take a quick look at the newspapers in the image below. At a quick glance, even with a small image, you can easily ascertain the title of the newspaper, the titles of articles, and the “lead” story. Newspapers are great examples of the ways formatting text can aid readers.

Headings

Organizing content prevents cognitive overload, providing information in digestible pieces for your students. Headings are valuable in presenting the main points of a section, by providing a logical structure for information, or allowing visitors to skim the contents.

From an accessibility perspective, headings provide individuals using screen readers with a simple method to navigate within a page or a document. A recent WebAIM survey of screen-reader users found that using headings remains the predominant method for finding web page information and that over 80% of respondents found headings very useful or somewhat useful when navigating content. The use of headings allows individuals to move and find information in a more efficient manner.

Heading Styles

Here we see Heading 2, Heading 3, and Heading 4.

Using different heading styles along with changes in the font size can help individuals perceive the content, organize the information into meaningful sections, and understand how the subtopics relate to the main topics, and with one another:

• Heading 1 is the main topic or title of the content
• Heading 2 is used for major subtopics that still relate to the main content
• Heading 3 and Heading 4 (and more) can be used to further refine the related subtopics

If you are consistent in your heading level structure, users can quickly determine based on text size how the major subtopics (e.g., Heading 2 content) relates to their other subtopics (e.g., Heading 3 and Heading 4 content.)

Common Heading Mistakes 

• Skipping heading levels. For Example: Choosing a Heading 3 for the main title, followed by a Heading 1, and then a Heading 4.
• Using the font size, bold, and underline features to create the appearance of a heading instead of programmatically specifying a heading element and then modifying the appearance.

Lists

Lists neatly present related ideas and outlines steps in a process. Bulleted and numbered lists can be used in your documents to format, arrange, and emphasize text. For an individual using assistive technology, such as a screen-reader, the benefit of the list format is that the presence and number of items in that list will be communicated when navigating the content.

Bulleted List 

If your items are a group of equivalent ideas or terms, and the order is not an essential aspect of the concept, use a bulleted list. For example, the following is a list of accessibility practices for electronic documents:

• Organize material into usable sections
• Use styles to mark headings for present visually organized pages
• Integrate meaningful hyperlinks into your text
• Provide alt text for images

Numbered List

If your items are a sequence or a series of steps, use a numbered list. A numbered list is important when there are specific steps the individual is to perform as part of a process. For instance, the following is a numbered list of steps to take to open a web page:

1. Turn on the computer
2. Login to your account
3. Open the web browser
4. Enter the address for the web page you want to visit.

Common List Mistakes

• Creating lists manually using dashes and symbols and not using the list formatting tools
• Creating a list for a single item. Lists should contain at least two or more list items. However, it is appropriate to use singular bullets when using list styles to organize outlines that contain main points and subpoints. 

Color and Accessibility

Color, like images, can add visual appeal to your web pages or documents and draw attention to important information. In order for color to work, however, it needs to be perceivable. Poor color choices can affect individuals who are visually impaired or color blind. 

Contrast 

Having sufficient contrast between the foreground text information and background color is necessary to be able to perceive the information. Text content that is not distinguishable from the background color can prevent not only individuals with visual impairments or low contrast sensitivity from reading the information, but also those trying to view content in sunlight or in glare conditions.

When choosing colors to present text information in web pages or electronic documents, the foreground to background contrast ratio should be a minimum of:

• 4.5:1 for regular text
• 3:1 for 18 point font and larger, or 14 point font and bold

In general, pastel colors or the “light” version of a particular color do not provide sufficient contrast against a white or dark background.

In the following example, the yellow welcome text is superimposed over a aqua colored background representing an ocean wave. The color and thin font used for the text makes it difficult to perceive the information.

Selecting a different font color as well as changing the background of the text can result in a more visually discernible welcome banner.

The contrast ratio is evaluated by comparing the foreground and background color choices. A contrast ratio may be tested using the following tools:

• WebAIM Contrast Checker
• The Paciello Group Color Contrast Analyser

Color & Meaning

Color should not be used as the sole means of providing information. Individuals who are blind, visually impaired, or have certain types of color-blindness may not be able to perceive what information is being communicated by color alone.

For example, the charts below show the reported reasons for inaccessible web page design. Without any additional information, it can be difficult to understand the categories.

However, with inclusion of additional information, along with the use of color, everyone can better understand how the information is organized on the pie chart. 

This inaccessible pie chart lacks labelled data and forces users to rely on interpreting the colors based on the legend. 

This inaccessible pie chart uses greyscale, further reducing the contrast between the slices.

This accessible pie chart provides detailed labels that include the data value and the category name on the chart in conjunction with a legend. 

Tables provide a layout structure to organize and present logical relationships. For example, if you had a list of days, a list of appointments on specific days, and a list of specific times for those appointments on specific days, it would make sense to organize the information in a table structure to clearly and accurately present that information.

Using a table simply as an organizational layout structure is not recommended. Instead, it is better to use CSS tools such as a grid, which also creates a more responsive layout structure for different screen sizes/devices. If you’d like to learn more about how to use a grid in Canvas, see MiraCosta faculty member curry mitchell’s page design course for tips.

Tables and Structure

Data tables require specific structural markup to designate the correct column and row header information. By identifying the appropriate column and row headers programmatically, individuals using assistive technology can then navigate and parse the table information in a logical manner.

Column Headers

For data tables that have only column headers across the top of the table, all that is needed is to specify the first row of the table as the headers. For web pages, this can be done by using the <th> element to identify the appropriate table cell as the header.

Column Example

Header <TH>	Header <TH>	Header <TH>	Header <TH>
Data cell	Data cell	Data cell	Data cell
Data cell	Data cell	Data cell	Data cell
Data cell	Data cell	Data cell	Data cell

Row Headers

For data tables that have only row headers down the first column of the table, all that is needed is to specify the first cell in each row as the header. For web pages, this can be done by using the <th> element to identify the appropriate table cell as the header.

Row Example

Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell

Column and Row Headers

For data tables that have both column and row headers, it is necessary to identify both the column and row header cells. For web pages, additional markup is necessary to programmatically define which cells are considered to be header cells for the entire table. This is accomplished by using the scope attribute in conjunction with the <th> elements to define the table headers.

Header <TH>	Header <TH>	Header <TH>	Header <TH>
Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell
Header <TH>	Data cell	Data cell	Data cell