Accessibility — Web-developer’s incumbency
Recently, I got a chance to work on accessibility in one of my projects. It was when I realised how influential accessibility is User Experience world. At the same moment, I decided to share my knowledge with everyone out there. Thanks Sandeep for motivating me and helping me write this article.
Explaining accessibility
Making a website convenient for every user irrespective of their disabilities is nothing but accessibility.
‘When websites and web tools are properly designed and coded, people with disabilities can use them.’
Scrutinise accessibility step by step
If you want to run accessibility-check on your page, you may download Lighthouse, which is a chrome extension. After adding this extension, you will see an option named Lighthouse in developer’s window as shown in the image below:
Clicking on generate report button would display the accessibility percentage of your page.
For more exploration on Lighthouse, visit here.
Enhance accessibility
You can hop to WAVE to improve accessibility on your page which is an extension by Chrome. It will show you list of errors, alerts etc. as exhibited in the image below
WAVE also provides the explanation, fix and algorithm used to detect the error. To exemplify:
Errors
Linked image missing alternative text
What It Means
An image without alternative text results in an empty link.
Why It Matters
Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.
How to Fix It
Add appropriate alternative text that presents the content of the image and/or
You can add WAVE and learn more about it from here
I would shed light on the most common errors that comes up while checking on accessibility using WAVE following with the solutions for same
- Missing form label- This error comes up when elements such as select, input does not have an associated label. You may solve this error by either adding label or adding aria-label attribute to the element. Example: <input aria-label = “something” val=”” .. />. You can find more about aria-label attribute from here. This error sometimes shows up in case label is not properly pointing to the element. Example: <label for=”example”></label><input id = “examples” type=”text”>.Here label’s ‘for’ attribute should contain value as examples not example.
- Empty button- This error shows up in case text element is missing from button tag.Example: <button _ngcontent-oyc-c183=”” class=”action-menu-toggle”><clr-icon _ngcontent-oyc-c183=”” shape=”sort-by” size=”28" role=”none”. style=”width: 28px; height: 28px;”></clr-icon></button>. You may solve this error by any of the following points: Place text content within the <button> element or Give the <input> element a value attribute or Add aria-label attribute to button.
- Very low contrast- Reason behind this error is that text and background colour contrast is very low. You may solve this error by working contrast colours. You can find more about contrast colours from here.
Checklist for Web developers
Following checklist would help you to ameliorate accessibility in your application:
- Native HTML Semantics vs ARIA
Use native HTML semantics and CSS extend feasible. Native HTML provides plenty of built-in accessibility support for screen-readers and keyboard-only users. In case it cannot be used, you may opt for ARIA (Accessible Rich Internet Applications)
- Keyboard Visible Focus
All active controls must have optical manifestation of keyboard focus. Work with your designers to get the succeeding points in place
While addressing WCAG 2.1 AA:
- Go ahead and use default browser outline.
- In case of custom outline, the minimum colour-contrast ratio with its background-colours has to be 3:1.
- Keyboard Focus Management
The most crucial aspect of keyboard user while navigating through the elements is the order. The keyboard navigation order has to be judicial.
Think through the elements that needs focus and additionally pay attention on the once that should not be focussed. For example, if an element has no action to play should not focussed with keyboard as it can lead to a confusion for user.
- Buttons and Links
Button is used for some action such as submitting a form, opening a popup, close a popup etc. Links come in picture when navigation is required. So, it is vital to convey same information to screen reader users
Use links <a href=”#”> (or div/spans with role=”link” and
tabindex=”0") while:
- Opening a new page (including SPA)
- Opening a new browser tab
- Navigating to another part of the page. A button element too can be used here, but anchor link is advisable.
Use buttons element (or div/spans with role=”button” and tabindex=”0") when:
- Changes in UI takes place (open a popup, reset a form, etc)
- Alternative Text
ALT text refers to an attribute for image that is read aloud to blind users by screen readers. If alternate text is missing, screen reader would read it as ‘Image’ or file name which would then be non-convenient to user.
- Headings
Heading ranks should be taken care of i.e., H1 should come first, then H2 and so on. Neglecting heading levels could lead to creating confusion for users.
- Form Labels
Labels are meant to depict the purpose of an element henceforth all elements such as <input>, <select>, <textarea> etc must have a label associated to them.
- Use <label for=”something”> wherever possible.
- Use ‘aria-label’ on places where you cannot add ‘label’ attribute. Example: <input type=”text” aria-label=”something”>
- If the above cannot be used, aria-labelledby=”labelId”. This is common for when the label is not known or changes as it is within a component/template.
