In this guide, you will learn:
- What is web accessibility
- Why it matters
- Web accessibility principles and standards
- Guidelines on how to make your content accessible
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.
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.
1 in 5 individuals in the US have a disability
As of 2016, an estimated 3.8 million people aged 21 to 64 years were blind or had serious difficulty seeing, even when wearing glasses.
Approximately 15% of American adults (37.5 million) aged 18 and over report some trouble hearing.
The number of people living with cognitive disabilities in the United States is equal to twice the population of New York City.
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.
Four fundamental principles of web accesssibility
Perceivable information and user interface
Information can be perceived by users using one or more of their senses. For example, strong color contrast, alternative text, transcripts for audio podcasts. More About Perceivable Principle
Operable user interface and navigation
Functionality can be used in different modalities. For example, keyboard tabbing, mouse, sip-and-puff, speech input, touch, etc. More About Operable Principle
Understandable information and user interface
Information and functionality is understandable. For example, consistent navigation, simple language, clear instructions, etc. More About Understandable Principle
Robust content and reliable interpretation
Content can be interpreted reliably by a wide variety of browsers, media players, and assistive technologies. More About Robust Principle
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.
- Text Alternatives: Providing text alternatives fulfills the need of allowing text to be transformed into other forms for people who need it presented in a different format, such as large print, braille, audio speech, symbols or simpler language. Learn more about the success criteria for Text Alternatives.
- Time-based media: Providing alternative means to comprehend time-based media such as video and audio podcasts fulfill the need of those who have visual or hearing impairment, or those who have trouble processing the information. Learn more about the success criteria for Time-based media.
- Adaptable: Developing content that can be adapted to different presentations without losing the information and structure to fulfill the need of those who use assistive technology to change the display of content. Meeting this requirement allows content to be correctly read aloud, enlarged, or adapted to meet the needs and preferences of different people. Learn more about the success criteria for Adaptable.
- Distinguishable: Making sure content is easy for users to see and hear. For visual presentations this involves making sure that information presented on top of a background contrasts sufficiently with the background. For audio presentations this involves making sure that foreground sounds are sufficiently louder than the background sounds. Learn more about the sucess criteria for Distinguishable.
- Keyboard Accessible: If all functionality can be achieved using the keyboard, it can be accomplished by keyboard users, by speech input (which creates keyboard input), by mouse (using on-screen keyboards), and by a wide variety of assistive technologies that create simulated keystrokes as their output. Learn more about the success criteria for Keyboard Accessible.
- Enough Time: Ensuring that users are able to complete the tasks required by the content with their own individual response times. The primary approaches deal with eliminating time constraints or providing users enough additional time to allow them to complete their tasks. Learn more about the success criteria for Enough Time.
- Seizures and Physical Reactions: Some people with seizure disorders can have a seizure triggered by flashing visual content. The objective of this guideline is to ensure that content avoids the types of flash that are most likely to cause seizure when viewed even for a second or two. Learn more about the success criteria for Seizures and Physical Reactions.
- Navigable: Help users find the content they need and allow them to keep track of their location. For finding, navigation, and orientation, it is important that the user can find out what the current location is. Some Success Criteria in this guideline explain what provisions need to be taken to ensure that screen reader users can successfully navigate the content. Learn more about the success criteria for Navigable.
- Input Modalities: All functionality should be accessible though pointer input devices, for example, using a mouse pointer, using your finger to interact with a touch screen, or using electronic pencil/stylus, or a laser pointer. Inputs that require drag-and-drop gestures on touch screens, swiping gestures, split taps, or long presses without a pointer alternative would not meet the success criteria. Learn more about the success criteria for Input Modalities.
- Readable: Allow text content to be read by users and by assistive technology, and to ensure that information necessary for understanding it is available. People with disabilities experience text in many different ways. For some the experience is visual; for some it is auditory; for some it is tactile; for still others it is both visual and auditory. 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; for these users the ability to read and understand may depend on the availability of specific definitions or the expanded forms of acronyms or abbreviations. Learn more about the success criteria for Readable.
- Predictable: Content should be presented in a predictable order from Web page to Web page and by making the behavior of functional and interactive components predictable. It is difficult for some users to form an overview of the Web page, for example, people who use screen magnifiers see only part of the screen at any point in time; a consistent layout makes it easier for them to find navigation bars and other components. Learn more about the success criteria for Predictable.
- Input Assistance: Everyone makes mistakes. However, people with some disabilities have more difficulty creating error-free input. In addition, it may be harder for them to detect that they have made an error. Typical error indication methods may not be obvious to them because of a limited field of view, limited color perception, or use of assistive technology. This guideline seeks to reduce the number of serious or irreversible errors that are made, increase the likelihood that all errors will be noticed by the user, and help users understand what they should do to correct an error. Learn more about the success criteria for Input Assistance.
- Compatible: The purpose of this guideline is to support compatibility with current and future user agents, especially assistive technologies (AT). This is done both by 1) ensuring that authors do not do things that would break AT (e.g., poorly formed markup) or circumvent AT (e.g., by using unconventional markup or code) and 2) exposing information in the content in standard ways that assistive technologies can recognize and interact with. Learn more about the success criteria for Compatible.
Web Accessibility Guidance Checklist
If you're a designer, developer, video editor, publisher or working with external vendors to create content for nature.org, follow the checklist below to determine how your content can meet web accessibility standards:
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:
- 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.
- 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.