In an ideal world, everyone should have access to the internet. In reality however, there are many obstacles one can face when trying to access the internet. It can be slow internet speeds, outdated browsers or ISPs blocking access to certain websites.
One obstacle that website owners need to pay more attention to this year is website accessibility for the disabled. Some companies might not be aware of the new laws and standards surrounding website accessibility until they're hit with a nasty lawsuit. If you want to avoid the hefty fine of $55,000 to $150,000; better read on!
The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
From their own website:
The Web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.Accessibility supports social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries.
Accessibility also benefits people without disabilities. The Web Accessibility Perspectives video shows examples of how accessibility is essential for people with disabilities and useful for everyone in a variety of situations.
There is also a strong business case for accessibility. Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits. Developing a Web Accessibility Business Case for Your Organization details the benefits of web accessibility.
For a website to be fully compliant, it is recommended to comply with Level AA of the WCAG. The WCAG contains everything you need to know in order to stay clear of that that hefty fine and make your website more accessible to a wider audience. To get started, here are a few practical tips:
Try hovering your mouse over an image on the web, if a few words popup describing what the image is, then that image has an alt tag. The alt tag stands for alternative text which shows up when your image doesn't load or the hardware/software being used to browse your website doesn't support or has disabled images. Take a look at the piece of HTML below:
<img class="img-responsive" src="images/cake.jpg" alt="A birthday cake with a mermaid theme"/>
The "A birthday cake with a mermaid theme" is the alternative text for the cake image. If your website uses lots of image and none of them have alt tags, better start putting them in! Alt tags also improve SEO which means it's a double win for you.
Many assistive technologies rely on keyboard-only navigation. You can test this out by using the TAB key on your keyboard instead of a mouse. The TAB key will jump between parts of a web page that can have keyboard focus.
The main goal is to ensure that all content on a web page is accessible through this method alone. If you find it difficult or downright impossible to navigate your website with a keyboard alone, then it isn't accessible.
Forms are one of the most common ways that users can interact with the website directly. For some websites, it is the most essential part. Here are a few ways to make sure your forms are accessible, according to W3C:
Color blindness is more common than you think. You can use the Contrast Checker tool to check if the color scheme of your website isn't causing problems for visually impaired users. The most important thing to make sure is that text is clearly legible against your websites backgrounds.
Most browsers already allow text to be zoomed. However, if a website isn't built with this possibility in mind, the layout can break and make it more difficult or ever almost impossible to interact with your website.
Make sure your website's CSS consciously avoid the use of absolute units like using pixels for font size and element dimensions. These don't play well with zoomed pages. Also make sure that zoom isn't disabled altogether.
In order to be safe, make sure your website is zoomable to up to %400 while staying functional and accessible.
If your website contains video and/or audio content, make sure subtitles and transcripts are available.
Table elements should be used for displaying tabular data and nothing more. In the old days, they were used to achieve complex layouts. This practice has long been abandoned and frowned upon, however.
Also, make sure your tables only contain necessary information and kept as simple as possible to lessen the burden on those using assistive technologies.
For people with motion impairments, it's important that buttons and links are big enough and easily clickable.
Make sure your buttons are wide and tall enough and that it's clear what the button is for. Use colors for links that contrast both the background and the surrounding text. Ensure that surrounding elements don't impair one's ability to interact with them. This can be done by increasing line height for text and using margin/padding for buttons.
There is such a wide variety of disabilities that it's hard to cover all bases. However, this is no reason to not try and at least make your website accessible to most.
To get a feel on how these technologies help disabled people, it's best to try an actual assistive technology device. You may also download ChromeVox; it's a screen reader is an extension to Chrome that brings the speed, versatility, and security of Chrome to visually impaired users.
Use this 11-Step checklist for your next website redesign.
%20(1).jpg?width=20&name=niki_pacheco%20(1)%20(1).jpg){kind=small}
%20(1)%20(1).jpg?width=20&name=Jorge_Pacheco%20(1)%20(1)%20(1).jpg){kind=small}
