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.


Customer-facing vs. private/back-end: Anything that will be available to the public.


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 hard 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 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 Campus Suite WYSIWYG 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 u 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.

  • Strike:

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




Additional Articles 

  • Keyboard Navigation in Mac Browsers - An article that reviews how to set up tab key navigation on a Mac using the system preferences and the settings in various applications.