Web Accessibility Checklist

If you are writing content or building a page…

Ensure web pages have titles that describe the topic or purpose

• Descriptive page title help users find content and orient themselves within it.
• Titles identify the current location without requiring users to read or interpret page content. 
• Titles in related content blocks or search can help users quickly identify the content they need. 
• Why it matters: This benefits all users who can quickly and easily identify whether the information contained in the web page is relevant to their needs.
  • Good example: What happens if we don't protect the high seas?
  • Not so good example: Can the Florida Keys adapt to sea level rise?

Ensure web pages have links to allow you to navigate back to a parent page or forward to other related pages

• Breadcrumbs help meet this criteria, but also consider other pathways a user can take to navigate to related content. Including links within text, related article components or call to action blocks at the bottom of pages will help users orient themselves and navigate ahead. 
• Why this matters: Providing an opportunity to navigate sites in more than one manner can help people find information faster, especially when using assistive technology. 

Provide link text that identifies the purpose of the link

• Link text that is as meaningful as possible will aid users in knowing where the link will send them.
• A good link example would be "Learn more bat facts". 
• A poor link example would be "Learn more". 

Focus on content being easy to understand for all audience types

• Our content serves a wide audience and using words that only a select few will understand will make sentences unnecessarily long and difficult to read. Scientific concepts can be discussed using regular English in the vast majority of cases. 
• To achieve this, avoid using overly complex terminology or jargon. 
• If scientific concepts or jargon must be used, provide specific definitions and contextualized examples. 
• Write out expanded forms of acronyms or abbreviations.
• Why this matters: For some users, it is difficult to infer the meaning of a word or phrase from context, especially when the word or phrase is used in an unusual way or has been given a specialized meaning. We should also be mindful that our audience spans beyond scientists and policy makers and all users (including scientific audiences) can benefit from accessible language. 

Ensure information is displayed in a hierarchical and sensible way

• Make sure key information is discernible at a glance.
• To convey an item’s relative level of importance:
  • Place important actions at the top or bottom of the screen (reachable with shortcuts such as anchor links)
  • Place related items of a similar hierarchy next to each other. Also consider adding only the most important content first, such as using the first slot in related articles or tabs. 
• Visually break up content that do not relate to each other so viewers understand the transition to a new section. For example:
  • Use a subhead if the text that follows is a new section
  • Use a visual as a section break (such as image, video, or quote)
  • Add an extra paragraph break to convey a new section
  • Add a divider line (HR under Styles in RTE blocks)
• While using header styles in rich text editors, make sure to use headers judiciously that help organize your content and guide users effectively through the passage. For example:
  • H2 should be reserved for primary headlines to introduce a section
  • H3 should be reserved for secondary headlines or subheads
  • H4 should be used as a section headers for grouped sub content
  • H5 should be used for detail information such as photo credits or labels
  • H6 should be used for detail information or footnotes.
  • Long form copy should use paragraph stylings. 
• Good example: Three ways to save the earth
• Not so good example: Can the Florida Keys adapt to sea level rise?

For more information on governance around building an artice detail page, check out the Guide to the Article Detail Page Template.

If you are creating or using graphics, images, photos, and non-text assets...

Provide alternative text for all non text content

• This applies to images, infographics, visual assets and interactive content.
• Why it matters: Those who are blind, visually impaired, or have a learning disability rely on screen readers to render text and images as speech or braille output. If they cannot see an image, they may use a screen reader to understand the image and greater context of the page.

Use sufficient color contrast for graphics

• For example, a yellow icon on a white background would not meet the minimum color contrast requirement. To check color contrast, use the Monsido Color Contrast Checker.
• Minimum passing contrast ratio for non-text elements on a background is 3:1.
• Minimum passing contrast ratio for text on background is 4.5:1
• Consider this across social media content as well.
• Why it matters: Those who are visually impaired require a high level of contrast to discern a graphic. This benefits all users, as well, who may be viewing content on a dimmed screen or under bright light.

Avoid formatting text into images

• Try to format text using using a rich text editor and avoid drafting paragraphs and headers in images. 
• If text needs to be rendered as an image (e.g. hand drawn calligaraphy), then provide sufficient alternative text. 
• Why it matters: Text as images will not scale well to various screen sizes or be easily consumed by the visually impaired on screen reader. It may be described by alt text, but will not be read within the context of the body and header copy.

If you are creating infographics, maps or any data visualization content that uses text...

Make sure color is not the only variable used to convey information

• If you're designing an infographic or map that uses a legend, avoid using color as instructions ('See green area') and instead provide another non-color visual treatment to distinguish information, such as patterns, symbols, icons or text​.
• If you're building an interactive graph (e.g. pie, bar or line chart) that uses color to distinguish the segments, include mouse hover or clickable tooltips for the segmented elements and ensure there is enough color contrast between the segments.
• Why it matters: Many users have deficiencies in color perception and cannot identify or distinguish color.

Make sure font sizes are not too small

• While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Keep in mind how font sizes will appear on mobile displays.
• If you are uploading a graphic using the image component, make sure you are designing to the specs. For example, C38 Image - Large variation spans 1290px wide. Therefore, your image canvas should be at least 1290px wide, and type should go no smaller than 16px.

Make sure fonts are legible

