Accessibility

Provided here is a brief overview of major accessibility issues. For more information, visit the “Accessibility” web page of the ACS Design System site.

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 sometimes appears when the mouse hovers over an image and 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. Screen readers cut off alt text after a certain number of characters (some at 100 characters).

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

Figure 3:
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.


Colors

Background:

People who are color blind can’t distinguish certain colors, and others with low vision may also not be able to see colors well. If an image uses different colors to represent different things (e.g., different periodic elements or lines on a graph), those colors should be distinguishable by color-blind people.

Recommendation:

When it is important to be able to differentiate between colors in an image, ensure the colors can be distinguished by color-blind people. Strategies to check whether colors are appropriate include printing the graphic in gray scale and using online or downloadable tools, like Color Oracle and WebAIM’s contrast checker. Also avoid using color as the only means of conveying information; for example, also use symbols or text to communicate the information.


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 ability. 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).


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