Accessibility web design is offering people with different needs alternative ways to use our website, to get the same information ^1. A website should be accessible for everyone, regardless of their ability or disability.
An accessible website is inclusive, which means it's usable by a vast range of users including those with disabilities. The disability category might vary from many sources, here are 4 categories according to Webaim ^2:
- Visual - Blindness, low-vision, color-blindness.
- Auditory - Deafness and hard-of-hearing
- Motor - Inability to use a mouse, slow response time, limited fine motor control
- Cognitive - Learning disabilities, distractibility, inability to remember or focus on large amounts of information
On creating an accessible website, we strive to provide ease for people with ability or disability. But of course we can't cover all cases in code-only. For example, for "low-vision" people, we might enhance contrast color of the web. But how about people with blindness?
For cases like blindness or other non vision related disabilities like paralyzed people, scientists have made software or physical tools (called assistive technology) to address this problem. Visually impaired people might use screen readers and braille keyboards. Paralyzed people can use eye tracking devices to move the mouse. You can see more variety of tools to help with disabilities here.
Aspects of Accessible Web Development
To ensure our website is accessible, the development of the web itself should also consider some aspects. This is to make accessibility tools like screen readers can run with ease, providing intended information for the user.
Semantic HTML (Document Structure)
Semantic means "relating to meaning". Writing semantic HTML means using HTML elements to structure your content based on each element's meaning, not its appearance ^3. Yes HTML can have a meaning, see below code:
<div> <div> <div>five words</div> </div> <div> <div>three words</div> <div>forty-six words</div> <div>forty-four words</div> </div> <div> <div>seven words</h2> <div>sixty-eight words</div> <div>forty-four words</div> </div> </div>
and compare with this
<main> <header> <h1>five words</h1> </header> <section> <h2>three words</h2> <p>forty-six words</p> <p>forty-four words</p> </section> <section> <h2>seven words</h2> <p>sixty-eight words</p> <p>forty-four words</p> </section> </main>
the second snippet give more sense about the structure of the element. But this not only the benefit of semantic HTML, it also affect the accessibility of the page.
Semantic HTML is considered the foundation of web accessibility. This is because assistive technologies like screen reader (that aid disabled users to browse the web) depend on the semantic structure and meaning of web pages to convey information to their users ^4 .
consider structure of two page above. By using <h1> , <h2>and then p, the structure of page will be better (page A), and will help screen reader to scan through page in good order. Page B might give confusion to user since in structural view they element has no tiering.
Media description
In a website, media like image, video and audio tend to be the main source of information. Inability to extract the media content almost means the information won't be received. In HTML, we can add the media description using an alt attribute.
<img src="/ifographic" alt="infographic explaining the transformation process of a sopciety" />
The text inside alt attribute will be read by screen reader for the user. Describing the media content in the alt attribute is a hardwork, because you must deliver the overall information correctly in relatively short sentence.
Sometimes is there only for decorative purpose. We don't need to give any description for this, but a goog practice is to just give it an empty alt="" attribute.
Below is how typically an alt text should be ^5 :
- accurate and equivalent
- succinct, but don't sacrifice the meaning
- not redundant, not contains phrases like "image of..." or "graphic of..."
Sometimes an image is not just a content, but it has a specific function like navigating to other page. This factor also affecting the text we should use in the alt attribute.
For media like audio or video, we can provide a transcript that is downloadable, or create subtitles embedded to a video.
Make the proper use of colors
When surfing on the web, its typical to found an error message of the form has a red color. It's a good practice because red usually indicating "wrongness". But is it sufficient for audience with color blindness?
How about people with low vision? facing the case of text and background that lack of contrast will make them way harder to read. Below are things to consider regarding color to imrpove web accessibility
- color contrast. You can check using of many color contrast analyzer.
- add additional icon or image, to support the state of an action. Like adding exclamation icon on error text.
- Avoid colour-specific instructions
- Include colour names and show examples
- Dont rely on colour coding ^6 . People with "Deuteranopia" might sees different colors. Adding a pattern or hatch to background color can help them differentiate the color.
Using WAI-ARIA roles
ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object ^7 .
An element like <input type="radio" /> has a role of radio. But, some non semantic HTML element do not have a role, like <div> or <span>. For these elements, the role atribute can provide semantics.
ARIA roles are added to HTML element using role="role type" attribute. Where role given is part of ARIA specification.
Keyboard Navigation and Focus Management
Many computer users do not use a mouse, trackpad, or other pointing device when interacting with web pages, either due to preference or to impairment. Some reason might be blindness low vision (they can't really follow the mouse pointer), motor impairment, etc ^8 .
Keyboard accessibility is a fundamental aspect of web accessibility. It ensures that individuals who rely on keyboards or alternative input devices can navigate and interact with a website effectively, especially with form filling stuff.
Providing keyboard navigation means that all interactive elements, such as links, buttons, and form controls, can be accessed and activated using the "Tab" key. Additionally, proper focus management ensures that users can clearly identify which element has keyboard focus, enhancing their ability to navigate through a website.
Ensuring keyboard accessibility and appropriate focus management are essential for individuals with motor disabilities or those who cannot use a mouse or other pointing devices.
Responsive Design and Mobile Accessibility
With the increasing use of mobile devices for browsing the web, it is crucial to consider web accessibility in the context of responsive design.
Responsive design ensures that websites adapt to different screen sizes and orientations, providing a consistent and accessible user experience across devices. This includes considerations such as touch target sizes, scalable text, and fluid layouts.
Mobile accessibility also involves optimizing content and interactions for mobile users, considering factors like limited screen space, touch gestures, and mobile assistive technologies. By prioritizing responsive design and mobile accessibility, websites can accommodate users with varying abilities accessing the web through mobile devices.
Auditing web accessibility
The aspects of web accessibility section before are still just a little sum of the vast area of web accessibility. I only point out things that can be a good start to stepped on for implementing web accessibility.
Now, before jump into improvement and fixing thing, we must know which part of our web should be improved to be more inclusive and accessible to broader audience. For this purpose, we can utilize a web accessibility auditing tools.
Introducing WAVE, a free web accessibility auditor that checks with standards from WEBAIM. A web accessibility online community from Institute for Disability Research, Policy, and Practice, Utah.
Image above are landing page of WAVE. To check our website accessibility, we can just put the URL of the web into the web page address field, and then WAVE will open it and do the audit online. Next you will get the audit report.
Lets try it out. I will test my own blog https://emots.blog. And here is the result:
The result page divided into 3 part:
- The overall report. Inside the blue box, leftmost page, is the overall repoort. It displayed totals of accessibility didn't met error, warnings, what looks good and other details.
- The detailed result. Inside the yellow box that wraps black area. It displayed result on each element of the page like heading, list, links, etc.
- The global page result. Inside the red box, top of the page, is global page result. It displayed the entire page result.
The report
Here is the Accessibility report summary of my blog:
- 11 Errors
- 7 empty button, A button is empty or has no value text.
- 4 empty links, A link contains no text.
- 13 Alerts (warning)
- 6 underlined non link text, underline should be used for links
- 3 Noscript elements, A
<noscript>element is present. - 1 missing first level heading
- 1 possible heading
- 2 redundant alternative text, image with alt started with like "image"
- 3 Features
- 2 ARIA
- 7 Structural elements
You can visit this link to see full report. It also gave a detailed reason of the error on each.
The challenge on developing accessible website
Developing and accessible website has some challenges from engineering and non engineering aspects, to mention a few:
- It is complex to develop an effective accessible website. Engineer must carefully create a good web structure, do more work on thinking about media description, adding ARIA roles on spot, creates an accessible design with good color contrast and implementable.
- Lack of legal requirements or Enforcement. In Indonesia, a regulation regarding web accessibility is not yet exist, unlike in europe or other leading countries. This state makes companies not really put an eye on this stuff.
- Misconceptions about the User Base. Some people may underestimate the number of individuals with disabilities who rely on accessible websites (like thinking only few blind people used it). In reality, there is a significant population of people with various disabilities, including visual, hearing, motor, and cognitive impairments, who require accessible web content. Ability people also benefit too with accessible website which keyboard navigatable if they filling forms no need to touch the mouse, just "tab tab tab".
To address these challenges, it is crucial to be aware of importance of web accessibility, provide education and training on accessible design and development practices, highlight the benefits of accessibility.
Reference
https://adasitecompliance.com/website-accessibility-features/