ThisIsInspired Magazine

ThisIsInspired will be taking the following seven weeks to explore the 7 Principles of Japanese Aesthetic Design in practical application. Any feedback or usage you’ve found beneficial would be great! Part One is the element Kanso – and we’ll be applying it here to accessibility.

Accessibility / Kanso (簡素)

Simplicity and/or elimination of clutter.
By definition (or at least in a the main sense) Kanso is when things are expressed in a simple, natural manner. Kanso helps us to think not in terms of decoration but in terms of clarity, the kind of clarity that may be achieved by removing non-essential stuff.

All designs can benefit from elimination of unnecessary clutter; Nowhere, though, is de-cluttering a site more important than in accessibility. This doesn’t mean going hog-wild and stripping the site down to plain text and headings, though. Common sense can go a long way in making a design easy to follow and making the information easy to access.

Accessibility isn’t necessarily a straight-up visual element in itself – at least not for the vast majority of us who have no disability or impairment. But for someone who is blind or motor impaired, the issue of accessibility is out in the forefront; and an accessible website is more beautiful than the Mona Lisa (okay I don’t actually think she’s all dat, but you do get the idea) to the (relatively) few people who can appreciate it.

An accessible website more beautiful than the Mona Lisa to the few relatively people who can appreciate it.

While it may not be something we can see or visualize, the principle of taking away non-essential items is important to accessibility – and the non-essential can include necessary items that become redundant in the user’s path through your website. This comes into practice, for example, in the following ways.

Practical Application

Providing a means to skip redundant components or navigation
Navigation should always be in plain, easily-reached view; but for example if the user is blind and the screen is being read to him in a robotic, Windows Eyes™-esque voice hearing the links read to him every. single. time. he loads a page becomes a frustration and he must either accept it or leave. After loading the page a couple times he knows where the links are and what they are. Give him a means to bypass them if he wants.

Providing simple, clear ALT attributes in image tags
Doing so aids accessibility by adding a simple description rather than simply leaving the attribute empty. Leaving it empty presents the image only as more clutter in the path of reading the information. The screen reader – if the user is visually impaired has has one – will announce the image whether it includes an ALT attribute or not. Remove the guesswork so he can focus on the material he’s after.

Make use of semantics in the content
Structural semantics, in web design, is laying out blocks of information – whether it’s text, tabular data or other media – in a way that can be understood within the whole. In the most simple sense this means use Header tags to identify key thought changes within the content. Making use of lesser Header tags (H4, H5 and H6) can greatly aid understanding, with the added benefit that even if we’re actually reading the page or just skimming we still get the sense of it.

Reducing visual clutter
Simplifying visual elements in a design has the added benefit of making the site easy to understand for all users, not just those with a disability. For example, many users may not be legally blind but still have trouble seeing. Removing extraneous items from a design can be a great boon to aiding the understanding of your average visitor.

Note: This doesn’t mean reducing everything to a finess-less page of plain text as (quite literally) some experts have done. Does the element clutter or compliment the content? A component of the design is not in itself clutter. Small visual details can round out a design as well aid general understanding of certain areas. If it clutters up the information being presented, find another way to make it work or remove it.

Simplification Is Better All the Way Around

The added benefit of this element of Aesthetics is it will also aid a site’s search engine ranking. Content that is well-structured, uses key headlines, makes good use of images and isn’t reliant on a visual cue is more easily read by search engines.

Simplified, structurally semantic design and content is more portable and extensible. Using a strictly XHTML & CSS layout, as an example, more closely resembles a portable format like XML, or even HTML 5. It will adapt better to different desktop browsers, adapt to browsers that don’t have Javascript (or have it disabled), and adapt better to differences in screen size. (although, it should be noted, there’s no replacement for having a version of the site created specifically for small screen sizes)

Simplification Is Not Oversimplification

All of this can’t be confused with oversimplification. Oversimplification can detract from a sense of place, not establish a sense of brand, and lack coherence which may impede understanding of content.

There’s a difference between the simplifying of a design to aid understanding and over simplification that may actually confuse the reader.

Know the difference between simplifying a design – which aids accessibility and readability – and oversimplification that can confuse readers by removing otherwise useful visual cues that can aid understanding or navigation.