5 Steps to Extra Inclusive Web site Design

Some key methods that will help you supply a extra inclusive web site design expertise for folks with dyslexia, imaginative and prescient, listening to and motor impairments.

Google describes accessibility best when it says “everyone should be able to access and enjoy the web”. It additionally says “we’re committed to making that a reality,” which ought to let you know sufficient concerning the significance of accessibility from an website positioning perspective. Earlier this 12 months, we outlined accessibility as one of the most important design trends for 2020, referencing new regulations that each one web sites want to satisfy by 23 September 2020.

Nevertheless, the precedence with this design precept is at all times making the online extra usable for folks with a various vary of capabilities; imaginative and prescient, listening to, motor, neurological and extra. So, on this article, we’re taking a look at 5 key steps you’ll be able to take to supply a extra inclusive web site design for all customers.

#1: Observe textual content and structure pointers for dyslexic customers

dos and donts for users with dyslexia


According to the Dyslexia Association of Ireland (DAI), as much as 10% of net customers might have dyslexia. Separate studies have proven this determine could be considerably larger amongst audiences outdoors of Europe (the worldwide common could also be as excessive as 15-20%).

Dyslexia can have an effect on the best way the mind interprets visible and audio info nevertheless it’s indirectly associated to the performance of the eyes and ears in the identical approach imaginative and prescient and listening to impairments are.

Designing for customers with dyslexia places a robust emphasis on making textual content as readable as doable. You will discover a list of best practices on the British Dyslexia Affiliation’s web site – they’re all good design rules on the whole:

  • Guarantee textual content is massive sufficient
  • Use robust distinction
  • Use responsive font dimension items so customers could make textual content bigger
  • Use sans serif fonts
  • Use daring font kinds to emphasis textual content (simpler to tell apart than italic or underlined textual content)
  • Maintain sentences and paragraphs comparatively brief
  • Maintain language comparatively easy
  • Use loads of white house
  • Use font kinds, dimension and writings to make textual content distinguishable
  • Use bullet factors

Whereas a number of the finest practices present particular percentages for font sizes, letter spacing and different proportions, it’s laborious to discover a advice made by the British Dyslexia Affiliation that isn’t of profit to all customers. Clear, easy-to-consume content material is a primary precept of UX design and all of us discover ourself in conditions the place content material is tougher to eat – a loud bus, for instance.

#2: Ramp up the distinction for color blind and visually impaired customers

dos and donts for users with low vision

According to Colour Blind Awareness, 4.5% of the British inhabitants is color blind and this determine rises to 8% for the male inhabitants. Most often, people who find themselves color blind can see issues clearly however are unable to see sure colors in the identical approach different folks do.

“Most colour blind people are able to see things as clearly as other people but they are unable to fully ‘see’ red, green or blue light. There are different types of colour blindness and there are extremely rare cases where people are unable to see any colour at all.” – Color Blind Consciousness

In the meantime, the NHS says there are almost two million people in the UK living with sight loss – roughly 360,000 of whom are registered blind or partially sighted. In different phrases, nearly all of folks with imaginative and prescient impairment can see to some extent.

One of the necessary design rules for folks with low imaginative and prescient and color blindness is distinction.

example of contrast colours

Recommended For You Webcast, March 11th: How to Boost Retention and Monetization with Customer Engagement
Register Now


One other key tip is to keep away from counting on color alone for contextual that means, like pink and inexperienced textual content or background colors for type validation. On this case, it’s best to add symbols to strengthen the that means and at all times take into account the distinction of textual content colored backgrounds.

Likewise, ensure you embody labels in any occasion the place customers are anticipated to pick a color, reminiscent of shopping for garments on-line, customising a dashboard or creating their very own character for a recreation.

Detailed steering on accessibility requirements for people with low vision is obtainable at W3C.

#3: Optimise your code for display screen readers

dos and donts for users with screen readers

Blind and critically visually impaired customers typically depend on display screen readers to navigate the online and interact with content material. These units convert textual content into synthesised speech and supply context concerning the parts on a web page.

Listed below are some steps you’ll be able to take to optimise for display screen readers:

  1. Alt-text: Present descriptive alt-text for each picture in your web site.
  2. Use ARIA attributes: Describe the “role” of web page parts through the use of ARIA attributes.
  3. HTML language: Outline the language of your web page through the use of the HTML lang attribute in every web page.
  4. Use Semantic Parts: Semantic Elements in HTML present primary contextual info for display screen readers (and engines like google).
  5. Hyperlinks: Maintain the textual content in hyperlinks comparatively brief however massive sufficient to intention for and click on.
  6. Construction: Observe web page construction finest practices (loads of h2 and h3 tags), as that is essentially the most appropriate format for display screen readers and their customers.

If you wish to perceive what it’s prefer to depend on a display screen reader, check out this excellent Smashing Magazine article by Chris Ashton.

#4: Cut back clicks for folks with motor impairments

dos and donts for users with physical or motor disabilities

We frequently hear about optimising web sites for folks with imaginative and prescient impairments however motor disabilities and impairments don’t at all times get the identical type of consideration. A motor incapacity is any situation that impedes sensation, motion or coordination. These could also be the results of situations like cerebral palsy and a number of sclerosis or trauma accidents, reminiscent of limb loss or spinal accidents.

Accessibility for motor impairments is an enormous and sophisticated subject, partly because of the big selection of situations concerned but in addition the extent to which they will restrict net utilization. This article from Telerik and this Harvard University page are good beginning factors to get a greater understanding of the various challenges folks with motor situations can face and the usability points value occupied with.

One of the necessary issues for customers with motor impairments is decreasing the variety of clicks required to finish actions. Every click on is bodily demanding for folks with motor situations and decreasing the workload can drastically enhance the expertise. Utilizing a mouse can be difficult so take steps to make sure your web site is navigatable by keyboard. Observe WAI-ARIA guidelines to make all parts in your net pages accessible by way of keyboards and keyboard emulators.

Many customers with motor situations depend on assistive applied sciences, reminiscent of neck wands or mouth sticks. These could be particularly demanding to make use of for extended intervals of time, making each click on much more bodily demanding. So hold this in thoughts.

Additionally, add a search area to your web site as this can enable folks utilizing voice recognition as an assistive software to navigate your web site sooner.

#5: Present captions and transcriptions for video

dos and donts for users who are deaf or hard of hearing

With the online usually being a visible type of media, folks with listening to impairments don’t at all times get the consideration they deserve. Nevertheless, it’s necessary to grasp that the web is changing into more and more audiovisual with 92% of marketers saying video is an important part of their strategy in 2020.

At least requirement, movies ought to include captions that present a textual content substitute for spoken dialogue. In contrast to subtitles, captions additionally replicate necessary, contextual sounds that the viewer advantages from understanding – like a cellphone ringing or the sound of a horn beeping.

Additionally, it’s best to create textual content transcripts of your movies so folks with listening to impairments can learn the textual content model along with or as an alternative of the video content material itself. That is additionally a great website positioning tactic because it permits engines like google to “read” the content material of your movies. It additionally advantages different customers preferring textual content content material or would possibly need to take notes, quote your video in their very own content material or just remind themselves of the important thing factors.

All the factors we’ve checked out right now are good practices that profit a variety of individuals and that is what a extra inclusive net ought to appear to be.

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *