What is the purpose of using alternative text, or “alt” tags, in the design of an online document?
|
The most appropriate alternative text for an image depends very much on the context of the image in question. You must provide information for that image that takes into account its purpose and also the surrounding text on the page. The same image might need different alternative text depending on how it's used. Show
ExamplesLet's look at some examples of appropriate alternative text, using the same Harvard University logo in different contexts. Stand-aloneIn this basic example, we’re just using the Harvard logo to indicate that the page is associated with Harvard University. In this case, the alternative text should say something like "Harvard University logo." But if the logo were provided as an example of logo design, we might want to go further and opt for something like "Harvard University logo, featuring black, serif text and a red shield emblem", as in this example:
Inside a linkIt's a web-design convention to use a logo graphic as a link back to a site's home page. In this case, we would use alternative text that describes the action of the link. After placing the logo inside a link pointing to the home page, appropriate alternative text might be "Harvard University home page" or similar. A screen reader would identify that the image is also a link and say, "Harvard University homepage, link."
Inline with textIn rare occasions, an image of text might be used inline as a substitute for text. For instance, we might want to write "Welcome to Harvard University" using the logo instead of the words "Harvard University." In this case, we should focus on writing alternative text that stands in for the visible text within the logo, without adding any extraneous information—that is, you’d want the alternative text to just say "Harvard University". We wouldn't want a screen reader announcing, "Welcome to the Harvard University logo"! Welcome to Video: Adding alternative text to images in a WYSIWYG editor
'Alt text' is a contraction of 'alternative text'. It's a short written description of an image, which makes sense of that image when it can't be viewed for some reason. Well-written alt text is important to your website's accessibility, and its search engine optimisation (SEO). Accessibility SEO Because good alt text provides semantic meaning to, and a description of, an image, it's used by search engines to return search results. Thinking about
that in another way; good alt text gives search engines more – and better – information to rank your website with; so they'll rank it higher. The more thoughtfully and helpfully you describe all of your content to users, the easier it is for search engine robots to understand as well. Did you know … It's not just your website where you're in control of image alt text. You can also
add alt text to the images and animated gifs you upload to Twitter. Folks using assistive tech like screen readers and braille displays will have access to the written description. And if you’re not using assistive tech, you can still access the alt text by selecting the ‘ALT’ label, which opens the alt text in a modal box. It’s a nifty
little tool to improve accessibility (and searchability), which still doesn’t seem to be that widely used in the sector. Next time you’re about to tweet a visual – don’t forget the alt text! 🤓 Adding useful alt text to images is one of the easiest ways to make your website more accessible. But it's not necessarily an easy thing to get the hang of – and can even harm accessibility if done poorly. No alt text is
better than bad (i.e. annoying or meaningless) alt text. Here're some tips to help you get it right: 1. Be specific and succinct Describe the content of the image without editorialising. Say what you see – and don't make assumptions about ethnicity or gender; about what's happening out of shot; about a subject's motivations etc. One of the best suggestions I’ve heard is to think how you’d briefly describe the image over the phone. A few words will usually be enough; though sometimes a full sentence is necessary. Bear in mind that screen readers may cut-off alt text at around 125 characters, so best stick within that limit. (Errr, usually – have a read of the context caveat) 2. Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person
or a machine when something they're accessing is alt text. Imagine how frustrating it'd be using a screen reader on an image-heavy page, and having it read: "Image of the theatre" "Image of front of house area" "Image of exterior signage" "Image of the box office team" "Image of the auditorium" "Image of the stage" … arrrrgh! However it is good to help people understand context, so explaining the type of image – e.g headshot, illustration, chart, screengrab – can be useful. 3. Use keywords sparingly If, when describing an image, you can sensibly incorporate a top keyword or two: great. This will help with your SEO. But only when done truthfully and sparingly. Search engines can’t recognise contextually ‘bad’ (i.e. unhelpful) alt text; but you may be ranked-down for keyword stuffing. Google can tell! So, your primary focus must be to describe any images requiring alt text specifically and succinctly. 4. Include text that's part of the image Where text is included as part of an image, be sure to transcribe it as part of your description. Unless it means repeating yourself … 5. Don’t repeat yourself Alt text isn’t needed if it'd repeat what’s already on the page. For example, an adjacent caption. Or if an event 'image' is a heavily-designed title treatment and you’re already on the event page – no need to add the title of your show as alt text. Why? Because it’s already there in the page heading. 6. Don't add alt text to 'decorative' images 'Illustrative' images are things like photos of your venue, or press stills from a show. They help to convey information, in context. 'Decorative' images include things like page dividers, or brand graphics. They make things look nice, or visually break-up content on a page. They don't have any contextual significance or meaning, so won't help people understand the page better if given alt text. Ideally any decorative images should be included within your code rather than added as ‘content’. If they need to be uploaded as images, however, not adding alt text is fine – screen readers will simply skip over them, which is what we're after in this scenario. 🙋 The context caveati.e. when to ignore Tip #1 and add more detail When the main focus of your content is an image, and/or when the emotion conveyed by that image adds something extra to the content around it, you may choose to describe that image with longer, more detailed alt text. When an image is the main focus of your content: Some good examples of highly detailed alt text are NASA’s descriptions of images taken by the James Webb Space Telescope, which they shared on Twitter. These incredible, wondrous and complex views of the universe demand highly detailed descriptions. For example, this is only about one-third of the alt text for an image of the Carina Nebula: "The image is divided horizontally by an undulating line between a cloudscape forming a nebula along the bottom portion and a comparatively clear upper portion. Speckled across both portions is a starfield, showing innumerable stars of many sizes. The smallest of these are small, distant, and faint points of light." Conveying emotion through alt text: Images don’t solely give practical, specific information but can also convey
emotion. This is especially true within the arts. For example, describing a stage set, characters’ costumes, positions, and their facial expressions may not fully explain the image to someone who’s unable to access it. Is that a smile of joy and happiness? Or is it clearly masking a deep and desperate sadness? What emotions do you feel when looking at the image – and can they be (sensibly) translated into alt text? Being aware of context means you can allow yourself to write more creative alt text from time to time. But, while there are occasions that allow for more creativity than basic 'best practice' guidelines suggest, tip #1 – Be specific and succinct – still stands true most of the time.
Alt text examplesBad: We're zoomed-in on the face of a brown bear – sometimes known as a grizzly – gazing majestically into the middle distance. Perhaps she's hungry, or has spotted a threat? If you need to say this much, add it as part of the text on the page. Keep alt text short. And remember – do not make any assumptions. Bad: bear, brown bear, grizzly, grizzly bear, mammal, carnivore Read this aloud. This is not helpful – and Google won't like it. Okay:
Brown bear This is fine but you could describe the image more clearly. Good: Close-up of a bear's face This gives a clear understanding of what's in the image within just a few words, and makes no assumptions. (I'm not totally sure what type of bear this is 🤷)  Bad: Sign This is really unhelpful – what does 'sign' mean? Is it an instruction to add a signature? Sign language? A star sign? Having no alt text would be better than this. Bad: takeaway, take away, fish and chips, fish, chips, shop, food, fast food Stop keyword-stuffing! Okay: Take away sign Not bad, but could do better … Good: "Fish & chips take
away" sign A clear description of the image, including text from the sign but without going into excess, unhelpful detail. We don't need the additional text "Also many other food and drinks" in order to clearly understand the image. Bad: House plant on a window sill What's wrong with
this? It's descriptive, clear, short … ? It's repeating the caption – no need! Good: {nothing} With a caption that describes it nicely, no alt text is good alt text for this image. Interested in further improving the accessibility and inclusivity of your website? You may like our popular article, How To: Write Great Web Copy. We also have a handy collection of free Access Resources 🧡Like what we’re talking about?Join the Mailing List Related Posts
What is the purpose of adding alternative text alt text?You can create alternative text (Alt Text) for shapes, pictures, charts, SmartArt graphics, or other objects in your Office document. Alt Text helps people with visual impairments understand pictures and other graphical content.
What is the purpose of alt tags?The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Tip: To create a tooltip for an image, use the title attribute!
What is the purpose of adding alternative test alt text to an image in your document?Just as you would do for a web page, all images on your documents must have a text alternative. This is to enable visually impaired people using screen readers to understand what the image is.
What is the purpose of adding alternative text to an image in your document Linkedin?You can add alternative text (alt-text) to the images you share on your feed or embed in articles. This allows members using voice-over screen readers to understand what's in the image (alt-text won't be visible to members not using screen readers).
|
