Xavier University
Open search dialog
Website Accessibility

Tips

Xavier University aims to meet or exceed the WCAG 2.0 AA standard for Website Accessibility. More on Xavier's stance can be found on our Website Accessibility web page.

For more information regarding tutorials and decision trees, visit Web Accessibility Tutorials. Please note that this is only one site and one interpretation of the WCAG2.0 rules.

Images

  • Alt tags are automatically loaded as alt="" thanks to the image editor. This satisfies the minimum requirement.
  • Images containing text should ALWAYS contain an alt attribute describing the item.
  • Images that are links should always have an alt attribute describing the image content, NOT the link as that is available elsewhere in the page.
  • Decorative images should maintain an alt=""
    • These include: visual stylings, supplementary to link text to improve appearance; illustration of adjacent text but not contributing information; identified and described by surrounding text.
  • Never use duplicate alternative texts on a page.
  • Additional examples
  • Decision tree

Tables

Tables should only be used to organize data into a logical relationship grid and SHOULD NOT be used to position elements on a web page. Accessible tables need HTML that indicates header cells and data cells and defines their relationship.

To make tables accessible, we have provided examples to outline how they should be used:

Examples of properly formatted tables.

Forms

All forms should be handled by Form Manager and are designed to meet WCAG 2.0 Standards. Forms not managed by Form Manager may not meet this requirement and should be reevaluated with assistances from the Marketing and Communications Web Team.

When forms are created using Form Manager, please make sure every item (text box, select menu, etc) has a title/label.

Carousels (deprecated)

Carousels are no longer part of the Cascade implementation and should not be used.

Page Structure

Page Sections

  • Pages are laid out in a manner defining the various sections utilizing the html5 section attribute.
  • CMS pages are also defined using role="main" for the main content accessible by the WYSIWIG editor.

Headings

  • h1 tags are managed on CMS generated pages. No other h1 headings should exist on a page.
  • When utilizing layout templates, use the Formats dropdown to select other heading sizes. The first heading should start as an h2, and should follow a logical pattern down, e.g.
    • Heading 2
      • Content Pertaining to Heading 2
      • Heading 3, if subsection is a part of the above heading
        • Content pertaining to Heading 3
    • Heading 2, starting a new content grouping
    • etc.
  • Headings should not be used solely to dictate font sizing.

Content Structure

Aside from Headings, there are many ways to structure HTML content

  • Paragraphs: Automatically added by the WYSIWIG 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 whitespace, 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. We've also provided a footer element for attaching the quote's author. This item is available through the editor toolbar.
    • For shorter or inline quotes use the q tag or just simple double quotes around your content

Blockquote Example

Blockquote Code example

<blockquote>
  <P&Gt;I am a blockquote, I can be added to your content using the double quote button in the editor.</P&Gt;
  <footer>Blockquote Author</footer>
</blockquote>

Display example

I am a blockquote, I can be added to your content using the double quote button in the editor.
Blockquote Author
  • Styling: Accepted styles have been added to the CMS WYSIWIG editor in the styles and markup dropdowns inside of the editor. New styles may be added and old styles may be retired as the site develops. All styles are supplied by Marketing and Communications to follow the Xavier Brand.
  • Underline:
    • If the text is not a link, DO NOT underline it using the editor button (next to bold and italics). Instead, use the styles dropdown to underline your text.
    • Text links should ALWAYS be underlined.
  • Strike:
    • Striking out content provides no value to users. Simply remove the content you intend to strike and update the page accordingly.