Header Structure for Accessibility

General Rules

  • Each major section of content should be represented by a heading. You may have seen the HTML code looks like:

    ,

    ,

    ,

    etc.

  • The heading levels should form a logical hierarchical outline of the content on the page.
  • Headings should NOT skip levels. A child element of a heading level 2 should be a heading level 3, for example, not a heading level 5.
  • Don't use headings for their design. For example, If you are after a red title, don't use header 3 unless it fits the content structure to do so.
  • There MUST be only one heading level 1

    In Cascade, this is the Page Title.

Cascade Inline MetaData for Page Title

 screenshot of cascade interface showing display name and page title

Display Name in Cascade acts as  the text used in the navigation bar.

Page Title in Cascade acts web browser page title and as the first herader

on the page itself.

Adding Header Structure

Within content, Cascade's wysiwyg offers and easy way to insert headers. Place your cursor in the text that is your header and apply the appropriate header from the Formats dropdown menu.

 screenshot of cascade showing header format menu

Good Example: Real Headings

The headings in this example are marked with true heading elements (

,

)

Begin code:
   

Civil Rights Laws


     

SubLaws


   

Procurement Laws

Bad Example: Fake Headings Using Styles

500 Internal Server Error

Internal Server Error

The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

"Setting fake header"

Begin code:

 
  Setting the Exposure Manually on a Camera