Building an Accessible Website

Accessibility is one of the cornerstones of excellent web design. An accessible website attracts and engages more users, which means a healthier bottom line.

In this article, we’re going to take a look at how to improve the accessibility of your website, whether you are in the initial stages of the development process, or whether you are looking to improve an existing site’s accessibility.

Animated effects

Animations and effects bring a website to life, and create a positive experience for most users. However, there are problems that have to be taken into account here. To start, you have users who suffer from photosensitive epilepsy, and as such it’s important to avoid fast flashing animations. You also have vestibular sensitivity that is affected by parallax effects. These animations are not essential to a positive UX, and as such, they can be excluded from the design.

You also do not want to go overboard with your animations by using too many, because you might end up distracting and creating an uncomfortable experience for your users. Ultimately, you want to use animations where it makes the most sense. For example, animated menus and input forms are awesome. The rule of thumb here is to have animations that cover a small space, and which match the speed and direction of other animated objects on the screen.

Audio/video

One of the most jarring experiences on a website is autoplaying audio and video. When visiting a new page, a user has to find the media in order to pause it. If the user is on a slower system, the problem is aggravated even more. This is one way to make sure that you do not get return visitors. However, autoplaying video and audio can be a powerful engagement tool when used right. A highly target landing page for example can benefit from autoplay, while a homepage will almost never be improved by this feature.

Color

Color is a very important design element. It can be used to evoke ideas and emotions, and strengthen the message of a brand. When it comes to accessibility, color blindness plays a part, since 1 in 12 men and 1 in 200 women suffer from this affliction. There are several types of color blindness, but the most common, affecting 6% of men, is Deuteranopia, in which green appears beige, and reds appear brownish/yellow.

Color also has different meanings across cultures, so while you may be trying to convey meaning and intent through color, you have to be aware of your global reach. For example, you might use green to signal a positive, which works great for Western cultures. However, in Eastern/Asian cultures the opposite is true, with green having a negative connation, and red having a positive one. This knowledge is especially useful when branding for different areas of the world.

To address these issues, it’s best to add a non-color identifier, such as a text description, or icon, to help differentiate buttons, labels and other areas of your website. Colors can also cause discomfort if they are too intense, especially for users with autism. Of course, you always want to maintain a healthy degree of contrast, so that your website will be accessible to users with poor eye sight, for those using a low-end monitor, and for those using a monitor that is in direct sunlight.

Controls

Any UI elements such as links, buttons, HTML event listeners and inputs can fall under the category of control. The first rule of thumb when it comes to controls is to make sure that they are decently sized. If a control element is too small, users will have difficulties or discomfort clicking on them. Users with tremors, and those with reduced dexterity due to age find it difficult to use small buttons.

Controls can also pose a problem when they are too close together, especially on touch screens. Users with bigger fingers will have difficulty navigating your website. Touch errors can also occur from controls that are nested within each other. The recommended minimum size for a control is generally 34×34 pixels, with Google recommending 48×48. These dimensions include padding. The minimum distance between controls is 8 pixels according to Microsoft, and 32 pixels according to Google. As an added measure, buttons should also have a text label.

Creating an accessible website

The most important aspect of creating an accessible website is an understanding of your target audience. Using proper analytics and customer profiling, you will be able to understand the pain points of your target audience and implement proper marketing solutions into your design. This will lead to greater engagement and conversion rates for your business.

 

Source:

https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/

Leave a Reply

Your email address will not be published.