Accessibility

Accessibility is the practice of ensuring that people with disabilities can equally perceive, understand, navigate, and interact with websites and digital tools across a range of contexts. Accessibility guidelines work to reduce barriers to web use for people with auditory, cognitive, neurological, physical, speech, and visual conditions. Following accessibility guidelines can also improve the usability of print products.

Provided here is a brief overview of major accessibility issues. For more information, see the Web Content Accessibility Guidelines, a set of guidelines recognized globally as the standard for web accessibility, and other resources listed in “Resources on accessibility.”

Alt text

Background:

Alt text is what screen readers read, so it is essential for helping people with low or no vision understand any nontext element, including photos, tables, graphs, and graphics. Alt text also appears when an image doesn’t load. The alt text should describe what the image shows without repeating the caption, as a screen reader will also read that. In an image of people, alt text should mention personal characteristics only when that information is necessary for readers to understand the meaning of the image. When that information is necessary, do not make assumptions about gender, race, or other characteristics. Most guides recommend being as concise as possible, as overly long alt text may burden users.

Recommendation:

Provide clear, concise alt text for images and other nontext features wherever they appear online, including on social media. When you need longer alt text, use a different strategy, such as providing a text summary underneath a graphic.

Example:

Use:

A glass toilet with an atomizer attached to the top, making it look like a sprayable perfume bottle.
Eau de toilet: Liquid Assets' smelly spray has more refined uses than you may think.
Manny Morone/C&EN

The alt text for this image describes what it looks like, while the caption provides editorial comment (C&EN, Sept. 9, 2018).

Alt text: A glass toilet with an atomizer attached to the top, making it look like a sprayable perfume bottle.

Caption: Eau de toilet: Liquid Assets' smelly spray has more refined uses than you may think.  

 

Avoid images of text

Background:

Using images instead of text means that people who are using screen readers will not hear the information read aloud to them and will not have access to the text in the image.

Recommendation:

Choose text, an HTML data table, or MathML (or the other languages supported by the platform) for text, formulas, and equations. Do not use images of these elements. For example, if you cannot select the text in a table, the table is likely an image and will not be accessible to all readers.

Example:

Use:

The "Barium Acetate" monograph in ACS Reagent Chemicals has both a table and a formula that correctly use text (MathML). An abbreviated version of the table is shown here.

For the Determination of Calcium, Potassium, Sodium, and Strontium
Element  Wavelength (nm) Sample Wt (g) Standard Added (mg)

Ca

422.7

 0.04 0.02; 0.04

K

766.5

 1.0 0.02; 0.04

Na

589.0

 0.10 0.005; 0.01

Sr

460.7

 0.05 0.05; 0.10

This is an HTML data table, which is more accessible than a table rendered as an image.

Avoid:

 

A screenshot of a table showing sample weight and other measurements for calcium, potassium, sodium, and strontium.

This screenshot of part of the table shows the table as an image, which is less accessible.

Color to convey meaning

Background:

For people with color vision deficiency (also called color blindness) and low vision, differentiating between certain colors and shades can be difficult, if not impossible. If information is conveyed by color alone, some people may not be able to access the information. For that reason, one of the success criteria of the Web Content Accessibility Guidelines is “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” Additional ways of conveying information include text, shapes or symbols, and patterns. Conveying information in multiple ways and choosing colors differentiable by people with color vision deficiency are also important ways to ensure print products are accessible.

When color is used to convey information, such as in a heat map or fluorescent image, it is important to choose accessible palettes. For example, palettes that use a perceptually uniform scale instead of a rainbow scale are more accessible.

Recommendation:

Avoid using color as the only means of conveying information. For example, also use symbols or text to communicate the information, such as by directly labeling parts of a graphic.

When differentiating between colors in text or visual elements is important, ensure the colors can be distinguished by people with color vision deficiency. Strategies to check whether colors are appropriate include printing in grayscale and using online or downloadable tools, like Color Oracle, Coblis, or the Colorblindly extension for Chrome.

Example:

Use:

 

