Be 508-Compliant

Article 7 min
You work hard to get your communication product just right. It contains a powerful message conveyed with engaging visual imagery. But, according to the CDC, 1 in 4 U.S. adults has a disability. This practically guarantees a critical part of your audience can't access your full message if it is not 508-compliant.

Sending out a product that is not 508 compliant, as required by law, will leave part of your target audience out, and your organization could face up to a $75,000 fine. Making your message accessible will ensure everyone has the opportunity to receive it.

Section 508 of the rehabilitation act of 1973 applies to visual, auditory, cognitive and physical disabilities as illustrated by this diagram. Photo by DINFOS PAVILION
An illustration of an eye for visual, an ear for auditory, a brain for cognitive and a wheelchair for physical disabilities.
Section 508 of the rehabilitation act of 1973 applies to visual, auditory, cognitive and physical disabilities as illustrated by this diagram.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0002

Disabilities come in many forms, including visual, auditory, cognitive and physical. In today's digital age, the information environment is a public space that people with disabilities have a right to access. To better understand each impairment, refer to Understanding Disabilities Behind 508-Compliance.

Follow these tips to make adjustments within your electronic products—a website, email, document, survey, form video, social media, etc.—to increase accessibility.

Use Appropriate Font Size

Use font sizes that are large enough to read comfortably but don't take over the page. Although there is no definitive size recommendation, the industry consensus for the main body text is at least 16 pixels (px) for websites and 12 point font for legal documents.

Use Readable Fonts

Do not use novelty fonts that may be harder to read. A trick is to avoid fonts that don't have a unique visual style between their letters, e.g., uppercase "I" versus the number "1" and a lowercase "l."

These novelty fonts, like Milkshake, are difficult to read when compared to fonts like Times New Roman. Photo by DINFOS PAVILION
Examples of difficult to read fonts and readable fonts.
These novelty fonts, like Milkshake, are difficult to read when compared to fonts like Times New Roman.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0003

 

Don't Depend On Color Alone

Don't convey information through color alone. Use symbols, bold, italics and underlines to emphasize information. For example, when providing a hyperlink, make the term blue and underline it.

Make a design more accessible by incorporating symbols and emphasizing information. Photo by DINFOS PAVILION
Examples of only relying on color versus incorporating color and symbols to convey information.
Make a design more accessible by incorporating symbols and emphasizing information.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0004

 

Have High Contrast

Use color combinations that create a strong contrast. Make sure the foreground is separate from the background. Run your product through a color contrast checker (e.g., WebAim) and correct any potential problems.

Examples of poor readability versus readable color combinations. Photo by DINFOS PAVILION
Examples of poor readability versus readable color combinations.
Examples of poor readability versus readable color combinations.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0005

 

Provide Alt Text for All Images

Provide alternative text or alt text. Although captions are helpful, alt text provides a clear description of what's in the visual. This helps screen readers describe the images to visually-impaired readers and helps search engines better crawl and rank your website.

An example of a photograph and what its alt text may read. Photo by DINFOS PAVILION
An example of a photograph and what its alt text may read.
An example of a photograph and what its alt text may read.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0006

 

Reduce Clutter

Don't clutter the page. Carefully consider where you will place visual information.

Examples comparing a cluttered and uncluttered layout for the same brochure. Photo by DINFOS PAVILION
Examples comparing a cluttered and uncluttered layout for the same brochure.
Examples comparing a cluttered and uncluttered layout for the same brochure.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0007

 

Use Scannable Hashtags

Capitalize the first word in all hashtags. For example, #LikeThis, #SoEasyToDo, #LookAtMeGo.

Name Documents Sensibly

Give documents names that make sense. Consider what a person needs and wants to know before opening the document. Name documents clearly and consistently. For example, PAVILION 508 Compliance Template.docx.

Explain Complex Images

When using complex images, try to make them simpler. Include a long description in the text below the image. This helps not only your readers with visual impairments, but all of your readers. If the description is too long, add a text link to an appendix or provide an equivalent data table below.

Make Tables Accessible

When using tables, always include a caption with the title for screen readers. Associate table data cells with their appropriately named columns and row headers. Consider using summaries if you need to explain how the table works.

When adding tables to a document within Microsoft Word you can ensure it is accessible by providing a Title and Description within the Alt Text tab of the table's Table Properties window. Photo by DINFOS PAVILION
Image of Microsoft Word's alt-text option in the table properties menu.
When adding tables to a document within Microsoft Word you can ensure it is accessible by providing a Title and Description within the Alt Text tab of the table's Table Properties window.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0008

 

Make Links Clear

Use descriptive text for links instead of "click here." For example, visit PAVILION DINFOS Online Learning.

Provide Content Warnings

Provide warnings about sensitive content. Be respectful to your audience when they're about to encounter something sensitive or potentially traumatic. Use warnings on products such as emails, social media, images, audio or video.

Example of how YouTube displays a content warning and users must select "I Understand and Wish to Proceed" to view the video. Photo by DINFOS PAVILION
Example of how YouTube displays a content warning and users must select "I Understand and Wish to Proceed" to view the video.
Example of how YouTube displays a content warning and users must select "I Understand and Wish to Proceed" to view the video.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0009

