Web development projects and conversations can be complex, focusing on topics like technology used, clear branding, engaging content, responsive design, and custom functionality. One aspect that is often overlooked is accessibility, perhaps due to the misconception that you will need to choose between being compliant and having a visually appealing site. A truly great website design will adhere to WCAG standards without comprising the overall aesthetic.
Why Is Accessibility Important?
It’s simple, access to information should be available to everyone, regardless of their individual abilities. 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). Studies have shown that adhering to accessibility guidelines can improve website traffic, earn more revenue and add a layer of responsiveness and inclusiveness that appeals to all users.
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. Here are a few areas to consider when evaluating your website.
1. Mind The Colors
Along with strengthening the brand recognition, colors can also be used to orientate, indicate or even direct the user through the website. When designing your site 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. Make sure you always create a sharp color contrast between the content and its background.
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 still present 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.
PRO TIP: 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.
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.
PRO TIP: 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.
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 through their screen reader.
4. Guide The User Through The Tabindex
People who use a keyboard are familiar with the Tab key, which 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 navigation 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.
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. This text is also used by search engines to determine if the image is relevant to the entered search query. 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.
PRO TIP: Avoid keyword stuffing when writing alt text for images, instead describe the image and how it relates to the content at hand. Descriptive and relevant alt text on a website improves accessibility, SEO and user experience.
Let’s Get Started
All of these methods are simple to apply and make your website more accessible, and ensure any visitor, regardless of ability, is able to access, enjoy, and engage with your site. While these best practices are a great place to start, if you want to achieve a certain level of compliance, it is best to work with a third party to evaluate your plans, designs, and code on a regular basis.
