---
title: "How to Create Accessible Websites"
canonical: "https://kb.uconn.edu/space/IKB/27003191373/How%20to%20Create%20Accessible%20Websites"
format: markdown
---
This article is intended for students, faculty, and staff who are interested in making websites accessible.


<details>
<summary>Website and Page Titles are meaningful and descriptive</summary>

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.
</details>

<details>
<summary>Use proper Header Structure (H1, H2, H3, etc)</summary>

- 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
</details>

<details>
<summary>Alternative (Alt) Text for images and tables</summary>

- 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)
</details>

<details>
<summary>Descriptive Hyperlinks</summary>

- Write link text where it is going, for example [IT Accessibility](https://accessibility.its.uconn.edu/)
- 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
</details>

<details>
<summary>Use True Tables with Headers</summary>

- 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)
</details>

<details>
<summary>Adequate color contrast</summary>

<u>[Detailed information and steps](https://uconn.atlassian.net/wiki/pages/resumedraft.action?draftId=26989166615&draftShareId=e2bd18f0-247f-428f-994e-558c1f20d030)</u> to ensure adequate color contrast.
</details>

<details>
<summary>Reading and navigation order is logical</summary>

- 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
</details>

<details>
<summary>Captions and/or transcripts are available for videos </summary>

- 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
</details>

<details>
<summary>Ensure files are accessible (PDF, Word, PPTs, etc)</summary>

Ensure all files on the website are accessible for screen reader users.
</details>

<details>
<summary>Check accessibility using tools available</summary>

- [Wave](https://wave.webaim.org/) by WebAim
  - Browser extention
  - Displays code for webpage
- [Sa11y ](https://sa11y.netlify.app/)
  - Bookmarklet
  - Has Color Filter to simulate color blindness
- [Blackboard Ally](https://ally.ac/)
  - Scans weekly and offers a score for the site
  - Also found in HuskyCT Courses and Organizations
</details>