Design Accessible Content
This section is a good introduction to accessibility concepts and targets both web developers that make their first steps into accessibility concepts and non web developers that need a quick reference on how to present their content in a more accessible way.
Content design focuses on how to prepare and design the content of a web page with accessibility in mind.
It covers content consistency through pages, color and contrast best practices, how to deal with flashing content and using background audio.
Content Consistency
Presentation Consistency
When content is presented with consistency, the transition from page to page becomes smooth, enabling the user to navigate easily and quickly.
In order to ensure a uniform site, you should:
- Establish a consistent visual presentation from page to page.
- Maintain a constant sequential order.
- Maintain language and terminology consistency.
- Maintain consistency in the location of navigation controls.
Navigation Consistency
The navigation mechanisms should be presented in a uniform, well-structuredand logical order so as to avoid confusion or disorientation.
Navigation mechanisms direct the user to key sections or pages of the site. These mechanisms should be designed to clearly state their destinations and to indicate the current position of the user. They should also remain consistent visually and structurally from page to page.
Breadcrumbs
Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website and an indication of where they are on the site.
Example of a simple breadcrumb:
Home → Section → Subsection
Colors
If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.
People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited color or monochrome displays and browsers will be unable to access information that is presented only in color.
Color for Links
Blue colored links (#3333FF) in black text is recommended, because it is affected very little by red and green color blindness like Protanopia and Deuteranopia.
For example, this is a blue link in black text.
Text Alternatives for Colored Content
Ensure that when color differences are used to convey information, the information conveyed by the color differences are also conveyed explicitly in text.
Here are some examples to make you understand better the concept.
A form with a green submit button
An online loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text "Go".
The instructions say "Press the button labeled Go to submit your results and proceed to the next step."
A color-coded schedule with icons
The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is an icon consisting of a colored circle with a number in the middle showing what track it belongs to: blue circles with the number 1 represent track 1, yellow circles with the number 2 represent Track 2, and green circles with the number 3 represent Track 3.
Each icon is associated with a text alternative reading "Track 1", "Track 2", or "Track 3" as appropriate.
Contrast
Contrast between background and text
Make sure that users can read text that is presented over a background by providing high contrast between the text and the background. Depending on the text size and purpose, the minimum contrast ratio is different.
Let’s check some examples.
Recommended contrast ratio of at least 4.5:1 for normal text.
Normal Text: Less than 18 pixels, not bold or Less than 14 pixels, bold
Minimum contrast ratio on a white background.
( Color used: #767676, Size: 14 pixels, Font weight: Normal )
Minimum contrast ratio on a white background.
( Color used: #767676, Size: 11 pixels, Font weight: Bold )
Recommended contrast ratio of at least 3:1 for large text.
Large Text: At least 18 pixels, not bold or At least 14 pixels, bold
Minimum contrast ratio on a white background.
( Color used: #959595, Size: 18 pixels, Font weight: Normal )
Minimum contrast ratio on a white background.
( Color used: #959595, Size: 14 pixels, Font weight: Bold )
Flashing Content
Avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.
Web pages should not contain anything that flashes more than three times in any one second period.
Procedure
Check to see to see that content does not violate the general flash and/or red flash threshold, by using a tool which determines that neither the General Flash nor Red Flash threshold were exceeded.
Example
An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast and large that the general flash threshold is violated when tested with a flash analysis tool.
The animation is modified to create a short pause after each pair of lightning flashes. After the changes are made, the animation does not violate the general flash threshold.
Background Audio
Ensure that any non-speech sounds are low enough that a user who is hard of hearing can separate the speech from background sounds or other noise foreground speech content.
People who are hard of hearing often have great difficulty separating speech from background sound.
Low or No Background Audio
For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not 9 vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:
- No Background: The audio does not contain background sounds.
- Turn Off: The background sounds can be turned off.
- 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.
Per the definition of "decibel" background sound that meets this requirement will be approximately four times quieter than the foreground speech content.
