WEB Accessibility – tips and tricks

Below is the list of issues which I normally face with web accessibility and few tricks on how we can fix them to make the web more accessible –

Inaccessible components

When div is used to create buttons or other components, there can be an accessibility issue.
case1 –

 

case 2 –

 

button in case 1 would be inaccessible as it is just a div which looks like a button.
This can be fixed by adding tabindex and role of button –

Similarly other components like navs, lists , labels etc. can be fixed.

Use “for” to link labels with elements

while writing a typical form which has some elements like input, check boxes, radio buttons, “for” should be used with –

Proper nested headings

Most of the screen readers have the ability to navigate through headings.
Headings need to be in sequence on a web page so that content is meaningful and can be navigated properly.
Page sections should be divided properly with headings so that content is more accessible

heading accessibility

 

Tabindexes

Tab indexes should be used on components which are not getting focus while being used by keyboard.
tabindex="0" should be added so that element is tabbed in the same order as it is present on DOM.
If the element is just for visual purpose then tabindex="-1" should be added to skip the element.

Any other tabindex except 0 or -1 should be avoided.
It can result in unexpected behavior, if not used properly.

Use native components where ever possible

Native components like check boxes, radio buttons should be used in most of the cases. If we still need to use div or span in-place of them, ARIA attributes and roles can be used to make it accessible.

aria-checked would allow keyboard user to read default state of the checkbox, false in this case.

Maintain focus on elements in case of hiding/show of elements

If we have a lot of elements in our web page which keeps hiding and showing the focus will be lost at some point. For example- on click of a button if a new element is shown and that button should go away then focus is lost and action won’t make any sense.
Javascript should be used in such cases to ensure that focus is maintained programmatically like this

aria-label and aria-labelledby

aria-label and aria-labelledby should be used if we want to label any element explicitly.
aria-label will have the text of label that will be associated with the elements which will be used by a screen reader.
aria-labelledby on another hand will refer to another label present in DOM and screen reader will associate this to the element

Roles

Roles should be added if we do not use native elements but do not invent your own roles.
Roles can be –
+ Abstract Roles
+ Widget Roles
+ Document Structure Roles
+ Landmark Roles
Valid roles and its meaning can be found here –

Roles Model

Alt text for images

If images are there to convey a message, alt text should be added to the images.
If images does not convey anything, it should be skipped by adding tabindex=”-1″.

Skip Links

Skip links can be created on the webpage to navigate web page for keyboard or screen reader user.
These links are then made hidden from the ui page.

Leave a Reply

Your email address will not be published. Required fields are marked *