What is Web Accessibility? How to get an Accessible Website?
A brilliantly accessible design of a website involves making websites user-friendly for individuals with disabilities, ensuring they can browse through as easily as anyone else. In this article we will deep dive to see its significance and also what involves making a fully accessible ada compliant website.
According to a recent survey conducted by WHO, over 1.3 billion people (16% of the global population) experience a significant disability today. You can take heed from this survey to understand how important it has become nowadays to prioritize website accessibility.
It is not very difficult to build an engaging as well as an eye candy website for all the visitors, regardless of their impairment. But in order to get going, we must first understand the basics of accessibility measures websites commonly take.
How to get a perfectly accessible website?
Let’s begin considering the different types of impairments which include visual, auditory, motor, cognitive, and speech. To be able to effectively accommodate this assorted group, website owners with the help of their web developers often follow standard best practices that outline the behavior and appearance of visual interfaces. They also generally identify how to code the HTML of a website for easier navigation via a variety of assistive technologies like the speech input software, screen reader, text readers, etc.
For a thorough guide outlining accessibility standards and best practices to implement on your website, take a look at our useful web accessibility checklist. This checklist guides you through essential elements for designing an accessible website. So let’s learn how a website can have an improved UX for your website browsers with disabilities.
Keyboard Navigation
Keyboard or keypad is an essential and the most basic component of the devices we use to access the internet. An essential aspect of accessible websites involves enabling visitors to browse through web pages using the keyboard instead of the mouse. This is crucial for individuals with mobility issues or precise motor control. Keyboard navigation, allowing users to move between different CTAs and hyperlinks using the tab key and activate them with the enter key, greatly influences how users with disabilities interact with your site.
Many of the websites save excessive tabbing by displaying a link “skip to the content.” This helps users to pass the navigation menu on the page.
Having breadcrumbs on all the pages is also a good idea to make your website easily navigable by providing excellent UX. There is absolutely no need to hit the browser back button multiple times, just a click on the breadcrumb and you are back from where you came.
Alt Text
Alt text or alternative text is the textual definition of an image used on a website. It is basically meant to convey the “why” of the image. A fully accessibility compliant website uses proper alt tags with images and other similar media to allow browsers with screen readers to understand what is on this page.
Since the goal of alt tags is to provide proper text equivalent of images, it has to be short, concise and correctly descriptive. Good enough for the user with disability to easily perceive the content of the webpage audibly. For instance, the alt tag for the following image should be:
<img src=”pizza.jpg” alt=”Pizza Slice on a Plate”>
You may be surprised to know that there are some images that don’t need any alt tags! Why and which? It is because those images are only for the decorative purpose; they are not there to understand the content of a page. For example, a background image is purely decorative and does not need an alt tag. Alt tag field can be left empty. However, SEOs may want to fill this field for their search optimization reasons.
Color Contrast
This is another important aspect. It may make text difficult to read if the text on an image or any other element behind it has very low contrast. You may have experienced this kind of issue on a website before. The text should be clearly visible otherwise your ecommerce store will become less accessible to people with visual impairment. For example, see the footer links in the image below:
Difficult to read, of course! The text or the background color has to be changed appropriately to make it easy to read
Neat websites that are accessible aim to eliminate contrast errors completely, which are formally described as situations where the text color has a contrast ratio of less than 4.5:1 with the background. While you may not need to understand precisely how this shows, it is sensible to use a color contrast checker to list down any contrast errors on the website.
There are many extensions available that allow changing the color contrast. See the example in the following image showing disability icon on the center-right corner of the page.
This helps toggle color contrast.
Meaningful Links
There is a feature available in screen readers that allow visitors to create a list of the hyperlinks used on a single page. This helps them navigate website swiftly. Checkout the example of the following two sentences:
Checkout our Case Studies to know what our clients are saying
Both of the above lead to the same page but the 2nd one has a lot better accessibility. This is because the constituent text of the second sentence clearly describes where the link is leading. The first one only tells to “checkout,” what is on this page, the user wouldn’t know. Always use self-explanatory text in the hyperlinks; it helps people with screen readers to navigate easily.
Semantic HTML
HTML is the standard markup language for Web pages. With HTML you can create the structure and set the content of the website. Semantic HTML tags, on the other hand, are tags that define the meaning of the content they contain. A great accessible website makes good use of these special HTML tags which tells the application reading the code what each element does. Here is a list of most commonly used semantic HTML tags:
- <h1>, <h2>, <h3>, etc. are the heading tags
- <p> is the paragraph tag
- <strong> or <emphasis> to highlight the importance of text
- <ol> and <ul> are for ordered and unordered lists
- <a> is the anchor tag to apply hyperlinks
- <nav> is to classify the navigational links on a webpage
- <button> is for call to action (CTA)
The utilization of proper semantic HTML tags is vital as they assist the assistive technologies to help users move between different sections of a webpage and engage with different page elements by understanding the structure. Take the example of heading tag which is the prime example of a good use of semantic tags. Nicely structured heading tags let visitors navigate between different sections of an article, going through the section of their choice.
Choosing the right semantic tags is not as easy as it seems. It’s important to place them on the right spot otherwise they won’t do the job they are being used for. For instance, it doesn’t make any sense to use <h> tag for a paragraph and <p> tag for a heading. It will only create difficulty for the person with disability to understand whether it’s a heading or a paragraph? See example below:
Scalable Text
A completely web accessibility compliant website gives users the option to increase the font size of a web page up to 200%. Importantly, this should not disrupt the UX or the layout of the page. Texts inside images don’t scale up. For that reason, web designers should avoid using texts inside images or similar media.
Lesser Visual Effects and Animations
Visual effects, undoubtedly, breathe life into a website but they should be used wisely, otherwise they may make the website difficult to access for the users with disability. It is crucial to maintain a proper balance and not to use too much animation. Importance is to be given to the content of the page, therefore choose to give subtle animation touches on the webpage. Tip is the user should be distracted by flashing colors. Simply, avoid this practice.
Moreover, users should be given an option to stop scrolling image galleries and texts. According to many accessibility experts, it is a must-have for the websites nowadays. If a website fails to provide this kind of user control, it is not preferable by at least 16% of the global population.
ARIA
ARIA or Accessible Rich Internet Applications is a distinct set of roles and attributes that define ways to make web content as well as web applications (particularly those developed using JS) more accessible to users with visual impairments. They basically delineate the purpose of UI elements without semantic HTML tags. In contrast to plain HTML, ARIA offers a lot more assistive technologies.
Take the example of a “progress bar” being represented by a <div> element on a website. Since <div> is not a semantic element, it can be given the ARIA role. ARIA cannot be covered in this short article. It’s relatively a big topic to talk about. A web development team should be highly skillful and experienced to properly implement it on a website.
Conclusion
Tekglide is committed to ensuring people with disabilities can access and enjoy your products or online services without any barriers. Our team is adept in resolving any web accessibility issues to provide a seamless experience for users around the globe. If you have any specific web accessibility pain points or you have any questions regarding our services, do not hesitate to reach out to us. With the help of comprehensive web content accessibility guidelines, we strive to create a more inclusive digital environment for everyone. For a free accessibility audit, reach out to us.
