Most social media sites provide a generic image for users who do not upload a personal photo.

Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.

For simple graphics, providing a succinct, informative text alternative is usually fine. But for complex graphics, it's not enough to provide a screen reader user with only short alternative text, such as "population graph." You also need to think about the information that the graphic conveys, such as the categories of data being shown, trends, and maximum and minimum values.

In this example, we're going to provide a text alternative for a graph, using HTML to give an alt attribute to the graph and some visible text to provide additional information.

The alternative text for the graph (supplied through its alt attribute, which you can add when you upload a graphic using a web editor) would be too long if it were to describe everything in the graph, so it just describes the graph's purpose. And by placing this paragraph first, we make sure screen reader users can still get the information they need.

Media Sources for the Iraq War

Analysis of media coverage during the Iraq war was by no means universally objective. In fact, it's clear that coverage was overall pro-war with American news sources being slightly more pro-war than sources from outside the US. Neutral coverage came in at 26%, while a minority of sources were determined to be anti-war. Only 3% of American sources fell into that category.

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by online content editors should allow you to update the style for that text.

Only in extreme circumstances, such as when a logo is used, should you provide an image of text rather than text. If you do this, you'll need to provide that same text as the image’s text alternative so that screen-reader users can access the text.

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

✓ Use CSS and web fonts

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.

People differ in the way that they can (or like to) consume information, especially in educational contexts. Some people might prefer information provided in text, or video, or audio; and their accessibility needs can also influence their preferences.

But while accessibility for images often focuses on providing a text alternative for screen-reader users, we can also look at the issue from the other way around—providing a graphic alternative for text to make the underlying information or concept easier to understand. This includes for people with reading difficulties.

Imagine that some prose has been provided to describe—in this case—the division of energy sources for Romania’s electricity production:

“When we consider energy consumption trends farther east in Europe, however, we might consider the Carpathian nation of Romania as an example. Here, we find an interesting picture, where electricity is provided by diverse energy sources, with no single energy source constituting a clear majority. According to the most recent statistics available to us, we see that hydro-electric power is the most prevalent source at slightly over one third (36%), followed closely by coal (33%), then nuclear (19%), and gas at 10%. Completing the Romanian picture, we find that other energy sources make up the remaining 2%.”

All the correct information is there, but it’s hidden among a lot of unnecessary verbosity. By providing a doughnut chart to capture the salient points, we can be more inclusive of those who learn better visually and assist the understanding of everyone: Seeing the percentages visually, as segments, makes the proportions easier to compare.

The most appropriate alternative text for an image depends very much on the context of the image in question. You must provide information for that image that takes into account its purpose and also the surrounding text on the page. The same image might need different alternative text depending on how it's used.

Let's look at some examples of appropriate alternative text, using the same Harvard University logo in different contexts.

Stand-alone

In this basic example, we’re just using the Harvard logo to indicate that the page is associated with Harvard University. In this case, the alternative text should say something like "Harvard University logo."

But if the logo were provided as an example of logo design, we might want to go further and opt for something like "Harvard University logo, featuring black, serif text and a red shield emblem", as in this example:

Inside a link

It's a web-design convention to use a logo graphic as a link back to a site's home page. In this case, we would use alternative text that describes the action of the link. After placing the logo inside a link pointing to the home page, appropriate alternative text might be "Harvard University home page" or similar. A screen reader would identify that the image is also a link and say, "Harvard University homepage, link."

Inline with text

In rare occasions, an image of text might be used inline as a substitute for text. For instance, we might want to write "Welcome to Harvard University" using the logo instead of the words "Harvard University." In this case, we should focus on writing alternative text that stands in for the visible text within the logo, without adding any extraneous information—that is, you’d want the alternative text to just say "Harvard University". We wouldn't want a screen reader announcing, "Welcome to the Harvard University logo"!

Welcome to 

Video: Adding alternative text to images in a WYSIWYG editor