Related Content
•
CoSIDA.com/CoSIDA360 Magazine Archive
Note: This story appeared in the Summer 2020 September edition of CoSIDA 360 Magazine. To view the full magazine, click here.
10 Things You Can Do To Improve the Accessibility of Your Website
Your goal should be equal access for all users to information and functionality
by Mindy Brauer – Massachusetts Institute of Technology, Assistant Director of DAPER Communications, Promotions and Marketing // CoSIDA Diversity & Inclusion Committee member
Web Accessibility is the inclusive practice of making websites and web applications usable by people of all abilities, including people with disabilities. The goal is for all users to have equal access to information and functionality.
Web Content Accessibility Guidelines (WCAG) are developed through the
W3C Web Accessibility Initiative in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
For PrestoSports clients, find links for its
website accessibility statement and its
guide to accessibility (login required) at PrestoSports.com.
For SIDEARM Sports clients, find links for its
website accessibility statement and its
guide to accessibility at SIDEARMsports.com.
In addition, your institution’s IT or disability services department can be a resource for website accessibility.
Below are some general tips and online tools to help anyone get started with digital accessibility. Some items refer to a “
screen reader,” which is a software program that allows blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display.
1. Text and contrast for graphics and web pages
Check that text has a strong contrast against the background. Providing enough contrast between text and the background enables content to be read by those with moderate visual impairments and in low light conditions.
Rationale: Contrasting text and background colors make the text more readable for color-blind and low-vision users.
Resource for tools to measure color contrast:
webaim.org/articles/contrast/evaluating
2. Conveying information through text styles and color
Don’t use color alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content. Test what it’s like to view your designs through a color blindness simulator.
Rationale: This helps color-blind and low-vision users recognize where you are emphasizing specific text.
3. Alternative text
Provide alternative text for images, graphs, and charts. Descriptive alt text explains what is being illustrated and is read when using non-visual browsers. If images are decorative and don’t directly relate to the content, add a null tag <””> to the alt text.
Rationale: Screen readers “read” the images, graphs, and charts using the alternative text that you have provided. This explains the purpose of your image, graph, or chart to users who are visually impaired.
Resource for more information about alternative text:
webaim.org/techniques/alttext/
4. Multiple avenues for multimedia
Supply multiple avenues for multimedia content (e.g., audio with a transcript, video with captioning). Video, audio, and interactive media requires captioning or an alternative method to deliver the same information.
Rationale: Captions and transcripts benefit a wide variety of users, including non-native speakers, users who are deaf and hard of hearing, and users in sound-sensitive environments.
Resource for information about video captions and transcripts, including best practices:
studentlife.mit.edu/das/accessibility/digital-accessibility/captions-and-transcripts
5. Making links and text more understandable
Use descriptive titles, headers, and link text to provide added context. Link text that describes what you are linking to, which helps readers scan and anticipate where they will go when clicking a link. Link text such as “Click here” provides little context to where the link is actually going. Instead, use “Click here to see the complete bracket” with all of the text hyperlinked. Do not solely rely on references to shape, size, or position to describe content.
6. Heading styles
Use descriptive heading styles to designate content organization. Using headings (e.g., Heading 1, Heading 2) indicates the hierarchy of content. Predefined style headings in text editors allow readers to more clearly understand the structure of your document or web page. On long pages of content, consider using a table of contents to help readers jump more quickly between headings.
Rationale: Screen reader users skip through the outline of a web page to find out where they want to go. Headings provide screen readers with this information and help visually impaired users navigate through your content more quickly.
7. List styles
Use bulleted or numbered list styles to denote list structure. This also ensures consistent formatting and helps screen readers understand content structure and organization.
Rationale: Screen readers have to be given instructions to know how to organize content. Formatting lists provides screen readers with this information and helps visually impaired users navigate through your content more quickly. Well-formatted web pages also are easier to read for users with any cognitive disabilities.
8. Tables
Format and use simple tables with column and row headers. Split nested tables up into simple tables, and don’t use tables to control layout.
Rationale: Complex tables can be difficult for readers to follow and comprehend, especially for screen reader users who have to remember the headers.
9. Capitalization
Use capitalization sparingly. Capitalizing all letters in a word or sentence can be visually difficult to read, and it causes a screen reader to read each individual letter instead of the word.
10. Keyboard navigable content
Make sure content can be navigated via a keyboard. Keyboard navigation is the primary means used for navigating content on a web page by users who have visual or mobility impairments.
Sources:
American Foundation for the Blind, MIT Disability and Access Services, Michigan State University Web Accessibility, W3C Web Accessibility Initiative