Creating and Maintaining Accessible Web Content

Elon University is committed to ensuring that our web environment is accessible to everyone, regardless of their capabilities. While Elon designers and developers have worked to make sure our web platforms are accessible, these systems merely provide a good foundation for accessibility. Content editors play a key role in keeping Elon’s websites accessible.

This article introduces some basic considerations to help you get started writing web content that is accessible. Below you will find tips and examples of how to insert content in a way to help with user experience and to make sure your web page complies with accessibility standards. For more detailed information, check out the NCDAE Principles of Accessible Design and the Web Content Accessibility Guidelines.

Accessibility Tips

Do...

• Use descriptive text for links.
  • Incorrect Example: Click here for an example of accessibility concepts. vs. Correct Example: View an example of accessibility concepts.
• Images that provide information or are links must have alternative text.
• Use headings correctly. 
  • Headings should be used hierarchically throughout the page, beginning with Heading 1 (H1).
  • Heading 1 (H1) should be used only once on the page
  • Below is an example of headings used correctly:
    • Heading 1
      • Heading 2
        • Heading 3
        • Heading 3
          • Heading4
        • Heading 3
      • Heading 2
        • Heading 3
  • Platform-specific notes:
    • WordPress: If you are editing a webpage on Elon's WordPress system, note that the page title is already utilizing an H1, so start your content hierarchy using a Heading 2 (H2).
    • Moodle: When editing in Moodle, heading options are simply listed as Heading (large), Heading (medium), and Heading (small). Start your content hierarchy using the Heading (large).
• Include captions and/or transcripts for videos and audio recordings

Do not...

• Do not use all caps, underlining, highlighting, or colored text.
• Do not use images with large amounts of text.
• Do not skip headings (eg. do not use Heading 2 and then Heading 4, skipping Heading 3).
• Do not use headings to add emphasis, list steps of a procedure, etc.
• Do not rely solely on automated captions. Automated captions are a great start but are never 100% accurate. 
• Avoid describing things by their color or by their position on the page (e.g., do not say, "Click the red button"). 
• Do not rely solely on color to emphasize text 

Example Heading (Heading 2)

This example assumes that the Heading 1 (H1) has already been utilized as the page title. 

Example Sub Heading (Heading 3)

The sub heading above should only be used if this information lives under the Heading 2 heading above it.

Example Second Sub Heading (Heading 3)

The sub heading above should only be used if this information lives under the Heading 2 heading above it.

Example Second Heading (Heading 2)

This heading denotes equal importance to the other Heading 2 section above.