Web Accessibility

Web Accessibility

Introduction:

There is a saying “world is small”. I never believed it until I started using internet. Now a days we can get anything from internet, reach out to any person, watch a movie, book a ticket and order food etc. with just few clicks. As of most recent survey around 3.5 billion people uses internet. We even cannot imagine our life without internet.

Have you ever wondered how people with disabilities use internet and access the content present in the websites? Have you ever thought if it is possible for people with visual impairment to access the websites? You will find the answer for yourself after reading my next series of blog posts.

What is Web Accessibility

Among the 3.5 billion people who uses internet, it is believed that around 60 million people have at least one type of disability.

Web accessibility means making the content present in the web available and accessible for people with disabilities. Each and every user must be able to understand, perceive and operate the content or information present in the websites. To be short, Web accessibility means that people with disabilities can use the web.

Currently most of the websites have accessibility barriers and makes it difficult for people with disabilities use the web.

Why Web Accessibility

Implementing web accessibility helps people with disabilities to access the content present in the web without the help of other persons. It provides equal opportunities and equal access to several aspects like Government, education, employment, healthcare and many more for people with disabilities.

Also there is LAW in several countries which states the schools, universities, airways, government entities websites must be accessible to all. The websites or companies which fails to obey the law ends up paying billions of fine to government.

Below are the few benefits

1. Equal access and equal opportunities for people with disabilities.
2. Increase in customer base as users with disability chooses the product which is more accessible
3. Improves SEO ranking as implementing accessibility makes the content of the website very clear and well structured.
4. Abide to law

Web accessibility not only benefits people with disabilities but also benefits people without disabilities. For example user working on computer which does not have a mouse or the user has temporary motor disability due to broken hand.

Disability categories for Web

All though 60 million people who uses internet have at least one type of disability, all types of disability users won’t face trouble in accessing the content present in internet. But few types of disability users as listed below find it difficult to access the content present in web.

The major types of disabilities for web are

• Visual Impairment
• Hearing Impairment
• Mobility disability
• Cognitive disability

Sources:

http://webaim.org/intro/

https://www.w3.org/WAI/intro/accessibility.php

ARIA Role REGION

ARIA role region is assigned to a section of a page which contains sufficiently important information for the user. ARIA region should be used only when the particular section cannot be marked with landmark roles such as main, complementary, navigation etc. By providing role region to important content it would be easy for the user to navigate to the section.

<div role=”region”>

Section content comes here…

</div>

Along with role region, a brief description should be provided so that user knows purpose of the content present in the section. Developers/consultants can use aria-labelledby to associate the section with a visible label or text on the page. The visible label or text must be in heading tag h1 to h6 based on the hierarchy or should have role heading.

<div role=”region” aria-labelledby=”sectionHeader”>

<h3 id=”sectionHeader”>Feedback</h3>

Section content comes here…

</div>

Aria-label can also be used to convey the purpose of the content present in the section.

<div role=”region” aria-label=”feedback”>

Section content comes here…

</div>

NVDA or JAWS screen reader will announce a section as region only if it has role region as well as aria-labelledby or aria-label to describe the content present in the section.

References:

• https://www.w3.org/WAI/GL/wiki/Using_the_region_role_to_identify_a_region_of_the_page
• https://www.w3.org/TR/wai-aria-1.1/#region

Accessible Star Rating Widget

Star Rating Widget

      A star rating widget usually contains images of 5 stars which is used to rate an object. The widget is mostly seen in e-commerce, entertainment and several portals where the feedback of the user is valued. A user simply clicks on the stars to rate an item. For example if there are 5 stars and user clicks on 3^rd star, the rating would 3-star out of 5.

      A mouse user can easily move to a particular star and clicks on it to give rating. Mostly an image would be displayed with 5 stars and developers track where user is clicking with mouse and change the image dynamically. But users who rely on keyboard may not be able to activate the star using keyboard alone.

      

      To make it accessible with keyboard as well, semantic HTML elements like radio buttons has to be used to represent each star.

An example of star rating widget is there in w3c Web Accessibility Tutorials (Opens in new window) website.

URL : https://www.w3.org/WAI/tutorials/forms/custom-controls/

Implementation:

      Radio buttons are used to represent the 5 stars and each radio button is associated with a label respectively. An off-screen text is provided with in a span and SVG is used to display the “Star” images visually on the screen. The off-screen text and svg are enclosed in the label.

If a radio button is checked, the corresponding svg star gets an underline and also all the stars present till the selected radio button color changes.

Drawback:

      In IE, when keyboard focus is on 3-star radio button and user activates it, the 3-star radio button gets checked. Now on hit of TAB key, the focus moves to the svg of 4^th radio button but a visible focus indicator or underline is not present around the star image. Hence keyboard user may not understand on which element the keyboard focus is on.

Ideally the focus should come out of the rating widget since all the radio buttons belongs to single group. Due to the presence of svg element, the focus is moving to the next star without a keyboard focus indicator.

Adding attribute to svg

      To overcome the above problem, just add “focusable” attribute to the svg element. If the attribute value is set “true” then svg element won’t receive keyboard focus. (tabindex=”-1” doesn’t work in this case).

HTML Code:

<input value="0" id="star0" checked type="radio" name="rating" class="visuallyhidden">

<label for="star0">

       <span class="visuallyhidden">0 Stars</span>

       <svg viewBox="0 0 512 512" focusable=”false”>

              <g stroke-width="70" stroke-linecap="square">

              <path d="M91.5, 442.5 L409.366489, 124.633512"></path>

              <path d="M90.9861965, 124.986197 L409.184248, 443.184248"></path>

              </g>

       </svg>

</label>

Now when the keyboard focus is on 3^rd star and on hit of TAB key, the focus moves out from the rating widget.