How to Design an Inclusive Website? 8 Major Steps to Implement

Post by admin | September 5, 2019

What would you do after knowing that about one billion people cannot visit your website, or even if they manage to stopover, cannot navigate or understand it? Are you willing to change such a situation? Now the figure stated might seem like an exaggeration, but latest statistics have shown that nearly one billion people or 15% of total world’s population is temporarily or permanently disabled, hence, unfortunately, fail to operate diverse digital media.

Inclusivity is empowering discriminated or marginalized sections of society, or in other words, helping people, who suffer from any sort of mental and physical disorder, by paving the way for awareness and technologies, which would allow them to take part in different community activities without hassle. And what about website design you ask. It must not be different as well.

In the following write-up, I have chalked down eight steps towards inclusive web design. Consider going through them right now.

1. Define Accessibility

Even though sometimes referred to as interchangeably, not being able to distinguish between accessibility and inclusive design can cause undesirable consequences. The former is about eliminating obstacles so that users can operate websites or other online applications seamlessly.

Large font size can resolve the issue of the indecipherable text so you can let users switch to a substitute accessibility mode or you can create a separate version that can be accessed through a link. This blurs the line between accessible and inaccessible because blind users still have to locate the link, but you have alienated them, and also spent money to create two types of the same interface.

You must rather try designing an inclusive interface, where fonts are larger for everyone. Users who can see well can also benefit because they do not have to put much effort when reading texts. Thus, inclusive websites are believed to be a win for both disabled and non-disabled.

2. Simplify Language

When it comes to texts, you must keep a wide range of considerations in mind; otherwise, the designs would not fulfill everybody’s needs. Using simple words can benefit people with reading difficulties, simple typography the visually impaired people, and consistency the people having cognitive dysfunction. And suboptimal designs positively impacts people experiencing a disorder but would soon recover.

How to enhance typography, thus, readability?

• Maintain right or left alignment throughout.
• Underline links for more visual contrast.
• Line and Paragraph spacing must be 1.5x.
• Paragraph width should be within 80 characters.

How to alleviate cognitive load?

• Use comprehensible language.
• Explain abbreviations.
• Describe link text efficiently.
• Match URLs with relevant text.
• Structure content logically using clear headings.

3. Fix Mistakes

Mistakes can result in confusion, especially when users do not what they did and how can they fix it. Mistakes are inevitable probably because modern-day individuals rush to engage with interfaces. According to recent research, a user generally slips when he or she is filling a form, and due to mental disability input incorrect information. Such errors can be fixed programmatically. One way is adding https:// to URL. Other tips include:

• Exhibit form errors in real-time.
• Allow the user to verify the data before final submission.
• Do not let users feel they cannot carry out actions on their own.

Tips to reduce errors altogether are as follows:

• Always incorporate form labels to describe the fields.
• Placeholders are an excellent way of showing what inputs are acceptable.
• Enable autocomplete to keep typing mistakes at bay.

4. Optimize Color Contrast

Color contrast is a process of measuring how well the colors of two elements in a website differ from each other. The unit is ratio, and you must aim for minimum ratio. By doing so you are improving readability to a great extent. This is actually one of the varied ways by which one can carry out inclusive website designing with zero effort.

What is the minimum requirement, and how can you check it? You can depend on contrast analyzers such as Stark. However, the minimum ratio we aim for is determined by the element itself like the form or icon perhaps, and if the element is suppose textual, its font size varies.

The color contrast ratio needs for words over background are:

• 14pt bold and 18pt normal, 4:5:1 and 7:1 is better.
• 14pt bold and 18pt normal, 3:1 and 4:5:1 is better.

Factors affecting UI elements are:

• Graphical objects such as charts are 3:1.
• Hover, focus, and active states are 3:1.
• Form elements and clickable icons are 3:1.

5. Pay Attention to ‘Skip-to-Main-Content’

‘Skip-to-Main-Content’ is an accessibility feature for consumers navigating websites with screen readers. Screen readers, or people who operate a content using the keyboard tab through targets using the tab key. If you are not handicapped you have most surely experienced this because tabbing is much easier than clicking.

Skip-to-Main-Content would allow the consumers to avoid repetitiveness by bypassing chief navigation. It is however not of any use for people with no screen readers because the link emerges only when tabbed.

It is also highly essential to indicate elements currently focused since tab indexes tend to shift to unexpected locations. When tabbing tap targets, the focus state is activated; hence, browser knows how exactly to style all elements.

6. Never Create Pressure

Nobody likes being pressurized, but for people suffering from cognitive or motor disabilities, pressure induces anxiety. Interfaces have become exceptionally dynamic over time because now you can complete tasks with a simple device. When designing, try to streamline layout as much as possible, and remove unnecessary elements like popups, carousels, distracting animations, alerts, etc.

Add some control to autoplay the media that requires attention because not doing so can increase cognitive load. Anything that scrolls or blinks automatically must be controllable after five seconds.

7. Communicate Constantly with Developers

When making accessibility enhancements and fabricating screen-friendly user interfaces, developers must share at least half of the accountability. By optimizing for screen readers, websites become inclusive to consumers of all abilities.

A screen reader aids blind people by reading out whatever is written on the website. Now isn’t that great? But what about the images and icons without any label? This is where developers make their appearance. They design elements with no text using HTML.

8. Select Simple Gestures

Selecting simple gestures over complicated ones will captivate the attention of non-disabled users while making the user interface accessible to disabled users. Swiping interactions on touchscreen apps are pretty normal, but users do not swipe on website, even their mobile versions.

Rotating Google map is a nearly impossible task for a person with motor disabilities, and since no alternative option is offered, Google Map becomes inaccessible and not inclusive. You must ask yourself if you at all need a complex gesture before integrating it.

No matter how easy it seems, implementing steps specified above, in actuality, is a challenging and time-consuming endeavor. Instead of taking things into their own hand, most business owners seek third party assistance, and you must do the same. Hire a website designer only if he or she is experienced, knowledgeable, flexible, affordable, and interactive.

Leave a Reply

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

Want to start a project Contact Us

Quick Contact