Use Clear & Audible Audio

Ensure audio content is crystal clear with appropriate volume. Check that your subjects and narrator speak at an even, clear pace and don't slur.

Include Closed Captions

Provide closed captions on all videos, including live videos. Closed captions are intended for those who are deaf or hard-of-hearing, so include sound descriptions and speaker changes. Most platforms, like DVIDS and YouTube, provide closed captions but make sure to check them for errors.

Makes sure caption text is legible. Consider using white or yellow text in a sans serif font.

This screenshot is an example of how Web Accessibility Initiative (WAI) provides captions along with their videos. Photo by DINFOS PAVILION
This screenshot is an example of how Web Accessibility Initiative (WAI) provides captions along with their videos.
This screenshot is an example of how Web Accessibility Initiative (WAI) provides captions along with their videos.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0010

 

Include a Transcript

Transcripts provide a text version of a video's audio so viewers can follow along. This is helpful for those with auditory and/or cognitive impairments. Some video transcripts are animated and will sync with the video. For live videos, provide a transcript within 24 hours.

This screenshot is an example of how Web Accessibility Initiative (WAI) provides transcripts with their videos. Photo by DINFOS PAVILION
This screenshot is an example of how Web Accessibility Initiative (WAI) provides transcripts with their videos.
This screenshot is an example of how Web Accessibility Initiative (WAI) provides transcripts with their videos.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0011

 

Turn Off Autoplay

Do not use audio or video autoplay. Clicking on a page and getting blasted with a song or narration can be startling. Allow people to play the audio themselves.

Be Cautious of Photosensitivity

Do not use crazy transitions, flashing lights or graphics that may trigger seizures. If these are unavoidable, provide a photosensitive warning.

This screenshot is an example of a photosensitive warning feature available in the social media application TikTok. It allows users the option to automatically hide sensitive photosensitive videos. Photo by DINFOS PAVILION
This screenshot is an example of a photosensitive warning feature available in the social media application TikTok. It allows users the option to automatically hide sensitive photosensitive videos.
This screenshot is an example of a photosensitive warning feature available in the social media application TikTok. It allows users the option to automatically hide sensitive photosensitive videos.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0012

Use Easy Navigation

Put thought into how your design will require audiences to move. If you're going to have buttons, links, scrolling, etc., on a page, consider a design that will be the easiest for the greatest amount of people. Think about location and groupings of links and menus for navigation. Consider sizes of buttons, making sure they are large enough to easily click when using touch, like for a mobile or tablet device.

Another consideration is to use clicks instead of "hover" controls. Some menus require you to hover over a button to open the menu, and if the mouse leaves the button, the menu collapses. This can be difficult for people with motor control issues.

Diagram depicting the recommended minimum size and spacing for buttons. It is recommended buttons should be a minimum width and height no smaller than 44 pixels. If multiple buttons are grouped, then they should be spaced a minimum of 16 pixels. Photo by DINFOS PAVILION
Diagram depicting the recommended minimum size and spacing for buttons. It is recommended buttons should be a minimum width and height no smaller than 44 pixels. If multiple buttons are grouped, then they should be spaced a minimum of 16 pixels.
Diagram depicting the recommended minimum size and spacing for buttons. It is recommended buttons should be a minimum width and height no smaller than 44 pixels. If multiple buttons are grouped, then they should be spaced a minimum of 16 pixels.
Photo by: DINFOS PAVILION
VIRIN: 220308-D-ZW071-0013

 

Allow for Keyboard Controls

Add keystroke-enabled content, as using a mouse may be difficult for some individuals. Be sure to include focus states for form fields and buttons for users who use a keyboard (e.g., tab button) to navigate a page instead of a mouse.

Example of a web form being navigated only by keyboard controls. Note that the field the user is currently on is highlighted, or has a focus state. Photo by DINFOS PAVILION Team
Example of a web form being navigated only by keyboard controls. Note that the field the user is currently on is highlighted, or has a focus state.
Example of a web form being navigated only by keyboard controls. Note that the field the user is currently on is highlighted, or has a focus state.
Photo by: DINFOS PAVILION Team
VIRIN: 220308-D-ZW071-0014

There is no such thing as one-size-fits-all compliance. You may have to make more than one product in order to accommodate people and that’s okay. Fast food restaurants have standard menus and menus written in Braille. Buildings have stairs and wheelchair ramps—you can certainly create different versions of a product to accommodate different people. Remember, section 508 only requires you to make reasonable accommodations. If you cannot reasonably incorporate everything, that’s okay. What’s important is that you do what you can to accommodate as many people as you can. They deserve it!

Some image examples in this article are from the Web Accessibility Initiative (WAI): Accessibility Fundamentals: Video Captions. Shadi Abou-Zahra, eds. Status: Updated 23 January 2019.

References

Level Access. (2021, June 21). Test your site for accessibility.

Office of the Chief Information Officer (OCIO). (2021, April 14). Accessibility compliance checklists.

Orey, M. (2018, December 21). No learner left behind: Designing and delivering accessible learning programs.

U.S. Access Board. (2017). About the ICT Accessibility 508 Standards and 255 Guidelines.

Discover More You May Like

View All Articles