Two pie charts on lithium supply and processing showing that while most raw lithium comes from Australia and Chile, Chinese producers dominate lithium processing.
Although most raw lithium comes from Australia and Chile, Chinese producers dominate lithium processing. Source: Benchmark Mineral Intelligence.
C&EN

Labeling the slices with percentages means that people can understand the data even if they can't differentiate between the colors of the pie slices (C&EN, Oct. 29, 2022).

Color contrast

Background:

A contrast ratio measures how two adjacent colors differ in brightness. The Web Content Accessibility Guidelines defines minimum contrast ratios for adjacent colors when differentiating between them is necessary for understanding content. For example, text should have adequate contrast against its background, and nontext elements that are essential for understanding should have adequate contrast with their background or adjacent elements. The World Wide Web Consortium’s Web Accessibility Initiative lays out a few exceptions to the contrast rule—for example, when text conveys the same information as the colors (such as labeled pie slices) and when a particular presentation is essential to understanding the information (such as a screenshot).

Recommendation:

Text against a background, including text within images, should meet the minimum contrast ratio set by the Web Content Accessibility Guidelines (WCAG). Nontext elements that are required to understand content, including graphics and user interface components (such as links or social media icons) should also meet WCAG requirements. One strategy to achieve adequate contrast is to add a border that has sufficient contrast against each color, such as adding a border around countries in a map. Certain types of images, such as heat maps, photos, and screenshots, may be presented in lower contrast so they don’t lose their meaning or purpose.

Tools to measure contrast are TPGi’s Colour Contrast Analyser and Web Accessibility in Mind’s contrast checker.

Example:

Use:

Chemistry for Life

Avoid:

Chemistry for Life (Yellow does not have adequate contrast against a white background.)

Transcripts and captions

Background:

Transcripts make videos and podcasts accessible to people who are deaf or hard of hearing. In addition, transcripts are useful for anyone who prefers to read information rather than hear it. Captions are also a necessary accessibility feature for videos. And just as with transcripts, captions are used by everyone, regardless of disability status. For instance, on social media, people often prefer to watch videos with captions than with sound on.

Recommendation:

Make transcripts easily available for videos and podcasts. Create captions for videos. 

Example:

Use:

A video on C&EN’s website includes closed captioning and a transcript (July 12, 2021).

Social media

Background:

Screen readers translate emoji into text descriptions (such as “clapping hands” for that emoji). Putting many emoji in a row, especially of the same one, and putting them between words can make understanding social media messages more difficult. In addition, the description of the emoji may not convey the poster’s intended meaning.

Screen readers have difficulty interpreting emoticons—punctuation marks representing faces.

Screen readers read all-lowercase hashtags as one word. Capitalizing each word in a hashtag is more accessible.

Recommendation:

Do not overuse emoji in social media posts, and do not use them to replace words. Be aware of how they will be read by screen readers so that the meaning matches your intent, and place them at the end of the message. Don’t use emoticons. Capitalize each word in a hashtag.

Example:

Use:

#WomenInChem

Avoid:

#womeninchem

Website overlays

Background:

Some companies offer web overlays for accessibility—code intended to automatically fix accessibility issues on websites. But permanent plug-ins currently on the market have not met the needs of people with disabilities. Over 600 accessibility experts, software developers and designers, and end users with disabilities have signed an Overlay Fact Sheet recommending people not rely on overlays: “We hereby advocate for the removal of accessiBe, AudioEye, UserWay, User1st, MK-Sense, MaxAccess, FACIL'iti, and all similar products and encourage the site owners who've implemented these products to use more robust, independent, and permanent strategies to making their sites more accessible.”

Recommendation:

Instead of relying on permanent plug-ins to fix accessibility issues on a website, learn about how to build good accessibility practices into online content from the start. Work with accessibility experts to create material that truly serves people with disabilities.

Resources on accessibility

Previous page

Diversity and inclusion in images

Next page

Related resources

The ACS takes your privacy seriously as it relates to cookies. We use cookies to remember users, better understand ways to serve them, improve our value proposition, and optimize their experience. Learn more about managing your cookies at Cookies Policy.