Categories: Accessibility Posted: March 27, 2026April 13, 2026 by Ben Bogard Almost all images on a site should have alternate (alt) text. This purpose of this text is to describe an image with words to be read by a screen reader for users who have sight accessibility requirements. There are two types of images commonly rendered on a web page Inline images – Images coded directly into the webpage with standard attributes such as alt, width, height, etc. Image tag with appropriate text using the alt attribute Background images – Images rendered only with CSS and are not coded directly into the webpage and as such have no attributes including alt text. Element in CSS using a background-image property Empty alt text – It is important to note that an inline image can also be decorative and any inline image with an empty alt text attribute will be ignored by a screen reader. Image tag with an empty alt attribute and as such, the image will be ignored by screen readers Generally we favor inline images because we often convey content with them. We might use a background image for instances which are decorative only such as icons in buttons or menu items. Complicated images Since we often use images which convey valuable information (tables, maps, charts), we ask how to convey that information for those using screen readers. One limitation of screen readers is they will only read up to 125 characters (letters) before they move on to more content. A challenge we often run into is writing copy for images which can be loaded with information but we cannot explain the image in 125 characters or less. Two in one solution We created a conditional to pair with alt text functionality in our WordPress theme, Skookum. When we are given a block of copy which surpasses the screen reader threshold of a 125 character count, that content will instead render below the image. The image will also be ignored by screen readers and the content is next to be read but also hidden by those who do not need screen readers. Long alt text, still screen-reader friendly Here is an example using our custom ‘Image Zoom’ component where the ‘alt text’ is 171 characters. This amount will move the copy from the alt attribute and place it below the image where is can only be read by screen readers. The park is located at in the Ballpark district at the corner of Blake and 20th street. It is Northeast of Union Station and can be accessed at the Union Station bus stop. Here is what the final code looks like using the image zoom component above: Image tag with an empty alt attribute so it will be ignored by screen readers but longer text is the next element read. Appropriate alt text, still screen reader friendly Here is another example using the same component with appropriate alt text. Here is what the final code looks like using the image zoom component above: Since the copy for the alt attribute is less than 125 characters, it renders appropriately within the image tag In summary When writing content and considering images on a page, we must first consider if the images have contextual or decorative value. If the image conveys information such as a map, table, or chart, then writing text to convey that information should be considered. If that text extends more than 125 characters, then it will automatically be placed on the webpage only to be noticed and read by a screen reader. Although it is considered best practice for all images to have alt text, not all images need alt text. As we approach every web project and site uniquely, we must treat every image with the same level of intention. The dev team can help assess what images do and do not need alt text.