Web Accessibility Guidance

What is web accessibility?

Web accessibility is about how people with disabilities use websites, apps and digital technology. It allows everyone, regardless of their condition or environment, to have access to content, information and services on websites. 

As we continue to strive for optimizing nature.org, it's important to ensure our website is usable for all people. Web accessibility is an important aspect of digital development and user experience, therefore, being mindful of it ensures equal opportunity for all people to use our website. 

Being Inclusive

It's important to recognize the diverse range of people and their unique conditions. Establishing web accessibility standards allows people with auditory, cognitive, neurological, physical, speech and visual disabilities have equal access to content, products and services. It's also worth noting disabilities and related limitations include situational impairments such as trying to listen to a video in a loud area, and temporary limitiations such as a broken arm. 

It is therefore our responsibility as digital content creators, designers and developers to be mindful of how our content can be executed and delivered to a more inclusive group.

WCAG Principles and Standards

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process 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.

The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

• natural information such as text, images, and sounds
• code or markup that defines structure, presentation, etc.

The W3C Web Content Accessibility Guidelines (WCAG) defines four principles: Perceivable, Operable, Understandable and Robust.

Within those four principles, there are 13 guidelines. Those guidelines have specific success criteria standards that are then categorized into three conformance levels that meet needs of different groups and different situations: 

• A - meets minimum accessibility, broad audience
• AA - meets mid-range accessibility, broader audience
• AAA - meets highest level of accessibility, broadest audience

TNC aims to prioritize Levels A and AA.

Sources: 
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://www.edx.org/

Guidelines Within Each Principle

These guidelines outlined below serve as a framework of what is essential to align with its respective principles. As you dive deeper into the guidelines, they provide specific tactical standards to help you meet the accessibility needs. Below is an overview of each principle's guidelines. To learn more about the specific standards and its success criteria, we encourage clicking into the learn more links. 

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

Provide alternative text for all non text content

• Alt text describes what an image actually shows.
• 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 calligraphy), 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.

02. 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. 

03. If you are writing content or building a page…

Ensure web pages have titles that describe the topic or purpose

• Having a 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.

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 the first time and again when used after a long break (as a reminder for all readers) and when used in places like a different tab on the same page (in case some readers don't visit each tab).
• 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. 

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

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

Provide written transcripts for audio players (podcasts)

• There is now a transcript feature to allow authors to add transcripts on the C73 Audio component. Transcripts can also be downloaded if you select the download checkbox when adding your transcript.
• 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.

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.

05. 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

• Provide the appropriate ARIA label attributes.
• 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.

Web Accessibility Checklist

Get the checklist of accessibility guidance to reference when building new pages or updating existing pages.

See The Full Checklist