/
How to Create Accessible Websites

How to Create Accessible Websites

Owned by Stuti Desai
Jul 16, 2024

This article is intended for students, faculty, and staff who are interested in making websites accessible.

 

To add a website title navigate to Settings and then General and input your title under the Site Title section. This title will be a heading level 1 on the page.

  • Use structure when selecting headings (not just font size)

  • Typically, there is one heading 1 on the page, but there may be two if there is a heading one at the top of the page

  • Do not start alt text with “picture of“ or “graphic of”

  • Validate auto-generated alt text

  • Include enough information for end user

  • Exclude information found near the image (example: caption below image)

  • Include alt text for images with hyperlink

  • Alt text can vary for same image based on context

  • Graphs/Charts and maps are more complex

  • Ask content creator (person who wants to use the image) to write the alt text)

  • Write link text where it is going, for example IT Accessibility

  • Do not use “click here”, “learn more”, “read more”

  • Do not underline text that is not a link because keyboard users may think it is a link that is inaccessible

  • Use only data for tables

  • Designate top row as the header for each column

  • Add Alt Text to the table

  • Tab through each cell to check for navigation (left to right and down)

Detailed information and steps to ensure adequate color contrast.

  • Screen reader users navigate websites using keyboard only

    • Ensure reading order and navigation is logical

    • Ensure functionality using keyboard only (no traps)

    • Skip to Content, Skip to Search, etc is available

  • Screen reader users can navigate websites by tabbing link to link

    • Ensure links are meaningful

  • Ensure videos are shared from a video platform such as Kaltura or Youtube

    • If not, then captions must be burned into the video (open captions)

  • Edit and validate any auto generated captions

Ensure all files on the website are accessible for screen reader users.

  • Wave by WebAim

    • Browser extention

    • Displays code for webpage

  • Sa11y

    • Bookmarklet

    • Has Color Filter to simulate color blindness

  • Blackboard Ally

    • Scans weekly and offers a score for the site

    • Also found in HuskyCT Courses and Organizations