Web development projects can be complex. They focus on many things –  content management systems (CMS) platforms branding, content, responsive design, and the way the page appears to visitors or visual web design. One feature that is often overlooked is accessibility, perhaps due to the misconception that websites designed for accessibility may not look aesthetically pleasing or may even seem disordered. Good website design, however takes into account visual as well as accessibility concerns.  It is extremely important that access to information can be available to everyone, regardless the individual abilities.

Websites that adhere to accessibility guidelines can improve website traffic, earn more revenue and add a layer of responsiveness and inclusiveness that appeals to all users. While final U.S. web accessibility regulations are slated to be implemented in 2018, International guidelines are already in place. The UN Convention on the Rights of Persons with Disabilities recognizes that website access is a basic human right and suggests website conformance to Web Content Accessibility Guidelines (WCAG).

When designing a new web development project or updating an existing design, we recommend that you keep accessibility in mind from the very beginning of the project. It should be part of the very fabric of the design to ensure any visitor, regardless of ability, is able to access, enjoy, and engage with your site.

Tip #1 – Mind the colors

Make sure you always create contrast between the content and its background. It is worth considering that there are millions of users in the world who are not able to distinguish between colors and their various shades. Sharp color contrast assists those with color deficiencies.  

Besides strengthening the brand recognition, colors can also be used to orientate, indicate or even direct the user through the website. If the website has been well designed, in general it may not cause any major problems to the users who can’t distinguish colors. However, in interactive elements or action calls this may become a problem. For example: a simple text link with only one highlighted color may end up being difficult to recognize as a link if it has not been underlined or if it has a highlighted darker background color. In order to better understand how many of your users may see your website, insert your URL in an online Colorblind Web Page Filter tool to check the different kinds of filters that simulate visual disabilities.

Tip #2 - Contextual Links, a Better Description

Users who use screen readers to navigate have the option to skip from link to link until they can find the content they are looking for. When a link is selected it is literally read by the browser of the screen reader. If the link only contains something like ‘click here’, the user won’t be able to learn what the url function is since there is no contextual information around it.

In order to provide better information and orientate the user, it’s important you have relevant link descriptions. For example: Instead of “Click here” use “Contact us here”. Instead of “See more” use “Browse more related topics here”.  The upside of using more relevant contextual links is that in addition to helping users, search engine optimization also gets a boost.

Tip #3 - Make More Alternative Content Available

There are some kinds of content that will never be accessible to certain types of users, such as audio contents by hearing-impaired individuals for example. Nevertheless it is possible in some cases to provide alternative content for these types of users to consume. For instance, if your website shares content in video format, you can also publish the written transcription of the video so that any user can read it their screen reader.

Tip #4 - Guide The User Through the Tabindex

People who use a keyboard are familiar with the Tab key, that when pressed, moves them sequentially through a page to the next ‘field’. On a website, the Tabindex determines the order of the tab movement. Tab movement can be very important for visually impaired users who are moving through navigational menus or forms. Forms especially, can be a challenge. Sometimes they may contain small elements such as checkboxes or buttons which can be really hard to click on with a mouse. A well-defined tabindex can make navigation much simpler and provide a better user experience.

Tip #5 - Alt Text

Alt text, an abbreviation for alternative text, is a word or phrase that describes an image, video, graphic or any kind of media that typically would not have words associated with it. The alt text is inserted as an attribute to the HTML of a website page. Users can see it by hovering over the image, screen readers can ‘read’ it out loud to tell the user what is in the image/graphic location, and it describes or replaces the media if that media is not loading for any reason.

In search engine optimization (SEO), alt text provides information about a page for the search engines, because it does not have the ability to read the image contents. Descriptive and relevant alt text on a website improves accessibility, SEO and user experience.  

All of these methods are simple to apply and make you website more accessible, and ensure any visitor, regardless of ability, is able to access, enjoy, and engage with your site. Good luck!

Giovani Freitas
By Giovani Freitas

Web Developer at CommonPlaces.

Leave Your Comment