Visuals are key to design but what if you are designing for the visually impaired? How do you handle images and icons? How do you make sure that all information you give is accessible even for the visually impaired?

The images used in your digital support should be as accessible as possible. Apart from being readable by the VIP’s assistive technology, they should also take into account the following points:

• Images with text on it often are magnified by VIPs. A common consequence is that they get pixelated; consequently on unreadable texts. That is why using real text if possible is better than using text on images.
• Provide alternative options as audio when the image cannot be explained with text like in CAPTCHAS.

Use of alternative text

Regarding the use of alternative texts that describe the image when voice over technology reads it, is useful to have a look at the article Alternative Text at Web Accessibility in Mind. According to it and other references that are listed in the literature list chapter, the alternative text attribute in images should function as it follows:

• Every image should have an alternative text attribute with a description of what the image wants to explain, not a visual description of the image. In other words, the alt text should explain the content and the function of the image. In order to write an appropriate alternative text, it should take into account the context and should avoid expressions like “an image of…”, “a graphic of…”. It should also be brief and concise, usually, a few words are enough. If the alternative text provides the same information as the surrounding text does, then leave the alt attribute empty, like this: (alt="")
• Images with no relevant content or decorative ones should have a null alternative text, again like this: (alt="")

(siteimprove.com), 2018

Images that are links should never have the alt attribute empty. Otherwise, screen readers will relate nothing, the image file name or URL. Not using “a link to..” or similar expressions is recommended.

In the example below we have two different ways to publish an image that links to an URL. In the left example there's no text underneath the image. We added an alt-text to the img to make sure that the screenreader will tell a VIP what the image links to. In the right example we have the explanation of the link underneath the image, so we don't have to put an alt-text in the image. If we would, the screenreader would repeat itself.

• In images with relevant text on it, usually, the alt attribute is the same as the one on the image’s text.
• Do not use graphics that contain text. In those cases, use regular text or HTML tables.
• Buttons that are images should describe the function of it in the alt attribute.
• Maps that are images should be client-side image maps and not server-side image maps, as the hotspots in these last ones are not accessible by just using the keyboard. Therefore, the alternative text for client-side image maps should describe the general content of the whole map. While each hotspot that is clickable should describe the specific function of it.
• Image slices are large images that are sectioned into diverse fractions that usually are essential parts of the same content. In these cases, the biggest image slice is used to describe the content of the alt attribute. If the image slices contain a link, add it to the alt text.
• Background images should not have any relevant content or function on it as it is not possible to add the alt attribute to CSS.
• If using the logo of the company as a way to the home page, the alternative text for that should narrate the name of the company.
• Graphs and charts should also contain an alternative text attribute describing the general content of the image. However, if they are too complex is recommendable to add a link that will lead the user to the web page with a more detailed description of the graph or chart.

For a more detailed information please visit webaim.org

Visual Maps

When designing for VIPs, we need to think of maps as more than just the visual reference of the road. Maps are visual representations of environment that communicate information ^{(Lloyd, 2000)}. To plan a way, you need a starting point, final destination, description of the way and the environment. The various levels of visual acuity influence the detail of information required to describe the surroundings. The less disabled people might be able to navigate with use of google maps. However, we suggest considering adding a dynamic colour palette and magnifier tool, because it enables users to pick a colour combination and contrast, that is best readable for them. For users with higher acuity, it is necessary to make representations of the areas. The use of simplified landmarks or custom checkpoints might be a good idea. It should be upon a user to decide if they want to see instruction about the next step of the overview of the full situation. Either way, the switching/zooming between these two options should be possible.

Cognitive Maps

Not all users have enough residual sight to use visual maps. Therefore we need to shift thinking about maps as of a visual representation of space to a cognitive or mental image. A map is then instead of a set of instructions, descriptions and options that provide the user with enough information to make a sufficient idea of his/ her surrounding and the planned route. Except being short, brief and exceptionally clear, these guidelines need to be conveniently memorable. Research that was done by Joshua Foer ^{(Joshua Foer, Moonwalking with Einstein, 2011)} suggests that people are more able to remember information when it is related to space. The memorisation is also supported by connection with something extraordinary. Foer encourages to go to the limits of one's fantasy to create a truly bizarre idea.

When you want to use icons on your website, it's a good idea to check out FontAwesome.io. FontAwesome has a large collection of icons that you can use for all your projects. A big plus in these icons is the fact that they're scaleable, easy to use in HTML and made with accessibility in mind:

Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. It's important that we create and use them so that they can reach the largest amount of people possible.

(FontAwesome.io)

<i class="fa fa-fort-awesome" style="font-size: 8em"></i>
<i class="fa fa-eye" style="font-size: 5em"></i>
<i class="fa fa-gamepad" style="font-size: 2em"></i>
<i class="fa fa-newspaper-o" style="font-size: 1em"></i>
As you can see in the example above, it's easy to change the size with font-size. Because HTML & CSS think the icons are a part of the text you can change the size and color just as easily as it is for text. If you change the textcolor in the preferences pane on the left, you'll see that the icons will also change.

When designing your own icons, you have to keep in mind that they should be scaleable. With vector icons you can upscale them to whatever size you want without having to worry about losing quality. Icons are usually meant to be simple, but especially when you're designing for VIPs it's good to keep the amount of detail as low as possible.

A last thing to remember is that icons are also images. When a completely blind user visits your website you have to make sure that, if the icons are important, you give them an alt-text for the screenreader to read.