Colors and Graphics in accessible Design

Color design is also part of accessibility, as is alternative text for images. Even if many visually impaired and blind people perceive colors only poorly or not at all, one should not refrain from using colors for information architecture. On the contrary: when used correctly, colors increase user-friendliness and accessibility.

Article Content

Colors in Design

The crux of the matter is: Colors must not be used as the only feature. We remember the multi-channel principle, each piece of information should be conveyed in at least two ways.

What does that mean? All functions of the website should also be usable when the user sees the website in black and white or shades of gray. Imagine a form that has been validated on the client or server side and encountered some errors. The error message appears: "Please correct entries in the red fields", the correct fields are highlighted in green. The blind fails completely here and so does the color blind. For example, one way would be to mark correct fields with a green tick and incorrect fields with a red X, embedding the symbols via HTML with correct alt text.

Some people are sensitive to bright colors, so use them sparingly. This also applies to content that has been integrated from other websites and also to advertising banners.

Graphics and images are part of the design of a website. Graphics make it easier to understand the website functions, images break up the text and can improve comprehensibility.

The understanding of graphics - that is, schematic representations or diagrams - must also be learned. This process is often more intuitive than learning to read, but still requires some cognitive effort, also known as visual literacy. Anyone who sets about creating graphics should approach the task as professionally as a copywriter. Graphics must be understandable from the perspective of the potential viewer. This means, for example, that comprehensibility is more important than aesthetics, colors or three-dimensional representations should be used sparingly and omitted where they make understanding difficult or misleading.

By graphics we want to understand everything that was created with the computer: for example with drawing programs. Images, on the other hand, are brought into the computer from external devices: mostly with a digital camera or a scanner.

Raster and Vector

Regardless of this, there are two types of graphics in the computer field: the raster graphics and the vector graphics. Vector graphics are all content that is generated by the computer itself: for example letters, icons and other geometric shapes. They are based on mathematical formulas, so they can be enlarged without loss of quality. Raster graphics consist of pixels, which is why they are also referred to as pixel graphics. Pixel graphics are all content that comes into the computer via external devices, i.e. primarily photos or scans. They consist of individual picture elements, the pixels. Pixel graphics become blurred as soon as they are greatly enlarged.

If you are a bit confused now, the graphic type can be distinguished by the file format. I can create a chart in Excel. As long as I'm in Excel, I can change the chart any way I want, so it's vector graphics. Now I save the graphic as PNG to embed it on my website, it's already a pixel graphic. On the other hand, I could also vectorize a raster graphic, for example with Inkscape. It doesn't look that great, but it's still a vector graphic.

Raster graphics are predominantly used on websites because all graphical browsers display them without hesitation. GIF, JPG and PNG are the most popular file formats. Vector graphics are mainly used in dynamic applications such as map services, for example OpenStreetMap. Well-known formats are Flash and the open Scalable Vector Graphics (SVG).

Of course, there is also content that is generated on the client side - i.e. by the browser - via HTML, CSS or JavaScript. For example, with CSS3 you can create color gradients, HTML5 has the canvas element with which two-dimensional drawings can be created. These are also vector graphics, they are generated by the computer and can be changed using the parameters.

Marked graphics

There are basically three attributes that can be used to describe the image tag:

  • alt = alternative text
  • , long desc = long description
  • title = title

There is still the caption, but it is placed as normal text below the image and is easily visible to all users.

Alternative texts are now almost standard and are mainly used by blind screen reader users. The alt text is also displayed when no images are displayed for some reason. Some smartphone users, for example, switch off the graphics display to speed up the loading time or not use up their volume plan too quickly.

The title appears when you move the mouse cursor over an image. It can especially help the visually impaired who cannot see what is in the picture. It may seem strange, but it's actually true: if you know what the object is, it's easier to recognize it.

The long description is rarely used in practice. It will probably be abolished in HTML5. I can't think of any case in which a long description of pictures could only be useful for blind people. Any information that might be helpful for understanding should be conveyed in the body text or as a caption so that it is of benefit to all users. Complex diagrams such as causal diagrams become easier to understand even for non-professionals if they are explained in detail.

As an example, let's take a tutorial that describes how to create a table of contents in MS Word. Screenshots are usually used in such instructions. The instructions would be accessible for the blind if they can be understood without these screenshots. The alternative text for the screenshot would have to describe which function is called or how to get to this function.

The alt text and title text can be identical because the screen reader only reads one of the attributes and the other users do not see the alt text. The caption, on the other hand, should contain other, ideally detailed information. It can also be used for copyright references.

