Definitive guide

Website accessibility basics

What website accessibility means and why it’s important

Do you know what website accessibility means and why it’s important? Accessibility is a feature often overlooked in designing and developing websites yet it is essential in truly making the internet a universal landscape. To better understand what I mean, let me first define what web accessibility is.

Web accessibility defined

The World Wide Web (W3) Consortium, the global body governing the internet and its standards for long-term growth, defines web accessibility as making websites work for everyone. This avoids discrimination to people with disabilities by making websites with content and tools to make it equally understable, interactive, and perceptive for them.

In addition, accessibility is intertwined with inclusion since it entails involving everyone and with usability since it means providing a design for great user experience. Digital Testing and Quality Assurance leader StarDust elaborates that the means or tools added to a website to make it easy to navigate and interact with people with disabilities include screen magnifiers, screen readers, eye tracking tools, and many more.

Let me differentiate these three tools:

1. Screen magnifiers

Screen magnifiers are a kind of software that provide visitors to a website the ability to make modifications on what they see. This is especially helpful to those with low vision since it lets them increase the size of the content and increase contrast, among others.

2. Screen readers

Meanwhile, screen readers are a kind of software that reads the text on a website to the user through a braille display or speech synthesizer. What happens is the user types a command on his or her keyboard to read what’s displayed on the screen. This aids people who are blind or visually-impaired in being able to get information from websites.

3. Eye Tracking tools

Eye tracking tools, on the other hand, are assistive technology connected to a person’s computer that measures eye movement, generates heat maps, and analyzes where they are looking on the screen. It also generates saccade pathways to measure the viewer’s area of focus and reading pattern.

This is often used to study the behavior of visitors to a website in so far as what interests them in its content. But this aids people with mobility issues such as the physically disabled to navigate a website using their eyes through a console they wear, which is connected to the computer and controls the cursor.

Now you have an overview of what website accessibility is, let’s move on to its types for better understanding of what it is for.

Types of website accessibility

Website accessibility varies according to the type of user it serves. A better way to understand its types is through the issues encountered by the end user with regards to it. The University of North Carolina at Greensboro classified issues on web accessibility into four kinds, which is according to the type of disability a person may have. These are visual, auditory, motor, and cognitive.

1. Visual

Visual issues involve missing headings for content, absence of digital landmarks, images lacking alternative text, hard to read text, and missing audio description for visuals. Other issues include missing features to enlarge texts, change fonts and color, and enlarge images of a content. This may also mean lacking audio versions of content as an alternative means of “reading” it. These hurdles are often encountered by the blind, those with reading disorders, and poor eyesight.

2. Auditory

While auditory issues involve missing transcripts for audio recordings and captions for videos. This may also entail difficulty in hearing the content and there is no feature to increase the volume. Videos with no sign language insets or transcripts are also a common issue encountered by the hearing impaired or deaf.

3. Motor

Motor issues pertain to content that could only be accessed online using a mouse and disabled tab-through order. These functions prevent people with physical injuries to simply use the keyboard when browsing the website since they are unable to use a mouse to do so.

4. Cognitive

Finally, cognitive issues mostly pertain to clarity of layout and content that prevent those with learning disabilities, brain injuries, and attention-deficit/hyperactivity disorder to focus and understand.

These issues may seem irrelevant but the University of North Carolina stressed that these are essential features in a website that promote equality of access for all. They underscored that web accessiblity is actually imposed by laws and absence of such features, especially for educational establishments may mean suffering penalties and fines from the government.

More or less, you now have an inkling of the importance of website accessibility. But let me go into this with a little more detail.

benefits of personalizing call-to-action messages1

The importance of website accessibility

There are many reasons why website accessibility should be incorporated into the design and development of a website. But let me sum it up into four important reasons: it accelerates information distribution, enables the disabled to participate in society, improves user experience, and provides good business.

1. Web Accessibility accelerates information distribution

The United States National Center on Deaf-Blindness underscores the importance of web accessibility as being beneficial to everyone since it allows services and information including electronic documents to be delivered to a wider market.

2. Web accessibility enables the disabled to participate in society

Study shows that 1 out of 6 European citizens and 1 out of 5 Americans are deprived of the variety of resources available to them online. This make it difficult for them to surf the internet and even discourages them to go online. In turn, people with disabilities could not get housing, jobs, and other resources that are often easily accesible online. It is imperative that business owners and designers ensure that website adhere to standards to assist the disabled in participating actively in society.

