Learn by doing, help by sharing.

Web accessibility is the practice of removing barriers that stop people with disabilities from interacting with or accessing websites. Having an accessible site is important for so many reasons. Not only does it increase a website’s potential audience, but companies have a legal obligation to not discriminate against those with disabilities. In extreme cases this can lead to legal action; the most notable example being National Federation of the Blind v. Target Corp. How are users affected and what can we do to help? Users with low or total lack of vision. Most people with sight problems have some useful vision. The degree to how eye conditions affect vision can vary widely. This can range from people with low vision to the completely blind. Creating a website that is user-friendly for the visually impaired is not as difficult as it may appear. In fact, it reinforces most of the recommended best practices in web design and usability. Accommodate screen readers. Computer users who are blind usually use a screen reader for most computing activities. These brilliant programs convert text into synthesized speech so web content can be listened to, rather than viewed. Common screen readers include JAWS and Window Eyes. As screen readers cannot describe images, photos or graphics, it’s important to provide text descriptions, alt-text and, if necessary, longer explanations. This allows screen readers to accurately convey the meaning of any images that are displayed on your site. You can find a great article on alt-text one the Phase 2 technology blog. For a better experience, it’s also a good idea to allow for users to skip over navigational menus, long lists of items or anything else that might be difficult or tedious to listen to through a screen reader. Keyboard commands. Keyboard shortcuts can make site navigation far easier for the visually impaired user when compared to using a mouse. Having to precisely position a cursor on a screen requires the user to constantly shift their visual focus which can cause eye strain and frustration. Making the effort to not write scripts that require the sole use of a mouse and providing keyboard alternatives is a great way of making a site more accessible for those with vision problems. Fonts. Rather than using absolute font sizes (expressed in points or pixels), use font sizes expressed in percentages or ems. This allows users to change the size of the text themselves to make it easier to read. Also, try and avoid using complex and swirling fonts for large chunks of text as they will be difficult to read, especially for those who already find reading a challenge. Colour blind users. Genetic colour-blindness affects around 8% of men and 0.5% of women, so it is important to consider these users when designing a website. There are various types of colour-blindness, but it usually involves the inability to perceive differences between some of the colours that non-colour impaired users can distinguish. There are several steps we can take to make a website more accessible to those who are colour impaired. Pay attention to colours! Fairly obvious. Careful consideration must be taken when creating buttons or CTAs and elements that require direct user interaction. It’s best to try and avoid using colour combinations that are easily confused by colour-blind users (placing red and green together is a big ‘no-no’, but this also includes blue and yellow combinations too). A great example of bad design is the BBC’s football table. The red and green used are pretty indistinguishable from each other, making that part of the table useless for the colourblind. Making sure these elements contain clear, visible text or iconography that makes their purpose clear will give colour blind users a much better time on your site! Labelling multi-coloured products. Choosing the right colour out of a list on an e-commerce site can be dangerous for someone with colour-blindness. To help users choose the most appropriate colour for their product, ensure colour choices are properly labelled with either an “alt text” scroll over option or with copy on the page. Physically disabled users. There are a range of physical disabilities that can impact a user’s ability to use a website. These can include weakness, limitations of muscular control, joint problems, pain that impedes movement, or missing limbs. Physically disabled users are often incapable of using a mouse. So unless these users’ needs are taken into account when you create website navigation and input methods, physically disabled users may well find your site completely inaccessible. There are a couple of ways to combat this. Provide large areas for links. Wherever possible, the width and/or height of clickable areas should be expanded. This will greatly aid motor impaired users that are able to use a mouse, but with limited mobility. Use focus states for links. If a user with motor difficulties only navigates websites using a keyboard, we must accommodate for them. Differentiating focused links is arguably one of the most important thing you can do for keyboard-only users tabbing through web pages as it will clearly highlight where the user is on the page. Users with cognitive and neurological disabilities. Websites can be complex, and finding the information we want can be difficult for the most able of us. The situation is not helped by sites that use an overly complex design, inconsistent navigation, and distracting, repetitive animation. These complex design elements can compound problems for users with cognitive and ceurological disabilities, and can make some sites completely inaccessible for them. So how can we design for these users? Be predictable. For someone with a cognitive disability that affects their ability to learn new skills, if your website is not interaction consistent, that kind of confusion is a huge problem. Each time they encounter a particular widget, they’re forced to learn a whole new way of interacting with it. Ensuring that things look and behave consistently each time they’re used makes the experience possible (as well as enjoyable) for people in these groups. Indicate progress. Where possible, divide long forms into multiple smaller forms that constitute a series of logical steps or stages. Not only does it make long forms seem less daunting, but they are much easier to understand in this format, especially for people who have various cognitive disabilities. It’s also worth considering labelling each step in the process to inform the use about the progress they are making. Provide feedback. Error messages should be as explanatory as possible by telling users what they did wrong and how to fix the problem. An alert box is often used to get the user’s attention, however, these can be disruptive and may require them to locate the error after the alert is closed. The best technique for indicating errors on form submission are to have them appear in-line, near or next to the associated fields. This way, the user can easily associate the error message with the form field. Avoid distractions. Animations, distracting background images, noises or moving elements all pull attention away from content and are best to be avoided. See this website for examples on what not to do, ever. Users with hearing disabilities. These users have no way of understanding information that is communicated with sound. The techniques for providing accessibility for users with hearing disabilities are very straightforward. Provide audio alternatives. The ideal solution for web-based multimedia would be to incorporate sign language interpretation with videos. However, this can be very costly and time-consuming. Alternatively, making sure to use a combination of captions and subtitling is most effective. Where this isn’t possible, a transcript of the dialogue will be suitable. This will provide the user with an opportunity to print out the dialogue and read it themselves at a comfortable pace. Accessibility also extends beyond disabilities. By observing and understanding just some of the guidelines for accessible web design, you can produce a site that serves its purpose and is accessible to all users, not just those without disabilities. Some examples of groups that could benefit if you follow the guidelines to make your site accessible are: Users of mobile phones, Web-TV and kiosks. Low bandwidth users. Users in a noisy environment. Users with “screen glare” Users with a low literacy level. Conclusion. Although the list of requirements might appear intimidating to some web designers, accessible websites do not need to be ugly. A couple of great examples of visually appealing accessible websites are The Co-op and Manchester University. If you need any ideas or inspiration, turn to Government and charity websites as they are typically the most forward-thinking in taking account of accessibility. Other accessible websites include any businesses which expect to have a large number of elderly, blind or handicapped visitors. The web is an increasingly important resource in many aspects of life: from education to employment, government to health care, just to name just a few. It’s essential for the web to be accessible to provide equal access and equal opportunity to people with disabilities.

Launching a successful product - Part 2: Your Market

Launching a successful product - Part 1: Evaluation of Ideas

The importance of usability testing and how it can increase your users' satisfaction

About building online trust

Teamwork is working together, even when we're apart

Techie events in the SouthWest this May

Focusing on customer retention rather than acquisition

Events to keep South West techies busy in February

Entertaina.com is now live!

CookiesHQ reflect back on 2015

Festive tech and startup events in the SouthWest this December 2015

Web accessibility: what is it, why is it important and how can we meet the standards?

We solve problems and achieve goals.

It all starts with a chat