Images, ALT TEXT and documents – with accessibility in mind

The trouble with images and accessibility

A typical problem for website visitors who have accessibility needs is anything visual such as a picture, icon, graph, maps or a table of data. All these visual elements present problems to people who use assistive technology, in particular, those who have low vision or sight loss.

Visitors with sight can see the image or icon on the page and its content. This is often taken for granted by website authors who will write the content of the page and refer to the image.

But if you can’t see the image, you’re missing a lot of the story.

The problem comes from not knowing what the image is of, or what it represents. This is down to one, single problem that has an easy solution, but it is all-too often missed – giving the image a textual description of what it represents. It’s known as ALT TEXT (alt = alternative).

A person with sight loss or very low vision will use assistive technology attached and installed on their computer – this allows them to use it and navigate websites using a special keyboard or hardware-based device. When they reach an image on a web page, if built correctly, the assistive technology can audibly announce the description of the image, which it gets from the ALT TEXT.

However, in a lot of cases, an ALT TEXT won’t have been set and it has been left as the default file name of the image – often something like ‘DSC29374.jpg’ because that’s how it came off the phone or camera and the website author did not change the file name to something more descriptive or add ALT TEXT.

This creates a barrier for users with low vision or sight loss, especially if the image is a graph or image that contains text embedded in it.

How to improve the accessibility of visual items

There are a few simple techniques you can use to improve the accessibility of your web page when it comes to visual elements:

• When adding an image to your website, rename the image file before you upload it to the website and use normal syntax, i.e. ‘golden-retriever-dog.jpg’. By doing this, you will be providing a fall back in the event the ALT TEXT doesn’t work.
• If you use a website admin tool, such as WordPress, there is an ALT TEXT box for you to enter it when you upload it – see image below. You can also add it to the ‘Title’ input field, too and if your website theme supports it, the image title will be displayed below the image. This adds an extra layer of support for those who need additional help.

• Keep the ALT TEXT description short, but descriptive. Long ALT TEXT just creates a problem as the text is either audibly read aloud by the computer, or the text is displayed using large font for those with low vision and makes the page flow badly whilst it tries to accommodate a lot of text.
• Try to avoid embedding text in images. The text cannot be read by the assistive technology because the text has just been converted to a picture. Keep text in an image to a minimum and make sure that whatever text is in the image, is added as ALT TEXT. If you have an image of eg. an event poster, t’s also a good idea to make sure the text on the page also contains all the information. By doing that, you’ll be helping those users with vision-related difficulties.
• If your website uses icons, ensure to give flag them as ‘decorative’. Most website admin tools, such as WordPress, provide an option for you label the icon this way. Especially if they are arrows or small graphics that provide little or no additional information.
• Tables – this is a tricky beast. Strictly speaking, tables should only be used for numerical information. Historically, website authors have used them to format text neatly. The issue begins where the tables give no instruction as to how to navigate through the table without sight. Giving tables headers for columns and rows goes some way to help, but for the most part, those who use assistive technology have a tough time with tables so they are best avoided. If you do need to use tables, get HTML advice from a specialist.
• Maps also present a problem. They aren’t required to be accessible under WCAG 2.1AA for public bodies, but there are a few things to bear in mind if you want to use a map on the website. If using a Google Map, which is one of the best, you should display a message on the page to say it comes from a third party. Be sure to display any information, such as addresses, on the web page as well so as not to restrict access to the information in the map.
• Graphs are similar in many respects to tables. They will carry text and data in them, but it’s embedded in the image so not readable to assistive technology. It’s ok to use them, but be sure to add ALT TEXT describing the graph’s meaning and make sure to reference the data in the text, too.

Accessible documents on websites

The last area to cover is about the documents that are made available to download from a website.

From an accessibility point of view, there are a few things to bear in mind when considering adding documents, such as meeting minutes, agendas and finance reports, as well as promotional material, to a website.

• The best format is an accessible PDF – known as PDF-A. This means the document has been made with accessibility aspects baked into it from the original file – usually MS Word.
• MS Office applications, such as Word and Excel, have an inbuilt accessibility checker and tool that guides you if you need to fix accessibility issues. This means when you save it as a PDF, it will be as accessible as possible. Exceptions to this are Publisher, Powerpoint and the other applications in the Office suite – they are yet to have any form of accessibility checking features and so are best avoided from an accessible document production point of view.
• You can use the full version of Adobe’s Acrobat application to add accessibility features to a document if you do not have the original file, but it is labour intensive and not foolproof. Other applications, such as JAWS PDF also provide these tools, but it is better to make the document accessible from the start.
• Adding the native files, such as Word (.docx) and Excel (.xlsx) are also discouraged. This is creating an additional barrier as it is relying on the reader to have a paid subscription to the MS Office suite. And while it may give the reader the master document to change the font sizes, colours and such like to make it easier to use, it presents also presents a problem of version control. The document can be downloaded from the website, edited and, whilst the user cannot add it back to the website, they could distribute it through email or social media with inaccurate information in your name. Gold standard approach is to have the content actually on the webpage in HTML format as assistive technology interacts with that best. After that adding a PDF-A and, if needed, an Excel or Word file of the same information covers off all eventualities.
• PDFs of event posters – these are often very visual as they will have been designed to be attractive. But they will also contain lots of text embedded in them that are from a design application and usually not accessible. If the posters contain information, then the ALT TEXT will either need to be added by the designer if the application allows, or after using Adobe Acrobat or JAWS PDF editor. However, it would better to also include all the information that is pertinent to the event in text on the web page, too – then you aren’t limiting knowledge of what’s in the poster to those with vision.

A final note on documents that relates specifically to public bodies in the UK – that includes all levels of councils from Meeting and Parish up to Town and City.

Any document that is produced by the council since September 2018 must be accessible if it is going to be published on the website. The only exceptions are;

• If the document is provided by a third party
• If the document is older than September 2018
• If the document is an exempt file, such as AGAR or Map.

If you would like further help and guidance on making your website more accessible, please call us on 015215 373020 or email Aubergine [email protected]. We also provide fully WCAG2.1AA compliant websites for Parish and Town Councils.

You can also find Mark over on Mastodon Social Network where he shares tips, guidance and discussions on how to improve the accessibility of the internet for those with disabilities.