3. Website accessibility improves user experience

Businesses would benefit most when they equip their websites with accessibility features since it it expands in market reach and scope. Websites with accessibility features make it also possible for the elderly, for those in rural or developing countries, and for those using different gadgets to access a website with ease. Thus, website accessibility improves overall user satisfaction and experience.

4. Website accessibility provides good business

Besides improving user experience, website accessibility provides good business by improving the search engine optimization and ranking, strengthens brand loyalty, increases profits, and nurtures long-term relationships with your clients and website users.

In addition, it also protects the business from legal risks. Website accessibility is mandated by some countries, such as in the United States where they have the American Disabilities Act, to be a part of a website’s features to make it anti-discriminatory. Adding information in your website on the legalities of website accessibility, particularly in your terms of use or cookie policy is highly recommended by experts.

The question that would probably pop in your mind is how to add accessibility features to your website. Let me share some tips to you.

Tips on adding website accessibility in design

With the aim of improving user experience, here are some tips on how to add accessibility to your website’s design:

1. Follow the Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines is an international standard cascaded by the World Wide Web Consortium to better make websites user friendly to people with disabilities, the elderly, and those in developing countries.

The guidelines follow four principles to ensure website content conform to the criteria of accessibility, whih are: operable, perceivable, robust, and understandable. You can check the guidelines here for more information.

2. Test your website

Testing your website with online scanners for accessibility is a good way to know what you need to add to it to meet the standards. This would also make you aware how to better improve your content for better site traffic and performance.

3. Label accordingly

Another practical tip you could do to make your website more accessible is to label its contents accordingly. This means naming the images, graphics, and videos you use in your content by adding a description and alternative text information to it once it is uploaded in your website.

4. Add an accessibility menu

Adding a pop-up accessibility menu to your website is the next best thing to do. This menu does not need to be obtrusive. It could be discrete but noticeable. Take the case of Cask, a bar in New York, that has a creative accessibility menu—it is an icon of an eye that appears at the bottom right corner of the screen when their website loads.

Clicking the icon opens a menu of options to adjust the screen for contrast, font size, text distance, text alignment, and line height. The menu also enables the user to hide images, pause animations, and adjust cursor size. These latter three options are cool features that anyone can use to make a page load faster.

Another website worth checking is that of DealerOn‘s. Their accessibility menu is rather very thorough. It is indicated as an icon of a human person at the bottom left corner of the screen. Clicking the icon opens a pop-up menu with language options, search feature, and a statement on the accessibility adjustments.

What’s nice about their menu is it classifies the adjustments that can be done on the content based on the profile of the end user–that is if the person is vision impaired, has ADHD or cognitive disability, has motor or mobility issues, a blind user, and has a seizure. This is on top of the regular adjustments that can be done on the layout, color adjustments, and orientation adjustments.

5. Refine your content

You can refine your content by making it easier to see and hear. This means adding alternative ways to appreciate your content through transcripts, audio versions of text, adding options to adjust animations and video for different reading speeds, and making site features accessible from a keyboard.

6. Review your design

Taking time to constantly review your design if it is clean, orderly, and easy to understand is a final practical tip I can suggest. If you need help on this, I have a handful of tips to make your website user friendly along with some inspiring examples of aesthetic websites that you could check.

Conclusion

Website accessibility is an essential component of designing and developing website. It has many benefits not only for the end user but also for the owner of the website as it conveys a sincere desire of building a long-term relationship with its clients or customers.

FAQs

1. Can you recommend tools for website accessibility?

Definitely! Some tools to aid the visually impaired are Color Safe, Colour Contrast Analyser, Funkify, and NoCoffee. The latter three tools are chrome extensions that you can install to check if your website pose difficulties to the visually-impaired. While CodeSniffer and Examinator are an easy-to-use tools to check if the source code of your website complies to the WCAG. Other automated tools for accessibility testing are Axe, Lighthouse, and pa11y.

2. What are the best practices for website accessibility?

To summarize what I’ve discussed, the best practices for website accessibility are adding alt text to images, properly assigning headings and subheadings to outline content, appropriately label HTML elements, avoid using tiny or hard-to-read fonts, use ample color contrast, and label the language of a text. You could also caption photos and videos, provide transcripts, add a description to visuals, use assistive technologies, and test webpages with a keyboard.

Brito Construction - Construction Website Example