Web Accessibility Resources

Though the UF Health web templates require the use of alt text when uploading any media, such as photos, it is imperative to use alt text appropriately to provide equivalent alternatives to auditory and visual content. 

Be descriptive; the “alt” text substitutes for the ability to view images. For example, when an image indicates an action, the action must be described in the text. The types of non-text elements requiring actual text descriptions are limited to those elements that provide information required for comprehension of content or those used to facilitate navigation. For recommendations of alt text, upload an image to IT’s Alt-Text Generator.

• Describe what the image is conveying, or what’s going on in the picture. This is different from a caption.
• If your image contains text, such as words on a sign, it’s best to include the text from the image in the alt text so website visitors can access the information. Without alt text, a screen reader will not know what an image is depicting. 

Ensure links make sense out of context; i.e. if the link text is read by itself, will the user understand where the link goes? Screen reader users sometimes choose to tab through the content of a webpage and only read the links. In these cases, links with phrases such as “click here” and “more” contain no textual clues as to what type of information the link connects to. A more descriptive link gives this crucial information. For example, use “View more information about melanoma” as your link text rather than just “More information.”

All video and audio content must have captioning for speech; please ensure captioning is correct.

Without captions, videos are inaccessible to people who may be deaf or hard of hearing, or who are not native English speakers. Add captions to videos and include a transcript link for visitors to read audio files.  

Do not rely on color alone to convey meaning. The use of color can enhance comprehension; however, that information may not be visible to a person who is colorblind and will be unavailable to screen reader users.

WebAIM has an easy-to-use resource to check color contrast.

Search engines use the HTML tag for headers to categorize content on a page and to group paragraphs into logical blocks of content they relate with the header they follow. HTML allows for six levels of headers, from <h1> to <h6>, with <h1> being considered a page title, and each subsequent heading tag less relevant (use H2 for section headings, followed by H3 for subtopics within each section). It is important to use these tags consistently and in a deprecating order to maximize a search engine’s categorization of your page. In addition, studies found that 71% of screen reader users navigate primarily by headings.

Use heading tags provided with the UF Health templates instead of editing font style and size. Eg., use H2 instead of bold, 16 px.