Skip to Main Content
A-Z Index
Cascade CMS
oneColumn

Website Accessibility

Our goal is to promote an ADA accessible web environment for our users to help ensure that as broad a population as possible may access and benefit from our services.

Review the policy

Quick Reference

These tips are meant to help web developers get a quick start. They address the most important considerations for web page accessibility.

  • Make sure images have appropriate and informative descriptions (alt tag).
  • Provide a transcript for all video and audio content.
  • Document should have only one H1.
  • Don’t skip downward heading levels.
  • H1 should always be followed by H2 and H2 by H3 within a section.
  • Avoid using "click here" or "email me."
  • Use bold or italic text to display emphasis.
  • Don’t underline words since this indicates hyperlinks.
  • Avoid using colored text for emphasis
  • Avoid writing whole sentences in CAPITAL letters.
  • Include meaningful alternative text (120-140 characters)
  • Limit the size and number of graphics

 

 

What is WCAG 2.1?

The Web Content Accessibility Guidelines (WCAG) are a set of guidelines that specify how to make content accessible. It was created by the World Wide Web Consortium (W3C), an international community that develops open standards to ensure the long-term growth of the Web.

Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.

 

Web Content Accessibility Guidelines (WCAG) 2.1

 

Anyone who wants to use the Web must have content that is:

  1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
  2. Operable - User interface components and navigation must be operable.
  3. Understandable - Information and the operation of user interface must be understandable.
  4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Testing at UNF

For web content published by the University of North Florida, it is our goal to comply with WCAG level A & AA success criteria.

The following tools are used to test and audit web content at UNF:

Document Compliance

UNF ADA office

Headings

A proper hierachy allows assistive technologies to quickly identify the headings on the page. Without heading markup, users of screen readers are not able to skip through content and navigate the page effectively. 

Heading level order and arrangement

Well-designed web pages will form an outline of the page’s content.

Higher numbers indicate subsections. Taken together, the headings should form a well-structured hierarchy. For example:

  • Heading 1
    • Heading 2
      • Heading 3
      • Heading 3
    • Heading 2
      • Heading 3
        • Heading 4
        • Heading 4

Best practices

  • Check for at least one heading 1 on every page.
  • Any text that looks like a heading should be marked appropriately. 
  • Begin every page section or topic with a heading.
  • Verify that all text marked up as HTML headings serves a proper function and are not simply used for appearance.
  • Arrange the heading hierarchy in a meaningful order:
    • Headings should not skip levels.
    • Each heading level should correctly indicate its relationship to other sections.

Image Alts

  • Alt text - Describe your images
  • No images of text: All text must be readable by a screen reader
  • Avoid graphics/images with text

Example

  • DON’T say “beach 1”
  • DO say “Two palm trees overlooking a pink and orange sunset” (51 characters)​
  • DO keep it to 99 characters or less
 Setting sun in a purple and pink sky with palm trees

Multimedia

  • Closed captioning - All videos on your website must have closed captioning
  • Text transcripts - Add a text transcript beneath all video-only and audio-only files​
  • iFrame – Provide a title
    • <iframe> width="560" height="314" allowfullscreen="allowfullscreen" src="//www.youtube.com/embed/20SHvU2PKsM" title="Introduction to Web Accessibility"</iframe>​
  • Need to be able to navigate using keyboard and screen reader​
  • User should have the ability to pause, stop and hide pop-ups, scrolling and blinking content

Links

Be obvious in linking to or setting up content so that users know what to expect.

  • Link text must describe what the user will see when they click on it
  • It should be descriptive and clear
  • Link text should be unique

Color Contrast

  • Color Ratio - All font should sharply contrast from its background color​
  • Too little contrast makes it very hard for people to read​
  • The font should contrast from the background by at least 4.5:1 for normal text and 3:1 for larger text.​
  • Rules apply to graphics such as banners, infographics, charts and text heavy images.

Yellow square with osprey and color contrast to show bad example