Four uses of images

There are four different uses of graphics/images on websites:

  • ▪Placeholder
  • ▪decorative images
  • Content images
  • Functional graphics

Content images are part of the editorial work and have already been dealt with in another section. Web designers and developers take care of the rest.

Place Holder Images

Placeholder graphics are small invisible images. They are mostly 1 pixel in size and are used to stabilize a layout table. Tables were and are sometimes still used to position elements. Empty table cells are problematic for some browsers, so they are stabilized with invisible thumbnails. They are often tiring for the blind because their software reads out the file name, which is often meaningless. This disturbs the orientation on the page. Placeholder graphics can be given an empty alt attribute, in which case screen readers will ignore them. Under no circumstances is an alternative text such as "placeholder" useful.

Overall, placeholder graphics are considered bad style and should be banned, as should layout tables.

Decorative Graphics

Decorative graphics are used to make the site more attractive. There are almost always graphics that appear on every page of a website and are always in the same position there: banners, logos, background images...

These graphics are extremely useful: they should reveal at a glance whose website you are currently on, increase the recognition value immensely and therefore provide security and orientation - useful for people with learning difficulties or older people. For example, it rarely makes sense to have a brightly colored website if you're a doctor, except for paediatricians. Anyone who has been on the web for some time can often tell right away whether it is more of a medical site, a banking site or a news service, without having read the text.

Graphics should behave as expected. Logo and banner are usually linked to the start page, other graphics are not further linked. Short alternative texts and titles are useful for decorative images if they are linked. Otherwise, they should get an empty alt attribute because they don't contribute to the functionality of the website.

Functional Graphics

Functional graphics are graphics that have a function associated with them. They are used on practically all websites, the printer symbol for print functions and the RSS symbol are well known.

These icons are extremely catchy because we already know some of them from other contexts: the desktop applications, where they are used extensively by normal-sighted people and mouse users.

With the exception of the blind and severely visually impaired, these graphics benefit virtually everyone if they are well chosen and catchy. They turn a complex interaction with the website into a simple and intuitive process. Otherwise, each function would have to be written out as a word, which is really confusing. Functional graphics make it much easier for people with learning difficulties to use the site.

Because more and more programs are also offered on the Internet, web applications are subject to similar requirements as desktop programs. The main challenge here is to closely follow the desktop applications without violating any existing copyrights, because your own icons are too similar to the function graphics of another program.

Choice of symbols

In order to be able to use a symbol, it should be sufficiently well known. Web designers may put a lot of energy into a prettier shopping cart metaphor. However, this is only useful if the function “Save goods to a clipboard in order to order them with other goods when completing the ordering process” becomes clear to the USER. This extensive functional description makes the sense of this simple metaphor of the shopping cart clear. Instead of giving long-winded explanations, anyone with a little e-shopping experience understands what the creator of the pages with the shopping cart symbol wants to tell me.

The size of the function graphs

It is immediately obvious that every graphic must be large enough to be clickable with the mouse. The graphics must be spaced a certain distance apart and they should be easy to see and click on at normal resolution on a medium-sized screen. It goes without saying that they should be accessible via the keyboard using the Tab key. For people with motor difficulties who work with a mouse or a special input device, small graphics with a small click area are annoying. Either the mouse has to be guided precisely or an incorrect action is carried out. Frustrations of this sort are sure to turn even the most patient user away from the site.

as short as possible, as concise as possible, as clear as possible

What I said in previous posts applies here. Blind people need the alt attribute, all users need the title in order to find out which function is hidden behind the graphic when using the mouse. A letter icon could be a comment feature, a letter to the editor offer, or an email form. The same always applies to function texts: as short as possible, as concise as possible, as clear as possible.

The descriptive text of a function graphic describes its function, never the appearance of the graphic. A description such as "Black triangle pointing to the right" as in the web analysis software eTracker can still be deciphered with difficulty, but it is still unnecessary effort.

Less - but better

Not every graphic is also an enrichment for the website. A few years ago, it was fashionable to offer dozens of social bookmarking services. Many of them were practically meaningless in Germany. On the other hand, the icons were so small that they were difficult to click on.

Especially with function graphics, you should always consider whether they are actually needed at this point in this form. For example, does it make sense to offer a Like or Twitter button directly below the headline of a text? The person concerned would first have to have read the text in order to consider it to be recommendable. Contrary to other opinions, a high number of likes does not increase the quality of an article.

Further reading