If you are part of software development lifecycle then you must have heard the term of Accessibility. It is nothing but to keep your software accessible for all type of users independent of their physical or mental abilities and for all type of hardware. Similarly, Web-Accessibility talks about the Accessibility of your web-content or web-application or website.

In nutshell, The Web is designed to work for all people irrespective of their hardware, software, language, culture, location, or physical or mental ability. When your web content meets this goal, it is accessible and web equality is broadly classified into the following categories

  • Hardware Equality: web-content should be accessible with or without a keyboard, mouse, and touch screen(mobile, tablets), and any other way users access the web, including screen readers and voice assistants like Alexa. Your content should be accessible on all kind of networks
  • User Ability Equality: web-content should be reachable to all kind of users without discriminating their physical or mental abilities like auditory, visual, physical, or cognitive abilities

Accessibility is the practice of making your websites usable by as many people as possible without any discrimination. Providing accessible sites are part of the law in some countries, which can open up some significant markets that would otherwise not be able to use your services or buy your products.

Hardware Accessibility

These days, we are using a different type of hardware like mobile, tablets, smart-watches, voice assistants like Alexa. All of this hardware have different capabilities like some have touch screens and some don’t have access to high-speed internet connections. In order to make your web content accessible, you have to consider the following popular accessibilities:

  • Mobile-Accessibility: In order to keep your web-content reachable to mobile and other compact devices we can use responsive and mobile-first design approach
  • Keyboard-Accessibility: your web content is Keyboard-Accessible when it is accessible through keyboard only without a mouse or any other hardware, it is a good idea to try out your website or web content using just the keyboard to see how you get on. Can you use the tab key to move between the different controls of a web form? can you click a clickable element through Enter key? If not then your website is not Keyboard-Accessible

These are the most popular Hardware-based web-accessibility, there are other devices which also have some sort of hardware limitation.

User Ability Accessibility

I never realized the importance of speech-to-text software until I have met some people who are dependent on such tools to access the computer/web-content. Even after this realization, I never understood that 15% of the world population has some sort disability according to WHO, in order to provide your web content to such differently-abled user, you have to understand their following category

People with visual impairments: User with visual impairments include people with blindness, low-level vision, and colour blindness. These people use text-to-speech or screen reader software to access web content(i will discuss in a later section how to keep you content accessible for such people)
People with hearing impairments: user with auditory impairments or deaf people, this group of people has either low hearing levels or no hearing at all.
People with mobility impairments: These users have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs( You must be aware of Stephen Hawking, he falls under this category)
People with cognitive impairments: Cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities to people have difficulty thinking and remembering.

Don’t use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7, Expand abbreviations — instead of writing Jan, write January.

There is no rule that says all content has to be 100% accessible to all people and for all hardware. You just need to do what you can and make your web-content as much accessible as possible. In this section, I will talk about how we can implement Accessibility targeting different Hardware and differently-abled person

USE Semantic HTML:

HTML itself is web-accessible if used correctly and wisely, HTML5 new element/tags make it more accessible

but how to quantify the corrections here?

It means using the correct HTML elements for their intended purpose as much as possible. You can handle onClick event on div element and apply some background colour through CSS to behave it like button everything will work fine like normal button until you find

  • You can not move focus through Tab key
  • You can not press it through Enter key
  • Screen readers not calling it button which is clickable

For a complete list of different HTML element correct intended checkout MDN reference

Meaningful text labels: Don’t just use “Click here” for your labels, as screenreader users sometimes get up a list of buttons and form controls without mentioning their intend of button

Text alternatives: Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. For now, we’ll talk about the accessibility of the <img> element. img element comes with alt attribute which helps the screen-reader software to read the visual content in a meaningful way through alt attribute, moreover on the slow network if images fail to load, it will also help browsers to present the meaningful textual description of the image so we can achieve multiple target accessibility through a single attribute.

CSS and JavaScript accessibility best practices:

CSS and JavaScript are not web-accessible by default like HTML, but they still able to help accessibility, depending on how they are used.

CSS:

As we have seen under HTML accessibility that it is possible to use CSS to make any HTML element look like anything fancy but don’t change it so much that it no longer looks or behaves as expected. Moreover, avoid overriding browsers default CSS styling for some of the element or if you change them then try to keep them close to native behaviour for example
Hyperlink or <a> tag has different states like hover, visited, active, focus by default browsers. So, try to keep different colour for each of these states which further boost keyboard accessibility

Colour and colour contrast: When choosing a colour scheme for your website, make sure that the text (foreground) colour contrasts well with the background colour. Your design might look cool, but it is no good if people with visual impairments like colour blindness can’t read your content, below is the online tool to check the colour contrast of different colours

http://webaim.org/resources/contrastchecker/

JavaScript:

JavaScript can also break accessibility, depending on how it is used, by default, there is no inbuilt support in JS for Accessibility.

We have learned that it is possible to create a custom button using div and custom CSS but it will lack many many accessibility features like tab focusing, screen-reader accessibility etc. But we can achieve some of these accessibility using JavaScript eg.

  • Handle Keyboard event to implement Tab and Enter key click
  • Handle Mouse Event to implement blur and focus state in your Button
  • It is not possible to provide text to speech support in your custom button using JS for such scenario we have WAI-ARIA attribute which provides extra semantics for screen reader user(we will talk about them in next section)

We should avoid creating such custom widget or element which are already available in HTML through JS, but there are some widget/element/complex UI controls which we can not create without using complex JS & CSS, ex.HTML5 Calendar widget is not avaiable on all browser. To implement accessibilty in such widgets, we have to use JS event and WAI-ARIA attrribute(explained below)

You should keep unobtrusive JavaScript in mind when creating your content. The idea of unobtrusive JavaScript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without JavaScript

WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve openness wherever it is lacking.

As we have seen above, it is not possible to add accessibility support for assistive technologies like screen reader in your Custom Button-through JS. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. You can learn more about WAI-ARIA in the next Story where I will talk about its usage.

Originally Published on Medium

Contact Taksa for your Outsourcing Web Development Project requirements and see how our developers incorporate best scalable application framework into your project.