ADA - Page Structure and Headings

Care needs to be taken in the structure of your pages and the styling of the text on them to help visitors find the information that they are looking for. By using the proper headings, paragraph breaks and the styling of the text you can make it easier for all that visit your site. 

ADA Review Checklist

1. How are the headings styled?
   There should only one use of the H1 header style and that should be applied to the primary heading at the top of your page. Any headers below that should be H2 or smaller depending on how the text is structured and the importance of that section. It is best practice to use the headings in order with none of them being skipped. So if you have used an H4, then you should have first used H1, H2, and H3.
   
   
2. Is the page structured correctly?
   The structure is also considered when reviewing a page for ADA compliance. Several things you can quickly check while reviewing a page are listed below:
   • Is the text broken into paragraphs?
     The use of paragraphs makes the text more readable and provides more natural reading breaks for screen readers.
   • Are there any sets of simple instructions or lists?
     If there any sets of simple instructions or lists, you should use an ordered or unordered list instead of manually entering a bullet or number. The use of an ordered or unordered list makes it easier to display the steps to assistive technology.
   • Is any text underlined that is NOT a link?
     Underlining text on a web page should be illegal. If the text is not a link, DO NOT apply the underline style. It adds confusion to both readers... and even regular browser users. Links are the only items on a page that should have an underline so they more visually stand out.
   • Is there any text that is using the strikethru style (a line through the middle of it)?
     If so, it is best to remove this text since it does not add any value to users.
     
     

• Please review the following articles for more information on page structure and headings.
  • ADA - Color Usage
  • Formatting Content

Additional Information

Page Structure

• Is your web site navigable using the keyboard? Your web site can’t be wholly dependent on a mouse. Having to hover over something, and then click on it is non-compliant. There has to be keyboard navigation available for anything textual. That includes navigation. You cannot disable built-in operating system accessibility options, so you also shouldn’t be able to disable it on a website. A clear navigation focus has to be provided at all times.
• The first link on the page should take you to content, can be hidden, but needs to be available when tabbed to (or focused).
• Sections - Banded pages are laid out in a manner defining the various bands or sections utilizing the html5 section attribute

Headings

• h1 tags are managed on CMS generated pages in the breadcrumb section of the header. No other h1 headings should exist on a page.

• When utilizing layout templates, the larger area of the template should typically use h2 class="subheader" or h3 class="subheader". The sidebar (or smaller) area should utilize h4 class="subheader" or h5 class="subheader". All of these styles are located in the styles dropdown of the editor toolbar.

• Under no circumstance should headings be used for multiple line content areas. We understand some headings may wrap to a new line, use p tags to wrap copy.

Content Structure

ALL text should be organized and perfectly readable when it’s stripped of CSS. Aside from Headings, there are ways to structure HTML content.

• Paragraphs: Automatically added by the WYSIWYG editor, this provides consistent styling line to line. Separate content by a normal return instead of a soft break (shift+return). Do not be afraid of white space, this makes the text more readable and provides much more natural reading breaks for screen readers.

• Lists: If you have a simple set of instructions or grouped content utilize the Ordered <ol> or Unordered lists <ul> available to you. 

  • Ordered Lists: If the content has instructions or information performed in sequence. Typically a numbered list

  • Unordered List: Order does not matter and is marked with a bullet.

  • Nested Lists: A nested list provides information that is easy to digest information and can easily display necessary steps to assistive technology. This list is an example of a nested unordered list.

• Quotes: For longer quotes, you wish to highlight, utilize the blockquote element. It may contain paragraphs, headings, and other text structure elements. For shorter or inline quotes use simple double quotes around your content

• Styling: Accepted styles have been added to the Text widget editor in the styles and markup drop-down menus inside of the editor. New styles may be added and old styles may be retired as the specification matures.

• Underline: The underline tag is archaic and you should avoid using it. Underline suggests a clickable link. If the text is not a link, DO NOT underline it using the editor button (next to bold and italics). Textual links should ALWAYS be underlined or stand out in a high-contrast way.

• Strikethru: Striking out content provides no value to users. Simply remove the content you intend to strike and update the page accordingly.