When accessibility is done right, websites can be one of the most accessible and user-friendly forms of digital communication. For the best results, include accessibility practices at every stage of coding, creating, reviewing, and updating your web content.
Accessible website resources
UTHealth Houston resources
- Submit a support request to UTHealth Houston web services for web accessibility support
- Web accessibility tools
- Web application accessibility review
External resources
-
Include text alternatives for images
Images on a webpage should always have a text description of the image. This text–commonly called alt text–helps people who use screen readers or other assistive technologies understand visual content they cannot see. The alt text is not displayed visually but will be announced by assistive technology.
Images that are purely for design purposes and do not add meaningful information should be marked as decorative. This prevents assistive technologies from reading unnecessary descriptions and allows users to focus on the content that matters.
-
Organize content with headings
Group sections of related text using headings. Headings help organize information whether a web visitor is reading the content visually or using assistive technology.
Headings should be presented in a logical order that matches the structure of the page. Typically, text that describes the overall page should be a level 1 heading, text that introduces main sub-categories should be level 2 headings, and so on.
-
Use clear link language
When you include links, write link text that clearly states where the link will go.
Avoid general link names like “Click here” or “Read more.” Instead, write descriptive link names that clearly communicate the purpose. One helpful strategy is to use the same name of the link’s destination page as the displayed link text.
-
Measure color contrast
Choose colors that stand out well from their background.
If you are unsure if the contrast between the element (e.g., text, icons, data visuals) and the background is high enough, use a contrast-checker. Many content management systems, web browsers, and design programs have built-in tools to verify that your color choices meet accessibility standards.
-
Color contrast minimums
- Text: 4.5:1
- Icons and graphics: 3:1
Use contrast-checking tools, such as the WebAIM contrast checker, to evaluate color contrast ratios.
-
Write in plain language
Writing your web content in clear, straightforward language to make information easier for all users to understand, regardless of their background or experience.
-
Write descriptive labels
All interactive elements must have a clear name that is visible on the page and also communicated in the code.
Visible labels can include text or broadly familiar icons, such as a magnifying glass icon that visibly labels a search field.
Non-visible labels are communicated in the code, and must always be descriptive text that is available to assistive technology. If an element has a visible text label, the name in the code must match exactly.
Learn more from the Web Accessibility Initiative's labeling controls tutorial.
-
Code for keyboard navigation
Any functions that you can complete with a mouse must also be possible to navigate and activate by using a keyboard alone. Keyboard accessibility is essential for many users with mobility, vision, or cognitive disabilities.
You can confirm keyboard accessibility through manual testing.
In most cases, the Enter key or Space bar is the standard activation key.
Learn more from the Web Accessibility Initiative’s overview on keyboard navigation.
-
Help users fix errors
Everyone makes mistakes, and good error messages help people fix them more easily.
For example, if a website form can detect a user error, provide an error message that:
- Identifies what caused the error
- Suggests how to correct the error
- Is coded to be automatically announced by assistive technology
Common user errors include incorrect data formats and missing required fields.
Learn more from the Web Accessibility Initiative's user notification tutorial.
-
Measure color contrast
Use colors that have high contrast against their background for meaningful elements like text and graphics.
Use a tool to measure color contrast if you are unsure—these tools compare the foreground color against the background color. Many design software programs include built-in contrast checkers, and you can also use browser extensions or downloadable tools designed specifically for measuring color contrast.
-
Color contrast minimums
- Text: 4.5:1
- Icons and Graphics: 3:1
Use contrast checking tools, such as the WebAIM contrast checker, to evaluate color contrast ratios.
-
Write in plain language
Writing website content in plain language makes your message clearer to everyone.
User story: Keyboard navigation
Garrett is learning about his employee health options on a benefits webpage. Each plan name expands to show the details and cost information. However, each name only expands when it’s clicked with a mouse. Garrett has chronic hand pain, so he uses keyboard navigation to control his computer. He is not able to access the information unless he resorts to an uncomfortable mouse device.
Remove the barrier: Correctly code the widget to work with either a mouse or a keyboard. Garrett uses his keyboard to access the information without additional pain.