Accessible Images
Transcript:
Hello, I'm James, Today I'll be talking about making your web content more acessible. In the excitement of creating and sharing content, we don"t always stop and think about how accessible that content is, especially for those in our audience woho experience the web differently, due to disability.
MAny people with visual impairment or reading difficulties rely on screen readers to help them make sense of a very visual online world. Today I'm going to talk about images, and how to make images sdcreen-reader friendly.
Here is a view of my blog. as you can see it has a lot of visual elements on the screen, but what if i were to turn images off and look at only the text outputs of the page, or what would be scanned by a screen reader. here we can see all our images have been replaced by this text here. a screen reader would describe it as:
*screen reader reada alt text
So where does this text come from? This text is the alt-text attribute of your image. in pure html it looks like this. in many html visual editors it will come up with an options dialogue to enter this text.
so what should we write in this alt text field? should it be the file name? should it be the name of the image? these both describe the image, in a way but the best thing to write in this field is a description of what's in the image.
Now don't go writing an essay on every detail of the image. you only need to describe the image in its context. for example this image here is a picture of a jar of Kombucha but for the alt text I'll describe it as Kombucha SCOBY added to sweet tea in a jar. I have given anyone who cannot see the image an idea of what it is, but also an idea of what it means.
so what about images which have no meaning? images purely for decoration? in these cases you'll leave the alt-text attribute blank. the screen reader will ignore it.
So to some up, always write your alt text for every image unless it is purely decorative. describe your image consisely and give it context. and remember, keep your media inclusive