• Avoid using font styles that are too light in weight. For example do not use 'Whitney Light' for body copy or small text. 
• Designers should look for the web font versions when searching for fonts to use online. If you’re using condense styled fonts such as Knockout, please keep in mind how counter-space can affect the type's legibility on web. Designers should avoid using any condensed Knockout fonts that go lower than Knockout No. 69 Full Lightweight and should reserve Knockout for only header treatments or logos. 
• Restrain from using 'Display text' typefaces for body copy. Display text should only be used for large header treatments.
• Display text is intended for use at large sizes for headings, rather than for extended passages of body text, for they often have more eccentric and variable designs than the simple, relatively restrained typefaces.
• Why it matters: Fonts that are too light or have small and narrow type counters are harder to read, especially for users with dyslexia and low vision. 

Ensure labels on maps are legible

• Ensure there is sufficient contrast between the map labels/markers and the map it sits on. Some ways to achieve legible type on maps are to: 
• Add a stroke outline to the labels (see Google Maps), or...
• Add a box behind labels
• Bold labels
• Use colors for fonts that have a higher contrast against the map (ex: if the map uses light greens and light blues, use darker hues vs white or gray text)
• Scale the font size up (see notes under 'Make sure font sizes are not too small')

Ensure important regions and territories are distinguishable

• If you're creating a world map that displays regions and territories (such as states, coutries, counties) that need to be visually distinguished, ensure there are contrast and styling tactics employed. Some ways to achieve this are to:
• Add clear border lines around countries or states
• Use sufficient color contrast (contrast ratio of 3:1) between two bordering territories
• Apply differing patterns or textures to different regions

If you are authoring or creating multimedia content such as video, audio or .gif animations...

Provide written transcripts for audio players (podcasts)

• The Digital team has rolled out a new transcript feature to allow authors to add transcripts on the C73 Audio component. This was part of the July 2020 Release. 
• Why it matters: People who are deaf, are hard of hearing, or who are having trouble understanding audio information for any reason (whether due to cognitive impairments or simply because a person doesn't have headphones) can read the text presentation.
• Good example: Destination Nature podcast: Restoring the Reef

Provide closed captions for videos

• Captions should not only include dialogue, but identify who is speaking and include non-speech information conveyed through sound, including meaningful sound effects.
• Captions should not be confused with subtitles. Subtitles provide dialogue only.
• Why it matters: Captions enable people who are deaf or hard of hearing to watch synchronized media presentations.

Provide an audio description track for videos

• An audio description video sound track provides people who are blind or visually impaired access to the visual information in a synchronized media presentation. Audio description provides information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track.
• If a video being produced relies on visual information that is not conveyed through audio, one of two options can be taken to meet this criteria:
  1. Video producers provide both the original video AND an alternative video with the audio description track to the content author. The content author could then provide the alternative video in the form of a link directing users to the YouTube page, formatted in an RTE block above or below the YouTube player on the page. 
  2. Video producers create a video that includes audio description of the visual content and that stands as the represented video. 
  • Note: Technical solutions to allow for video components to host both a video track and a video with audio description track are being evaluated by Digital Team. Future updates will be communicated to teams. 

Avoid animation or videos with rapid blinking and/or flashing content.

• Do not create content that flashes more than three times in any one second period. 
• This type of content could induce seizures for individuals who are epileptic or have photosensitivity.

Set animated gifs to stop after five seconds

• Determine how many cycles your looping content could perform within 5 seconds. If the entire gif lasts for 2.5 seconds, then it could have 2 looping cycles. If it it lasts for 1 second second, then it could perform 5 looping cycles. 
• Also consider if there is a non-animated alternative that would be just as effective in conveying your content. 
• Ensure animated content is sufficiently described in alternative text.
• Ensure elements like blink or flash are in a safe threshold (the guideline is to avoid anything that flashes more than three times a second). Use the open source PEAT epilepsy analysis tool.

If you are working with a developer to create a custom design in the open container…

Make sure content is coded with the correct markup

• Write valid HTML5 and CSS3
• Write structured, semantic HTML (heading levels, proper elements)
• Provide the appropriate ARIA label attributes for "application"-like interactive behavior
• Screen readers must have this information programmatically identified using platform markup or other programmatic methods so that the intended purpose of the presentation is clear to the user who cannot see it. For example, where the platform supports it, text that serves the function of a heading must be programmatically set as a heading; it is not sufficient to simply use a large bold font.

Make sure all interactions can be accessible through the keyboard

• Can you tab through the interactions using a keyboard and still navigate across the content without using a mouse?
• When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as by people who must use alternate keyboards or input devices that act as keyboard emulators. Keyboard emulators include speech input software, sip-and-puff software, on-screen keyboards, scanning software and a variety of assistive technologies and alternate keyboards.
• Individuals with low vision also may have trouble tracking a pointer and find the use of software much easier (or only possible) if they can control it from the keyboard.

Ensure links, buttons, forms and menu items have a focus state when tabbing through the keyboard

• Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site. The default appearance is the blue halo outline. 

Ensure there is a focus order when tabbing through the Keyboard

• When users navigate sequentially through content, they should encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard.

Ensure that the words which visually label a component are also the words associated with the component programmatically

• Most controls are accompanied by a visible text label. Those same controls have a programmatic name, also known as the Accessible Name. Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name.
• When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.