Accessibility Best Practices
University of Florida Web Accessibility Guidelines
Much of this section draws from the WebAIM (Web Accessibility in Mind) project, a Utah State University initiative, online at www.webaim.org.
The information below provides an overview of basic best practices used to make UF Health sites accessible:
Use meaningful “Alt” Tags – 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.
Ensure links make sense out of context. Every link should make sense if the link text is read by itself. Screen reader users sometimes choose to tab through the content of a web page and only read the links on a web page . 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 “More information about melanoma” as your link text rather than just “More information.”
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.
In the example below, you can see how using a green and red button would not be enough to differentiate an action for a color-blind user: text, however, used in conjunction with the color make the meaning of the buttons clear.
Google and other Search Engines use the css 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. It is important to use these tags consistently and in a deprecating order in order to maximize a search engine’s categorization of your page. A proper semantic order results in a higher relevance score, and better rankings in search engine results. If your site uses <div>, <span>, or <p> tags for headers, replace with properly ordered header tags.
- Use heading tags instead of editing font style and size. Eg., use H2 instead of bold, 16 px.
- For more on semantic structure, visit: http://webaim.org/techniques/semanticstructure/
By using relative sizing the fonts of this web site can be resized using your browser. More information on this is available through an article on accessify.com called Teach a Man to Fish (or How to Resize Text) which is available in both video and text format.
It is very important that you follow the hierarchy of heading styles, i.e. a page title is H1, then the next level of heading uses H2, then H3. These heading styles can be chosen from a drop-down menu as you edit your page.
Adobe Acrobat PDF Files
Sometimes people using screen-reading devices encounter difficulty reading documents directly in PDF format, unless they have an accessibility plug-in installed on their system along with the Adobe Acrobat Reader. This plug-in is available at NO CHARGE from Adobe. For converting PDF to HTML or text Adobe also has online PDF Conversion tools. To get the plug-in and latest news about Adobe’s accessibility tools and services, visit the Access Adobe site.
- Tables are useful when displaying data. They are not effective for design layout.
- Use language appropriate for your audience. Ensure that documents are clear and simple.
- Ensure that pages featuring new technologies degrade gracefully. Page content should be accessible in older supported browsers.
- Ensure direct accessibility of embedded user interfaces.