Accessible Info in Web Design

Accessible web design... This is truly a hot topic and rightly so. Clear, concise and honest info is key to all parts of our daily lives, our education and well-being. As more of our life moves to web and online, we need to obtain info fast. Much in the same way that a red light tells us to stop in an instant, access to info can even be the difference between life and death. Furthermore, misinformation, and the way in which it's shown, may even cause us harm.

When web designing, a flashy banner at the time might seem like a great sales device but it can be fatal to a user who suffers from seizures. So how can we think smart and design in support of accessibility, whilst also safe-guarding against the risks posed?

Web design should be accessible to all users, regardless of a disability, and each user case should be able to decipher and interpret the information presented.

Braille, used for communicating print, is a perfect example of how adapted design can serve a disadvantaged audience. The process was used as far back as 1824 to engage and educate those with sight difficulties. This key advancement enabled people to read books and signage by touch of hand.

A Guide for Web Design

In the current age, The World Wide Web Consortium help to guide on the subject of accessible web design. Through the Web Content Accessibility Guidelines (WCAG) 2.0, they attempt to frame accessibility into a comprehensive format. The unenforced rules and best practices provide a guide to accessible web design and many designers turn to these for advice when making design choices. The scope is split across four key areas.

• Robust
• Perceivable
• Operable
• Understandable

"by eliminating all 3-per-second flashing over any area of the screen, the chances of a person having a seizure are further reduced" W3C

Their full recommendations, for accessible design, can be found here.

A brief and concise version of the design guides can also be found here.

Perceivable
Covers a range of factors to aid perception and support meaning and understanding.

Operable
Developed criteria based on functionality, ease of navigation and visual safety.

Understandable
Developed recommendations for presenting understandable content and honest and precise navigation options.

Robust
To promote applications that utilise current technology and consider future advances.

The World Wide Web Consortium define five categories of disability:

• Visual
• Auditory
• Cognitive (learning and neurological)
• Motor/physical
• Speech disability

Simple Accesible Web Design Considerations

Some basic examples of how accessible design are commonly applied include:

Contrast of Colours
Is the foreground a suitable contrast to the background and can text be easily separated and read?

Alt Text
Used as a text description of an image. A visual depiction can be translated to an auditary equal for people with a sight disadvantage. Usually deciphered by screen reader software.

Text Size

By using a high font size, contrast is increased. This allows for a greater range of colour options. Inline with WCAG 2.0, we know that a text size of 18pt or 14pt (when bold) is ideal for a lower contrast in colour. However, this theory may vary relative to the choice of font. A higher point size may be needed for a thin font. Small body text should have a strong contrast of colour. This will compensate for a lower scale contrast.

1 CSS3 point size equals 1.333px. Therefore, 14pt and 18pt would equate to 18.5px and 24px in size.

Colour

Web designers often use colour to warn or alert users and help guide users through a flow or process. This is often evident in forms. e.g ‘Errors are shown in red’. Furthermore, links may be shown in different colours to indicate a link to other content. Where possible, the WCAG advise to create an alternative text cue to act as a fall-back. To again draw parallels with a traffic light example, we can see the uniform use of order as an alternative cue for people with sight difficulties. A top light equals stop and a bottom light signals go.

W3 report that an estimated 1 in 5 of the general public have some kind of disability.

Uniform Order and Trust in Patterns

Uniformity. To use the traffic light example once again, what if the order of colours differed for each traffic light we encountered. A break in uniform order may create strong problems for not only those with limited sight but also wider users that rely on order and whom trust common patterns.

On a web site we commonly see layout order patterns in a similar way to the above example. A navigation is usually placed at the top of the page alongside a logo. This tends to be followed by page content which is then followed by a footer. However, we creative designers like to break rules and often push out from a standard pattern like this in a quest for originality. Arguably, such actions could compromise trust, usability and a lack of uniformed order and should be done with caution.