Accessibility

All University websites are required to be compliant with the Americans with Disabilities Act and are encouraged to adhere to Section 508 of the Rehabilitation Act of 1973 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications).

While Aurora’s central themes are tested and kept accessible by ITS web developers, individual webmasters are responsible for keeping the content of their pages and sites accessible.

Visit UConn's IT Accessibility website for more information.

(See all Aurora WordPress Training.)

Quick Tips to Keep Your Pages Accessible

Use Alt Text for Images

Alternate text, or alt text, is a textual description of an image. Alt text is applicable when inserting pictures into a webpage; it describes what knowledge or functionality the reader is supposed to gain from the inserted image. Alt text is only helpful when it fully describes the form and function of the image.

Good alternative text provides the information conveyed in the image, including all text seen in the image and relevant details. It can be difficult to choose where to focus the description, so here are a few rules of thumb:

• If an image is meaningful, it must have alternate text. Not providing alternate text means that users who cannot see the image will miss information.

• Focus on form and function. Form or context often tells us what aspects of the image are most important. Function tells us how to describe the image. A magnifying glass icon that serves as a search button should be described as a search button.

If stuck formulating alternate text, consider how you might describe the image to someone over the phone.

No Table Layouts

Layouts of rows and columns should be done with Bootstrap code, not HTML Tables. Besides being inaccessible, HTML tables also break your pages in mobile views. Tables should only be used when the content in a cell is defined by what row and column it belongs to.

Avoid ‘Click Here’ Links

Avoid ‘Click Here’ and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it helps with your Google search rankings. For example, “for more information about our admissions process, click here should be written as “more information about our admissions process“.

Use Headings

Use headings to organize your page content. For example, this page uses Heading 2 (h2) and Heading 3 (h3) tags. “Quick Tips to Keep Your Pages Accessible” is a Heading 2, and “Use Headings” is a Heading 3. Besides bringing in a larger font and adding white space, these headings are great for accessibility. They allow impaired users to skip through the heading tags the same way you would visually scan a page for headlines. Heading 3 would be a subsection within a Heading 2 section. You can add headings by going to Format > Formats > Headings or by using the keyboard shortcut (Control + 2, Control + 3, etc. on Windows or Command + 2, Command + 3, etc. on Mac). Headings help your site to look great, be more accessible, and they really help your search engine rankings.

Watch Color Contrast

Be careful with color contrast. You can change the color of your page text or upload images with text. Remember that users may have forms of color blindness or low vision. In the Resources section below, there are ways to measure the contrast levels with some websites or apps. In general, do not put red text on a green background or yellow text on a white background; make sure your text is clearly legible.

Use a contrast checker to check accessibility.

Contact Information

Be sure to have contact information clearly visible on the homepage. Also add a link to a Contact page in the Top Navigation, or in a sub menu. This provides the ability to request alternate versions of inaccessible material to viewers with disabilities.

Resources

Please note that while these tools will help issues, many aspects of web accessibility require a degree of judgment. For example, a tool can detect if you are missing alt text for an image, but it will not be able to figure out if alt text accurately describes the image. Visit the IT accessibility website to learn about more tools for automatically testing a web page's accessibility.

Related Articles