When it comes to accessibility and your company’s website, no one person is responsible for assuring accessibility. In fact, it is the responsibility of the site developer, company leadership, content contributors, and even the person responsible for purchasing products.
Images are an important part of any website. They help to convey meaning and context to the users of your site. You may be thinking “How in the world do I make images accessible to all users?” Well, don’t worry, you won’t need to remove the images to have an accessible site. You just need to ensure that the intent or meaning of the images is accessible to all users.
How? Utilize alt text or attributes to provide a short image description.
Informative Images
You place this type of image on your web site in order to convey a simple concept or information that can be expressed in a short phrase or sentence.
The alt text for this type of image should convey the meaning of the content that is displayed visually. This text should be as concise as possible.
Warning: Long alt text will result in a poor experience for screen reader users.
Instead, if your image requires a length description, describe the image in the page content, and just provide a short alt text on the image.
Functional Images
The purpose of these types of images is to convey actions. For example, icons or buttons that call the users to action like “print.”
Alt text for these types of images should also convey the action, not describe the image. For example, the icon of a printer should have an alt text of “Print this page” instead of “image of a printer.”
As a content contributor, you will not deal with these types of images very often. Typically these are dealt with by the developers or designers. However, if you notice that your site has these images and they do not have alt texts that convey the actions, then you need to bring the issue up to the person(s) responsible. Because missing or incorrect alt text can create major problems for users of screen readers.
Decorative Images
There is no major purpose for these types of images. They do not inform or improve the meaning of the context. Instead, they are there to merely enhance the appearance of the page.
In these instances, provide an empty alt text for the image (i.e., alt=“”). This will signal to the screen reader that it should skip over the image. You want to be sure to provide the blank alt text because if the attribute is not present, the screen reader will read the file name of the image to the user (very annoying).
Images with Text
Text in images should be avoided as much as possible as screen readers cannot read the text inside. Additionally, if a user zooms in on the page, the text will not resize, but instead, become very pixelated – which makes the text even harder to read.
If you absolutely have to put text inside an image, make sure you use a manual color contrast checker to make sure there is enough contrast between the image and the text. Adding a dark overlay over the image can aid in contrast, you may also consider adding a drop shadow to the text to increase readability.
One of the acceptable exceptions to this rule is logos. If it is possible to separate the icon from the text, try to do so. However, if this is not possible, make sure to have the same exact text as the alt text.
Remember: The correct alt text for an image should be influenced by the intended use of the image.
Tables
Back in the 90’s, it was very common for people to utilize tables in order to design a layout for their site. However, today they should never be used for layout. Tables are difficult to navigate for users of assistive technology.
Tables are for displaying data – not design.
Simple Table
A simple table is much easier to make accessible than more complex tables. This type of table does not have more than one header row or column, nor does it have any merged cells.
Complex Table
If a table has multiple header rows, columns, and/or merged cells, then it is considered to be a complex table. This type of table is much less accessible than a simple table as they are more difficult for screen reader users to understand. Also, in many cases, they are not correctly coded for accessibility.
You may need to learn some HTML (if you haven’t already) if you plan on using tables in your content – and to make sure that the table is compliant. Some tags you will need to be familiar with are:
- Table: <table> – Use this to define a table
- Caption: <caption> – Use this to include a brief summary of the table
- Header Cells: <th> – Use this to define the relationship with the data cells
- Data Cells: <td> – Use this to contain your general content
Note: Make sure to avoid any empty rows or columns if at all possible.
If you need help learning about tables, check out W3CSchools article on HTML Tables.
I do hope this article provided you with some insight into the need to ensure that your images and tables on your website are accessible. There are tons of resources available out on the web, so keep researching and keep learning!
Live Long Life Learner!
Content partially curated from SiteImprove’s Course: Accessibility for Content Contributors (Premium) and is not available for sale.