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.
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.
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:
Ready to create inclusive websites? A good place to start is by taking advantage of the ARIA markup.
According to W3C WAI:
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.
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.
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:
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.
Aside from incorporating the ARIA markup on your code, here are some general guidelines to make your website accessible to 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.