Accessibility: Quick tips For Content Editors
Below you can find detailed instructions on how to incorporate accessibility into the creation of web pages.
Heading Level Order And Arrangement
Section headings with large or bold text can help visual users quickly scan and understand web pages for efficiency. Without heading markup, users of assistive technologies are not able to skip through irrelevant content and navigate the page effectively. Some users will have to wade line by line through a web page with missing or improper section headings. Avoid skipping to heading levels (e.g. do not skip from H1-H4). Do not use bold to stand in for a heading. Plan heading structure before you write your page.
Readability
Simplifying the reading level of content is an easy way to help users with cognitive disabilities. While writing for the web, aim for no more than 80 words per paragraph.
Alternative Text On Images
Individuals with visual disabilities or other cognitive impairments use text alternatives to understand images. Alternative text should be succinct. If the image is purely decorative and doesn't enhance the user's understanding of the content on the page, put a blank space in the alt text field so screen readers will ignore it. If the image serves as a destination, describe the function for the alternative text. For example, an image of a magnification icon should be labeled "search" instead of "magnifying glass."
Color Contrast
Poor color contrast inhibits users with visual impairments unable to distinguish visual cues on a web page. Ensure the color contrast between the foreground and background color has at least a contrast ratio of 4.5: 1 for 18pt text or smaller. Large text over 18pt should have a contrast ratio and 3:1. Use the free color contrast tool to test and find the best color contrast ratios for your text.
Labeling Links
All interactive elements are required to have descriptive text labels including any links, buttons, or form controls. The label or link text should accurately describe the purpose of the link, and the destination the web page or content. Avoid using the same text for links with different destinations because users will not be able differentiate the linked content. Assistive technology needs to be able to correctly announce the function of each link. Users should be able to identify labels that describe the function of each form control.
Bad Practice | Good Practice |
|---|---|
Click Here for Instruction | Instructions are now available |
Read More about this sports news article. | News: Knights vs Eagles Article |
Physics 380 (Register) Physics 440 (Register) | Register for: Physics 380 Physics 440 |
Accessible PDFs
Before placing a PDF on the website, ensure it is web accessible. Run the Accessibility Checker tool in the program used to create the document, such as Microsoft Word, to view and resolve any issues within your documents. Refer to the Web Accessibility Self-Help Guide Creating Accessible PDFs with Microsoft Word to incorporate accessibility into your document. A PDF may not be the best option for your document. Consider if the document would work better as a web page instead.
Monitor Website With Siteimprove
Log in regularly into the web accessibility maintenance tool Siteimprove to monitor and resolve compliance issues on your website. At this time we are asking you to correct spelling and broken links on your website. For instructions, please refer to the self help documents Correcting Accessibility Broken Links With Siteimprove and Correcting Accessibility Spelling Errors With Siteimprove.
Adding YouTube Video On Website
YouTube videos should contain alternative text which helps user of assistive technology identify its contents. Add title=”a description” label to the HTML, and remove the frameborder=”0” from the code before placing the video on the website.
Download Siteimprove’s Browser Plugin
Individuals with visual disabilities or other cognitive impairments use text alternatives to understand images. Alternative text should be succinct in describing the image in the fewest words possible. If the image is purely decorative and doesn't enhance the user's understanding of the content on the page. Leave the alternative text blank. If the image serves as a destination, describe the function for the alternative text. For example, an image of a magnification icon would be label "search" instead of "magnifying glass."