World Design Day: Can accessibility and attractive design go hand in hand?

World Design Day is celebrated on April 27 on the initiative of the International Council of Graphic Design Associations. The aim is to pay tribute to all those who work in this discipline.

The graphic designer is a professional who works to receive all the necessary information and then translate it as visual communication, without the need for words. In this way it transmits specific messages by using the graphic.

The transformation of graphic design has gone hand in hand with technological development. New methods have been imposed on the use of traditional ink and typography. Analog systems have gradually been replaced by digital ones. Today, the computer is the basic and main tool of the designer.

Several studies have shown that users create the first impression of a web page
through its image, that is, by direct influence of web design. Graphic design and creativity have become key aspects in defining a company’s visual and corporate identity.

The design and layout of a website are what allow the user to get an idea of ​​the company and that it conveys confidence and credibility. A corporate website should explain the mission, vision, goals and values ​​of the company and should impress its potential customers from the outset. In addition to making a good impression, the website must take into account usability, be active and up to date, have a high loading speed, be optimized for good web positioning and function properly. On top of all this, it is imperative that the website be accessible to everyone and accessible does not mean boring, simple or with little color and no innovative elements.

Accessible and usable design is essential for visually impaired people, the elderly, those with autism or cognitive disabilities or comprehension problems among other profiles. It must also be taken into account so that the web is properly displayed in different browsers, devices and lighting situations, etc. but all this does not mean that we have to create an uncreative and unattractive website

 

Elements to consider when designing an accessible website

The contrast of colors
When creating a design one of the first decisions is to choose the colors. Does that mean we will have to design in black and white or always with the same colors?
Not at all.
Special account must be taken of criterion 1.4.3 of the Content 2.1 accessibility guidelines:

Contrast (minimum): The visual presentation of text and text images must have a contrast ratio of at least 4.5: 1, except in the following cases: (Level AA).

• Large text: text with large typefaces and text images with large typefaces must have a contrast ratio of at least 3: 1;
• Accidental: text or text images that are part of an inactive user interface component, that are simple decoration, that are not visible to anyone, or that are part of an image that contains other visual content significant, they do not have a minimum contrast ratio.
• Logo: The text that is part of a logo or brand name has no minimum contrast requirement ".

Special care must be taken with shades of grays, oranges and yellows, but this does not mean that there are forbidden colors.
Criterion 1.4.3 only covers "visual presentation of text and text images" and criterion 1.4.11 complements it, as contrast is now also necessary for:

• Icons (not with text)
• Graphics, for example, each of its lines
• The keyboard focus indicator

Sufficient techniques for graphics are: that the contrast between the colors is sufficient as well as the contrast of the lines between adjacent colors.
Sufficient techniques for graphic texts are: to include labels and values; that the images that convey information and the texts in the graphics have sufficient contrast; or that there is a control with sufficient contrast that allows users to switch to a presentation that uses sufficient contrast.

 

How can the minimum contrast be checked?

A useful website to do this is: Webaim color Contrast Checker others.

• Don't just depend on color

There are people who cannot see or distinguish colors. For this reason it must be borne in mind that not only will it be possible to transmit information through it. Example: a calendar with days in red and green depending on whether an establishment is open or closed must also have a symbol (asterisk or any other) to distinguish the difference.

• Orientation, consistent navigation and placement of the elements

Care must be taken when designing the pages so that the elements follow a similar placement and facilitate consistent navigation. Also a logical reading and a header structure, and so on. That allows to understand the hierarchy of the contents.

• Font text, size and type

Although later in the layout and programming it will be necessary to ensure that this can be extended, the font must have at least 10 points although this may vary depending on the type of font used. It is recommended to use Serif and Sans Serif style fonts. Headings must have a font at least 20% larger than the text. Excess capitalization should be avoided.

Lines should be neither too short nor too long and spaces should be left between paragraphs and around headings. Using text instead of images helps make the page load faster, plus it can be read without problems from devices used by people with disabilities and can be translated more easily. The text must be able to be enlarged without losing content or functionality by at least 200%.

• Links

The links should be differentiated from the rest of the text, and preferably not only with the color, but other resources such as underlining. You need to think that contextual information from links is important. Avoid texts like "Here" or "+ info". The user must be informed at all times where the links they click on lead to. For example, when a link opens in a new window it can be achieved using an icon adjacent to the link.

• Breadcrump and link to jump to main content

It is important to inform the user about their location within the website through a breadcrump
(also called Ariadne thread) and there should always be a link to the main content at the top of the page that may be hidden, but when keyboard users hover over it will need to be visible.

• Form controls

Form controls must have descriptive labels and instructions.
Attention must be paid to the contrast of the outline or visual boundaries of a form or button field, as long as it is not disabled.

• Include careful animations, videos and audios

If you decide to include a carousel, for example, you should think that in the design there must be a button to stop the movement of this or any other element that moves in the event that the movement is automatic.
The video or sound player included must contain a good contrast in all its elements, including the visual indicator of the current value in a slider.
The minimum controls you need to have are: buttons to play, stop, choose volume, fast forward / rewind, turn on subtitles and turn on audio description.
Blinked items must have a maximum duration of 3 seconds and must also be able to be stopped or disabled when refreshing the page.

We recommend that you consult the good practice guide for crrating an accessible web design (Brief guide for web designers) that we wrote for Barcelona City Council.

Need help designing an accessible website?

At TOTHOMweb we are specialists in accessibility. We design and develop web pages
accessible, responsive, modern and attractive.

We offer a complete service
PLANNING> DESIGN> DEVELOPMENT> MAINTENANCE

Contact us and we will help you achieve this.