People don’t read webpages – they scan them, looking for relevant headings, words or phrases. To help users find what they’re looking for, create a clear visual hierarchy, ensure readability, and utilize tables correctly.

Create a clear visual hierarchy

Headings and subheadings break up a webpage into sections of information (Kent State University, n.d.). They help users, screen readers and search engines determine the overall outline of a document.

Headings are classified into levels (Web Accessibility Initiative, n.d.). The most important heading is level 1 (<h1>) and the least important heading is level 6 (<h6>). The heading level helps determine the information’s importance (Web Accessibility Initiative, n.d.).

Tips:

• Heading level 1 should only be used for the page title (Kent State University, n.d.). Depending on your website’s setup, that may already be in place.
• Headings must be nested properly. Second-level headings can be used to indicate new sections. Heading levels 3-6 can be used to organize the content further. See the correct use of headings on Kent State’s Accessibility Examples webpage.
• Do not skip heading levels on your page, as it can be confusing and should be avoided where possible.
• Headings are for structural purposes only. Do not use them to make text larger. This won’t help screen readers or search engines as they do not rely on visual cues to find information.

Ensure readability

By utilizing lists, reducing visual noise, and ensuring comprehension, it will be much easier for people to find the information they’re looking for.

Utilize lists

Group related items together with lists. Lists help break up text into smaller chunks, and they make the page easier to read.

Unordered lists (marked with a bullet) are used when the order of items is not important. Ordered lists are used for sequential information and can be marked with numbers, letters or roman numerals. Lists can also be nested, see the Web Accessibility Tutorials: Content Structure webpage for examples.

Reduce visual noise

Visual noise happens when centered text, all-capital letters, italics, and underlined text are used too often.

Tips:

• Use centered text sparingly and only for headlines or short lines of text. Too much centered text adds to eye strain. The brain also has a harder time processing information presented this way, especially for people with cognitive or learning disabilities.
• Italicized and all uppercase text are difficult for users to read. When used too much, it makes it harder for users to understand what information is truly important on a page.

Ensure comprehension

Once visual noise has been reduced, the next step is to ensure that people can understand the information. Sentence length, paragraph length, and complexity of language all contribute to how readable the text is (Lambert, 2018).

Tips:

• Break up lengthy sections of text into smaller chunks.
• Ensure each paragraph of content focuses on a single idea. A paragraph with a single idea is easier to remember and digest. The same is true of a sentence with fewer words (Lambert, 2018).
• Write in plain and simple language where applicable. Limit the use of jargon and branded terms.

Tables

Data tables are used to organize data with a logical relationship in grids (Web Accessibility Initiative, n.d.). Tables can have headers (which are similar to headings), columns & rows, and data cells. See examples of data tables on the Purdue University College of Science Business Office Directory page.

The experience of understanding tabular data is different for sighted users vs. people using screen readers. When sighted users focus on a data cell, they are able to visually determine what the data means. People using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated headers, so the reader doesn’t lose context (Web Accessibility Initiative, n.d.).

Tips:

• Do not use tables for page or content layout.
• Tables need a table caption, which provides a meaningful title for the table. It also properly marks when the user reaches a table on the webpage (Kent State University, n.d.).
• Tables must have at least one header row or column. Headers make the table easier to understand by grouping relevant data together, and help people using screen readers identify where they are in the table (Kent State University, n.d.).
• Do not merge table cells.
• If a table becomes too complex or has multiple sections, split the information into several smaller data tables. Examples:
  • The Kent State University: Accessibility Tables webpage shows correct and incorrect use of tables.
  • The Penn State Accessibility: Tables webpage shows simple and complex data tables.

References:

1. Kent State University. (n.d.) Accessibility examples (correct and incorrect use). Retrieved March 18, 2019, from https://www.kent.edu/web-standards/accessibility-examples-correct-and-incorrect-use.
2. Web Accessibility Initiative. (n.d.) Content structure. Retrieved March 18, 2019, from https://www.w3.org/WAI/tutorials/page-structure/content/.
3. Web Accessibility Initiative. (n.d.) Headings. Retrieved March 18, 2019, https://www.w3.org/WAI/tutorials/page-structure/headings/.
4. Lambert, S. (2018, April 9). Designing for Accessibility and Inclusion. Smashing Magazine. https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/.
5. Penn State. (n.d.) Tables. Retrieved March 18, 2019, from https://accessibility.psu.edu/tables/.
6. Web Accessibility Initiative. (n.d.) Tables Tutorial. Retrieved March 18, 2019, from https://www.w3.org/WAI/tutorials/tables/.