Accessibility is a factor in user experience design that refers to the level to which people with different abilities are able to effectively use or access a site and its contents. It is important that each and every one of our diverse users be able to perceive, understand, navigate and interact with our web content. Users have varying cognitive, neurological, physical, speech, hearing, and sight abilities, and we need to accommodate all users.
An accessible approach to websites typically improves the user experience for everyone. For example, adding captions to a video will not only facilitate understanding for a user who is physically unable to hear the content, but will also enable any user who is working in a quiet space or who has a broken speaker to understand the video’s content.
While an accessible approach is the right thing to do, best practice in the industry, and in line with the division’s mission and values, it is also legally required of us. Content that is not accessible puts the university at risk. We want to make sure that all users can access Ohio University content.
Assistive technology is a device, software, or feature that helps users navigate and otherwise access content. A common example is a screen-reader tool, which will read and interpret visual content out loud. There are also devices that will achieve a similar effect in braille.
Coding and styling
Many facets of accessibility are taken care of by our partners in OIT and UCM. The website’s code and styling has been reviewed for accessibility optimization. We can be good partners when it comes to content, links, images, videos, and documents.
- Use clear, plain language that can be understood by any audience member. Don’t use figures of speech or industry jargon.
- Use heading levels in appropriate numerical order: h1, h2, h3, h4, h5, h6. You can think of this order like at outline, with nested levels of hierarchy. Do not choose heading levels based on visual styling. Screen-reader tools can use heading levels to jump around a page by topic. Users can only use this feature effectively if we organize our content correctly.
- Only the page title should use the top level heading style (h1, happens automatically). Your first heading within the page content should be styled with h2.
- Align text to the left whenever possible, as our brains can read it more easily that way.
- Break up large blocks of text with paragraph breaks and use bullet points whenever possible.
- Only use tables for data, not to organize content.
- Use rows and column headers whenever appropriate, so that screen-reader tools can effectively read content to users.
- Name hyperlinks (links, buttons) with descriptive text that tells a user where the link will go. The name of a link should relate to the content that a user sees when they click the link, for continuity of experience.
- Do not use vague language like “click here” or “learn more” as your hyperlink text. Screen-reader tools can use hyperlinks to jump around a page to see what is clickable. Users can only understand the links out of context if we name them appropriately.
- Be mindful that websites that you link to outside of the university may not be accessible.
- Be mindful that any external online applications that you are driving students to that are not directly affiliated with Ohio University may not be accessible.
- Do not use images or graphics with text embedded in them on the web. Image files like jpg, png, etc. that contain text cannot be read by a screen-reader tool. Text is no longer “live” once you use the original software that you created a graphic in to convert it into pixels in an image file. Logos are an exception.
- If you must use an image that includes embedded text, such as when uploading a map or infographic, the content needs to be explained later on in “live” text or on a separate page that you link to nearby.
- Try to ensure that all images and graphics have an appropriate amount of contrast in terms of color, shade, and saturation to be successfully viewed and understood.
- Drupal requires “alt text” for every image. This is the text that a screen-reader tool would read to someone browsing the web via audio. Craft your alt text to help those using a screen-reader to understand the content and context of the image. Write the alt text like an image caption. Succinctly and plainly describe what the image depicts. If the image provides context to the surrounding content, elaborate on your alt text slightly to also describe why it is relevant. Try to stay under 140 characters.
- Present information as live text whenever possible and appropriate, rather than burying it in documents downloads.
- When a document upload is appropriate, be sure to add the document type within the hyperlink text, in brackets ([PDF], [Word], [PowerPoint]). This helps everyone to know what to expect when they click the link, and if the files will create a download or not.