How to Make Your Website Accessible for Persons with Disability

The concept of equal rights and opportunities extends to all facets of life – including access to websites and digital goods. Web Accessibility (a11y) refers to designing websites that give everybody access to the same information, irrespective of any impairments or disabilities. 

In 2018, there was a lawsuit filed against Apple regarding web accessibility issues. The complainant — who was a proficient user of the Job Access With Speech (JAWS) screen reading program — faced "multiple access barriers" when he visited the Apple website.

While the case was eventually dismissed, the incident points to the importance of one thing: making your website accessible to everyone. 

About 15% of the world’s population has a disability 

In Singapore, half of the disability group are persons with physical and sensory disabilities (blind and deaf).  

Senior citizens with age-related issues, such as loss of sight or hearing, may also find it difficult to browse inaccessible websites. 

One thing’s certain: the world has a large population of people with disabilities. Unfortunately, they’re less likely to use the internet as much as well-abled people do — but only because websites aren’t all accessible yet. 

No wonder equal access to the Internet is considered a basic right. Not making your websites accessible can bring down your customer experience, as well as attract legal action and penalties. 

Accessible Websites Are Good for SEO

It has been popularly believed that accessible websites can only include text, making them look bland and unappealing. But take a look at the KidzWishFoundation website. 

KidzWish is an Australia-based organisation that helps disadvantaged and disabled children from across the continent. Following their all-inclusive approach, their website is made accessible for people with disabilities. It has several interactive features and an eye-pleasing aesthetic that visitors will love.

In fact, you’d be surprised that accessible websites actually match good web design and SEO standards. This means making your website accessible leads to higher SERP rankings. 

Some accessibility features that gain Google’s favour include: 

• Alt tags for images 
• Proper usage of headings for screen readers
• Correct link structure
• Responsive web design 

Ready to create inclusive websites? A good place to start is by taking advantage of the ARIA markup. 

ARIA: What Is It and When to Use It?

According to W3C WAI:

"WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content, and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies."

ARIA is a set of attributes that gives more information about various parts of the user interface, making your website more accessible to people with disabilities. These include those with visual or hearing impairments.

People with visual or hearing disabilities use a screen reader program that reads out the contents of a web page or document. This helps them navigate a website without using a mouse or keyboard. 

With the ARIA markup, you simply need to add a code that’ll enable seamless interaction with screen readers.

One way to use ARIA is by adding it to HTML. You can use a combination of familiar semantic elements in HTML — like nav or header — with ARIA to get the best results. 

But, do you really need to use ARIA HTML markup together every time? The answer is no.

Screen readers comprehend most HTML and HTML5 elements by default. This means simple or static websites do not require ARIA in the markup at all. But screen readers don’t understand certain Javascript elements. This is when you’ll need to integrate ARIA for accessibility.

Simply put: you only need to include ARIA roles when you’re using HTML elements that are not supported by screen readers or other assistive devices. For example, don't use the ARIA role of a button when you can use the native HTML button tag instead. 

You must also note that ARIA will add nothing to your website for keyboard-only users. It is only helpful for those users who make use of assistive technology.  

How ARIA Works

ARIA markup is made up of three attributes: roles, states, and properties.

ARIA Roles define elements on a page — such as buttons and checkboxes — to tell screen readers about the different parts of a page. Roles are further divided into four sub-categories: 

• Landmark roles — Use it to separate a site into different sections, like main content and complementary areas.
• Document roles — Use it to describe each section within a page.
• Widget roles — Define text boxes, alerts, buttons, etc., when HTML doesn’t define these elements or when you are using a complex widget.
• Abstract roles — These are utilised by the browser, so you don’t have to worry about them.

States and Properties are similar — they both describe relations between elements. However, Properties are generally static while States may change on their own or based on user interaction.

For example, aria-busy is a state that tells the screen reader that an element is loading, which is a dynamic concept. But aria-haspopup is a property that indicates when a pop-up will appear and is unlikely to change.

We also suggest that you read Google’s beginner introduction for developers to understand ARIA markup in-depth.

Common Accessibility Guidelines for Websites

Aside from incorporating the ARIA markup on your code, here are some general guidelines to make your website accessible to everyone:

• Choose a content management system (CMS) that supports accessibility. Make sure to check the accessibility notes for a certain theme and follow the design guidelines for better accessibility.
• Use correct headings in your web content. Use H1 for the primary title, H2 for subheadings, and H3 for points under the subheadings. Screen readers use these headings to understand the right order of your content.
• All images must have alt text to describe an image to screen reader users. If an image is used only for aesthetic purposes and does not serve any other purpose, you can leave the alt text blank.
• Incorporate the right colours to your website design. Some people have trouble processing certain colours. So it’s best to do your research before designing your site. Leverage the use of whitespace and borders to organise your content.
• When you hyperlink text in your content, provide a proper description that tells users where the link is going to take them.
• Caption your videos and audio transcripts. This benefits the hearing impaired. Also, make sure to check auto-generated captions and see if they make sense.
• Consider fuss-free navigation. Many people with stress injuries or mobility issues cannot use a mouse or trackpad. Good accessibility practise is to design your page so users can navigate every feature using the keyboard without hassle.

The Web is for Everyone

Web accessibility benefits your SEO, enhances your web design, and boosts your online reputation. But most importantly, it widens your audience and allows you to reach out to everyone — especially to those who can’t do so themselves. 

Make accessible websites with a trusted hosting provider like Vodien.