5 Website Accessibility Guidelines: Design for Diversity

Lawrence Jones 12 May, 2015 1,334

The internet has broken down many barriers for the 36 million people in the USA who live with a disability. Access to the web offers those with disabilities including visual impairments like blindness, hearing problems, motor issues and cognitive problems the same freedoms we enjoy.

Website Accessibility Guidelines Main

They can only enjoy these however, if websites are accessible – and sadly, not all of them are.

Ensuring that your website is accessible is important, it’s also becoming a legal requirement too with the American with Disabilities Act adding certain accessibility standards. In truth, these mostly affect state or Government owned and managed websites, but the commitment to equality of access continues to grow.

Things have improved markedly over recent years for disabled browsers, with sites now increasingly built with all users on mind. Part of this has been pushed by the World Wide Web Consortium (W3C), a coalition formed and led by Web inventor Tim Berners Lee.

The Consortium has authored a set of Web Content Accessibility Guidelines to provide a relatively simple framework for web designers and builders to maximize the website accessibility nature, the majority of which are – thankfully – relatively easy for both amateur and professional developer to implement.

Whatever reason you may have for building a website – whether it’s business or pleasure – you want the most people you can to enjoy it. We take a look at how you can achieve that, and guarantee your site can be used and enjoyed by every visitor.

Improved Vision and Hearings

Many disabled users access websites through assistive technologies, like screenreaders. Screenreaders use an array of innovative technologies to provide a spoken narrative, or a Braille display to users who need them.

Screenreaders work through web pages in a linear fashion, which is very different to most web users who scan through pages. The good news is that adept users can skip through pages quickly and efficiently, tabbing between sections. There are some simple ways you can make your site better for screenreader technologies.

The first way to improve website accessibility is to ensure you use the correct title tags, with <h1> only used for the primary title of the page. Make sure you don’t skip between levels (moving from <h1> to <h4> for example) because the user’s screenreader may think something is missing.

Other things to consider are including proper alt text for alt images – without it, a screenreader won’t know what the image is. For the same reason you’ll need to provide accurate descriptions to your links.

If your website contains forms, make sure that each field is appropriately named too.

In reality, most of these website accessibility guidelines, are just good web etiquette, and the core of a solid build. They also shouldn’t inhibit good quality web design and build.

Website Usability Guidelines - Vision and Hearing

NHS Choices is one of the UK’s most visited health sites, dealing with over 2 million impressions every month. The website is also designed to the most exacting standards, functioning perfectly for screenreaders.

Clearly Visible Text

The trend of web minimalism is good news for those with visual impairments like short-sightedness, or color blindness. Many of with visual impairments struggle with certain colors, so a bold design with black text on a plain background is a solid option.

Website Accessibility Guidelines - Color and Typography

This fashion website template is a great example of a site that offers great readability for those with visual impairments. The simple and bold black lettering on a white background makes all text stand out clearly. It’s functional, but also highly stylish too.

Whilst black text on white backgrounds is an easy choice, you don’t need to be a slave to that. You can check the accessibility of your site’s colors using a variety of online tools, like these free tools from Sitepoint or Checkmycolours. These free tools can help show up any potential problems before you launch.

Bold Colors & Simple Navigation

As well as visual impairments, some visitors may have cognitive problems including learning difficulties or impairments, which could make reading and understanding your site difficult.

Website Accessibility Guidelines - Colors

The usage of bold, contrasting colors with clear text in this business web template is a good example of a website that is easily navigable for all users – regardless of disability or impairment. The wording in the tabs is basic and straight to the point, with the icons offering an additional level of navigational reinforcement for the user.

When creating your site, be careful to include text overlaid onto images. It’s a lovely effect to use, but can cause problems for those with visual impairments. A great way to highlight these bits of text is to include them as ghost buttons, with the outline making it more visible.

Interesting Icons

The usage of icons is good practice across all parts of your site, for all users. Icons themselves perform a valuable function, as a sort of navigational short-hand. There’s a clear academic basis to this, but the logic behind it is clear, and it’s at the heart of most modern operating systems.

As an example, using Windows OS, we recognize the recycle bin through the image on the screen – we don’t necessarily need to read the text underneath to understand what it does. We do the same with calendar icons, mobile phone buttons and so on.

For those with learning difficulties or certain visual impairments, they may not be able to read or comprehend the text description, meaning the icons themselves in some cases become the only means to navigate your site.

In some cases, this could create a dull site. In the past – where clipart was the only option – it did. But nowadays, icons don’t need to be boring, in fact they can be part of a really contemporary and sleek look.

There are hundreds of places online, like the Noun Project, where you can download them for free, adding them to your site to provide greater support for the user.

Website Accessibility Guidelines - Icons

It may be that you want to go further and build your whole site in this way. This turly engaging website template uses strong, almost cartoon-like icons to make it clear to the users what each section does. It also shows that accessible sites don’t need to be boring.

Freedom to Choose

It’s understandable that we want to catapult our users straight into the web experience we imagine they might want, but this may not always be what they would choose.

For those with certain disabilities, rapidly changing home-screen images, videos or audio that begins immediately and quickly scrolling photo bars can be confusing.

The good news is that this is simple to solve. When you insert videos directly from hosting sites like Vimeo and YouTube, specify in the permissions that these do not start automatically. In a site with changing images, consider just how long it might be for someone to take it in.

Accessibility is also an issue in non-HTML components of your pages. Whether it’s an Office Document or a PDF, consider if people need to access these as separate documents, or these elements might work better as HTML pages.

Website Acceessibility BBC Example

A page rich in content, but accessible and clear is one of the world’s most recognized brands: the BBC. Offering video, music, interactive content, icons, inforgraphics and more, the site it build in a way that encapsulates all elements of accessibility.

Creating an accessible website doesn’t need to involve a huge deal of effort, or investment of time. In fact, a lot of the principles involved in building accessible sites are the principles of good web build etiquette. Whether that’s simple and clear content, well labelled links and media, or icons and clear buttons to aid navigation it’s all about empowering the user and putting them in control. If you’re considering a build, then consider your audience – all of them.

Author: Lawrence Jones
Lawrence is a young and inspired author who loves learning new things. Her world is full of new emotions and experiences that she will gladly share with her readers. Welcome her new posts and researches for web design on MotoCMS Blog.