Effective alternative (alt) text is essential to web accessibility and usability. Alt text is non-visual text read by screen readers that informs people with vision impairments of the contents of images and other non-text content. <\/p>\n\n\n\n
Web development teams must ensure their alt text (or lack thereof) will not interfere with screen readers\u2019 abilities to read non-text content accurately. <\/p>\n\n\n\n
Here are some common mistakes to avoid when writing alt text and strategies to overcome them:<\/p>\n\n\n\n
alt<\/code> attribute<\/h2>\n\n\n\nWhen developing websites and mobile apps, include an alt<\/code> attribute for each graphic. A screen reader will often attempt to read the image’s filename if there is no alt attribute. This will likely make no sense to screen reader users and can even be distracting in many cases. <\/p>\n\n\n\nIf the image is decorative (meaning the image adds no meaning to the page or if the image\u2019s meaning is described in the surrounding text), the image should have an empty alt attribute (alt=\"\")<\/code>. <\/p>\n\n\n\nIf the image’s meaning is essential and not described elsewhere, it must have an alt attribute that accurately describes it.<\/p>\n\n\n\n
Don\u2019t use \u201cimage of\u201d or \u201cgraphic of\u201d<\/h2>\n\n\n\n
Avoid using \u201cimage of\u201d or similar phrases when writing alt text. Screen readers will automatically inform users of images, so using the word \u201cimage\u201d or something similar in the description is redundant. <\/p>\n\n\n\n
For instance, a screen reader will say, “Image: Image of Allyant logo.\u201d If written correctly, it will simply say, \u201cImage: Allyant logo.\u201d<\/p>\n\n\n\n
However, it can be helpful to indicate the type of image in the description. For example, you could include \u201cScreenshot of\u2026\u201d or \u201cIllustration of\u2026\u201d as part of the alt text.<\/p>\n\n\n\n
Keep descriptions short and simple<\/h2>\n\n\n\n
It is a best practice to make image descriptions as short as possible so screen reader users will not have to listen to overly long descriptions. Make sure to give enough detail for screen reader users to understand visual content but not too much detail. <\/p>\n\n\n\n
Although there is no specific limit to the number of recommended characters in alt text descriptions, Allyant recommends aiming for a maximum of 120 characters whenever possible. For many images, though, only a few words are necessary to accurately convey the image’s meaning. <\/p>\n\n\n\n
When describing an image of a woman sitting on a park bench, for example, it is better to write something simple like \u201cwoman sitting on a park bench” than describe the bench, the scene, and the other specific details (unless that is necessary to understand the image\u2019s context). <\/p>\n\n\n\n
Also, be sure to use plain language so that descriptions can be easily understood.<\/p>\n\n\n\n
Put important info first<\/h2>\n\n\n\n
Content and development teams should add the most essential information at the beginning of the alt description. This ensures screen reader users do not have to listen to unnecessary details to understand the image. Putting the important information at the beginning of the description is especially helpful to experienced screen reader users but is also a best practice in general.<\/p>\n\n\n\n
Avoid promotional language<\/h2>\n\n\n\n
Content and development teams should avoid, or at least minimize, promotional language when writing alt text. Alt text should only describe what is in the image and not be used to promote a product or service. <\/p>\n\n\n\n
For instance, alt text for an image of a person using a new product should only be something similar to \u201cperson using (product name).\u201d The new product can be described in more detail in the surrounding text, not in the alt description. In most scenarios, the text will be included in the page content, which creates redundancy for screen reader users.<\/p>\n\n\n\n
Include descriptions when in doubt<\/h2>\n\n\n\n
If you\u2019re unsure whether an image needs an alt description, always include a description as a default practice. It is much better for screen readers to read unnecessary descriptions for decorative images than to have an empty alt attribute that screen readers will skip over for potentially meaningful images and page context. <\/p>\n\n\n\n
Screen reader users may have to listen to more words than needed, but adding descriptions will ensure they get all the meaningful content.<\/p>\n\n\n\n
Do you have any questions related to Alt text?<\/h2>\n\n\n\n
We have a wealth of experience with alt text and an accessibility tool explicitly built for assessing website alternative text in real-time for our clients, so don\u2019t hesitate to reach out<\/a> with any questions. <\/p>\n\n\n\nRemember that alt text is subjective, and there is no perfect way to write alt text. Two people might have different opinions of what\u2019s meaningful in an image. However, refer to these guidelines and best practices when creating alt text.<\/p>\n","protected":false},"excerpt":{"rendered":"
Effective alternative (alt) text is essential to web accessibility and usability. Alt text is non-visual text read by screen readers that informs people with vision impairments of the contents of images […]<\/p>\n","protected":false},"author":12,"featured_media":89175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[96,97,80,79],"class_list":["post-89158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-alt-text","tag-alternative-format","tag-web-accessibility","tag-website-accessibility"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t