Creating Accessible Content – Text-Heavy Images

— Written By
en Español / em Português
Español

El inglés es el idioma de control de esta página. En la medida en que haya algún conflicto entre la traducción al inglés y la traducción, el inglés prevalece.

Al hacer clic en el enlace de traducción se activa un servicio de traducción gratuito para convertir la página al español. Al igual que con cualquier traducción por Internet, la conversión no es sensible al contexto y puede que no traduzca el texto en su significado original. NC State Extension no garantiza la exactitud del texto traducido. Por favor, tenga en cuenta que algunas aplicaciones y/o servicios pueden no funcionar como se espera cuando se traducen.


Português

Inglês é o idioma de controle desta página. Na medida que haja algum conflito entre o texto original em Inglês e a tradução, o Inglês prevalece.

Ao clicar no link de tradução, um serviço gratuito de tradução será ativado para converter a página para o Português. Como em qualquer tradução pela internet, a conversão não é sensivel ao contexto e pode não ocorrer a tradução para o significado orginal. O serviço de Extensão da Carolina do Norte (NC State Extension) não garante a exatidão do texto traduzido. Por favor, observe que algumas funções ou serviços podem não funcionar como esperado após a tradução.


English

English is the controlling language of this page. To the extent there is any conflict between the English text and the translation, English controls.

Clicking on the translation link activates a free translation service to convert the page to Spanish. As with any Internet translation, the conversion is not context-sensitive and may not translate the text to its original meaning. NC State Extension does not guarantee the accuracy of the translated text. Please note that some applications and/or services may not function as expected when translated.

Collapse ▲

Accessibility in digital content is crucial for ensuring that all users, including those with disabilities, can access and benefit from the information. Even more so, it is easier to create accessible content digitally. The steps that you take to create accessible web content also make your content more SEO-friendly, resulting in higher visibility of your content to your current and potential audiences. While there are numerous reasons why you should create accessible content, there’s also the biggest reason, you are required to.

What does this mean to me?

Ensuring content is accessible is not a complex task. All the information in images needs to be available as text in the content. This information can be included in the content as alt-text, but in many cases, it can also be included in the body of the content. These practical tips are easy to implement and will make a significant difference in the accessibility of your content.

With the increased availability of tools like Canva and Adobe Express, there has been a rise in text-heavy images. These images often hold information that is not accessible. The good news is, it’s not a complex problem to solve. Simply copy the text from the design program of your choice and paste it into your post. Even without any other formatting changes, this is a much better solution than having that information not exist.

Here are a few examples

An example post that just has a text heavy image, and no accompanying body text.

Bad

In this example all of the information included in the image is not accessible to screen readers. You should never post in this manner. Even if the information is available in the images alt-text this post is not SEO friendly.

An example post showing an image copy of a flyer with accompanying body text that explains the image.

Better

This post is a good bit better. We still have a text-heavy image, but all of the information is included in the body of the post. Users can now click the link to register for the event. This is still not a clean post, and can be improved but it is the minimum that needs to occur when posting text-heavy images.

An example post with a high quality hero image and body text about the event.

Best

This post is the best-case scenario. We are using a high-quality hero image that contains no text. All of the relevant information is in the body of the text. It’s a clean, professional-looking post.

What about newsletters?

We have a number of counties that publish monthly newsletters for their counties. These newsletters have some great content but often are available as images. For these, you have a few options.

  1. Include a link to an accessible PDF version of the newsletter at the top of the page. This is the easiest way to meet the minimum requirements. If you aren’t sure if your PDF is accessible, the quickest way is to try to highlight text in the document. If you can’t highlight the text, chances are it is not available for screen readers to read.
  2. Include a single “Front Page” article on the newsletter announcement page along with a link to an accessible PDF. This serve as content for your site, drawing people into the newsletter post and increasing engagement while also ensuring your post is accessible and has useful content.
  3. Make posts for each of your newsletter articles! You can make a post for each article in plain text so that each article is available on your site. You can still include a link to the accessible, more graphical PDF. Make sure to tag all your articles with the same tags so that users can easily find others from that month!

Newsletters are Meant to be Text-heavy

These graphically impressive creations are great, but there is no getting around the fact that they have to include a large amount of text content. So, in addition to making sure that the text is accessible to screen readers, make sure you follow good design rules for your newsletter.

Avoid using images as the background to your newsletters. While these can make your creation “pop,” they tend to increase the amount of visual noise in the document, which can make it very hard to read for some individuals. You can use muted and low-contrast texture images if you want the document to look printed on paper, but in general, it’s best to avoid images and use solid colors instead.

When choosing colors, make sure you are choosing colors for the font that have a high contrast ratio to the background. The higher the ratio the more easily your text will be read. If you want to see if your colors pass the contrast ratio test, use the WebAIM: Contrast Checker.

On that same note, make sure you choose highly legible fonts. For more information on font choice, check out EIT’s Choosing Accessible Fonts post.

It’s Work, but It’s Worth It

These steps will increase the time it takes to create new content. However, you are not only fulfilling a requirement; you are also ensuring that anyone who wants to read your content can. It might seem like something small, but it is important.

If you have questions or need help with creating accessible content for the web, EIT is here to help!

Further Reading

NC State – Accessibility Regulation FAQs

NC State Extension – Digital Accessibility

NC State – IT Accessibility Handbook