aria-current state

When there are set of elements, one among them is active, we have been communicating this state today with one or other techniques to assistive technology users. Techniques that we have been following:

 

  1. Using off screen techniques
  2. Using title techniques
  3. Removing href attribute or providing role=”presentation” if they are actionable elements

These are the hacking techniques to convey the current state of the element to the assistive technology users.

aria 1.1 introduced aria-current attribute to convey the current state of the element programmatically. We don’t need to use hacking techniques any more. Aria-current is enumerated type and accepts list of token values. They are,

 

  1. Aria-current=page, represents the current page within the set of the pages. For ex: in the pagination, we can set this attribute to the page which is currently active
  2. aria-current=”step”, represents the current step within the process. For ex: in the ecommerse websites, we have checkout process. Typically, checkout process consists of few steps such as billing information, shipping information, payment method, conformation and so on.. we can set aria-current=”step= to the step that is currently active.
  3. Aria-current=”location”, represents the current location within the context or environment. For ex: in the flow chart, we can set this attribute to the location that is currently active.
  4. Aria-current=”date”, represents the current date within the collection of dates. For ex: in the calendar, we can set this attribute to the date that is currently active
  5. aria-current=”time”, represents the current time within the set of times.
  6. aria-current=”true”, represents the current item within the set
  7. Aria-current=”false”, does not represent the current item within the set.

Notes for assistive technology vendors

  • Any other values apart from the mentioned values should be treated as aria-current=”true” by assistive technologies.
  • If the attribute is not present or its value is an empty string or undefined, aria-current state MUST NOT be exposed by user agents or assistive technologies.

 

Author notes

  • Author should not use Aria-current and aria-selected interchangeably as they are not one and the same and they are different. In few cases, author might have to use both aria-current and aria-selected. For ex:, in the tree view, aria-current is to be used for the currently active page and aria-select to be used for the item that user is navigated to..
  • Authors SHOULD only mark one element in a set of elements as current with aria-current.

 

 

Term role

We have definition role in the aria 1.0 and term role supplements the definition role. Term is nothing but a word or phrase with the corresponding definition and it is related to HTML <dt> tag. Let us take simple example to understand about this roles. Web Accessibility is the term. Provides equal access on the web for all the users including people with disabilities is the definition.

When the term and definition roles are not defined then screen reader does not understand what is term and what is definition over there. Screen reader announces that as paragraph without any semantics and this is a problem.

When term role and definition roles are defined then screen readers are expected to announce like as: “term web accessibility. Web accessibility definition provides equal access on the web for all the users including people with the disabilities”

Author notes

  • Term role should not be used on the interactive elements like links

 

Code snippet

<div role=”term” id=’test’ aria-describedby=”dfn”>

w3c

</div>

<div role=”definition” id=”dfn”>

World Wide Web Consortium

</div>

 

References

 

 

Table role

We have grid role in the aria 1.0 and we supposed to use this role only for interactive tables. However, we have been using the grid role even for the static tables. The method is that We define grid role and aria-readonly=”true” for the container. When we do so, screen reader announces it as read-only grid. With this announcement, screen reader users understand that it is a static table. Although the actual purpose is solved by using this technique, it is not appropriate method from the standards point of view.

To avoid all the confusions, aria 1.1 introduced table role for static tables and it is equivalent to the html table tag.

Author notes

 

  • Author should use either row or row group as a children for the table role.

 

Code snippet

<div role=’table’ id=’test’ aria-rowcount=’3′ aria-colcount=’2′>

<div role=’row’>

<span role=’cell’>cheese</span>

</div>

</div>

 

References

aria1.1 specification-table

 

wai aria1.1 authoring practices-table

 

aria1.1-table working example

Switch role

We have checkbox role in aria 1.0. We have been using this checkbox role for many toggling functionalities irrespective of the visual appearance is.. If the checkbox role is applied for the widgets that looks like on or off then screen reader announce it as checkbox not checked/checkbox checked, , which is not correct interpretation, which Is not appropriate, which is not logical, which is not more meaningful, which Is not more semantical. The reason is that visual appearance is on or off and screen reader announces it as not checked or checked and they do not identical/same. therefore, screen reader user does not perceive the same information as sighted perceives.

ARIA 1.1 Switch role helps to bring the same level of experience to the screen reader users as like how a sighted person perceives. When switch role is applied then screen reader announces as “switch on/switch off”, which is more meaningful, more logical, more appropriate. Switch role is nothing different from checkbox role and only to be used when visual appearance of the element is like on or off. Switch role has on/off values but not check/uncheck. Switch role does not have mixed value.

Author notes

  • Author should use The aria-checked attribute to indicate the input is on (true) or off (false).

 

 

Figure role

All of you would have read the books in school days or college days or even now. You might be wondering that Why I am talking about books. Especially in the books, we see lot of figure patterns. In these books, We will have figure in the right hand side and depiction of that figure in the left hand side. Let us take simple example

In the right hand side, We have the figure called US census statistics on the disability. In the left hand side, we have the information like almost 1 in 5 people reports to have some type of disability(see figure 1. This is how we have it in the textbooks. In general, we call this type of images or pictures as figures. Screen reader announce these type of pictures as “image” or “graphic” , which is not correct interpretation when it compares with the real world. These type of pictures are called as figures in the real world.

figure role helps to bring the same level of experience to the screen reader users as well like the how those type of images are being interpreted in the real world. When figure role is applied then screen reader announces as “figure”, which is more identical, more meaningful, more logical, more appropriate,  when it compares with the real world. Figure role is equivalent of HTML 5 figure. We typically use figure role for the figures in the books. Figure role can be used for the chats, code snippets, diagrams, example text. Parts of a figure  may be user navigable

Author notes

  • Authors SHOULD provide a reference to the figure from the main text, but the figure need not be displayed at the same location as the referencing element.
  • Authors MAY reference text serving as a caption using aria-describedby.
  • Authors MAY provide a label using aria-label or MAY reference text serving as a label using aria-labelledby.

Notes for assistive technology vendors

  • Assistive technologies SHOULD enable users to quickly navigate to figures. Mainstream user agents MAY enable users to quickly navigate to figures.

 

3Ws(WWW) of accessibility

You might be wondering what is 3ws(WWW) of accessibility. Surely, it does not stand for world wide website and it stands for:

 

  • First w-what is accessibility
  • Middle w-why accessibility is important
  • Last W-when to implement accessibility

What

Accessibility is nothing but providing equal opportunity or equal access on the digital content for all the users including people with disabilities. If your site is accessible, people with disabilities can perceive, operate, navigate and understand the content like anybody else.

 

Why

you would agree with me that today web is playing vital role in our day to day activities.

Simple examples:

 

  • If I want to do online shopping then I will open amazon website and place the order
  • If I want to transfer money to my friend then I will open banking website and do the transaction
  • If I want to have some food then I will open food website and place my favorite food
  • More importantly, if I want to learn something then I will open relevant website and will do the study on the web itself.

These are very simple activities. We can do much more activities on the web in the day to day life. imagine these sites are not accessible, people with disabilities are excluded on your website. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. Moreover, nearly, 20% of the population suffers from one or other disorder. To tap or to reach this population, one should make their web accessible. Making sites accessible results in maximizing the profits of the organization too.

 

When

Some organizations might think that accessibility is an extra thing and would want to do at the end. If you think so, accessibility(it) becomes expensive and time consuming. Accessibility should be embedded during development process itself but not at the end. This would save your time, money, and effort. even modern technologies like react, angular, view supports in incorporating the accessibility during the development itself.

 

 

Feed role

Most of you would have heard that about infinite scrolling or auto scrolling widgets. the common examples could be that all social networking websites like Facebook, twitter, LinkedIn. Basically, what happens here is that Stories or articles within the feed keep on getting added or removed as user navigates in this social networking sites and this would never end and it is an infinite. let us understand how sighted user navigates this widget.
There is a scrolling feature available on this widget. user can scroll by using mouse and view more number of articles. For ex: there are 5 articles or stories, let us say 1 to 5, within the feed container on the page. When user scrolls, it displays next set of 5 articles or stories, let us say 6 to 10. When user scrolls again, it displays another set of 5 articles or stories, let us say 11 to 15.

However, when screen reader user navigates through this widget in the reading mode then he or she encounters only those first five articles or stories. When I say reading cursor or reading mode then navigation is through down arrow only. After navigating the 5th article, he or she navigates to the footer region or navigates to the whichever the content is present after this widget. User does not get the 6th article during arrow key navigation and this is a problem. In a nutshell, auto scrolling feature is not accessible in the reading mode or browse mode for the screen reader users.

In order to address this problem, aria 1.1 introduced the feed role. When feed role is applied then assistive technology and browser interact with each other and provides the best experience to the screen reader users while navigating the auto scrolling widget in reading mode. In other words, it enables the screen reader user to navigate through all the articles within the feed container in the reading mode or arrow key navigation.

Author notes

 

  • Authors should use article role as children in feed
  • Authors SHOULD make each article in a feed focusable
  • Authors should provide brief label to each article in feed
  • Authors should provide more description to the articles in feed by using aria-describedby
  • Authors should set aria-busy while adding or removing the articles at either end of the list
  • authors MAY specify aria-setsize on article elements if article supply is static
  • authors MAY set aria-setsize to -1 if total number of articles is extremely large, indefinite, or changes often

 

Code snippet

<section role=”feed” id=”test”>

<article>This is article 1</article>

<div role=”article”>This is article 2</div>

</section>

 

 

References

 

Switched from Nokia C5 keypad mobile to Android Moto G3 touch mobile

I used Nokia C5 mobile for about 6 years and it was purchased with my salary around in the year of 2009. Even Earlier to 2009, I used to have mobile but all that was with the help of my father support.
Later on, the technology is growing up with high speed day by day and there is a touch phone revolution in the mobile space after few years. I was thinking that I had to change my phone because I wanted to follow the technology. However, there were 2 strong reasons that were stopping me to purchase new phone.
One was that I was scared of touch phone because it’s accessibility. Many of my friends insisted me to purchase iPhone because it is pretty much accessible. Unfortunately, iPhone is very expensive in India. Somehow, I never wanted to spend huge amount on the phone because I am very careless to take care of it. Other reason was that Nokia C5 was my first mobile with my salary and had some sort of emotions on it. I wanted to purchase touch phone at any cost by keeping all my reasons apart because I want to get updated.
I started finding out the options to purchase the touch phone with low cost. As mentioned already, iPhone was never my option at all. I found Android touch phones are better in terms of its accessibility and cost during my study. Finally, I have taken dare step and purchased new Android Moto G3 phone around 4 months ago.
Initially, I had a tough time to access Android Moto G3 mobile. It is because I never accessed touch mobiles earlier. The Nokia C5 mobile that I used earlier was having basic number/key pad that can be touched and felt and was not even “QWERTY” keyboard phone. After few days, I started getting used to Android touch phone slowly. All the actions that we have to do in the touch phone is through the gestures method only. I have learnt those gestures and using my touch phone pretty comfortably today.
I am extremely happy for using touch smart phone because it made me pretty independent in the few areas. Especially, booking the cabs such as Ola, Uber, taxi for sure and so on.., has become very simple and accessible in the my new smart touch phone. When I was using my Nokia C5 phone then I was unable to book the cabs. It was because of the no cab app support for the old phones/models and as a result, I used to take help from friends to book the cab whenever I have cab requirement in the past. Not only this cab support I enjoy in the my new phone but also I enjoy using the apps such as what’s up, TOI, and so on.. all these apps are used for the personal purpose.
on other hand, my new phone is also helping me in the my official life as well in terms of attending the meetings that are scheduled in the hang outs and GTM(go to meeting). The ‘hangout’ and ‘GTM’ apps are used at the optimum level during my travel from office to home and vice-versa. I also would like to convey that all the apps that I am using in the android phone may or may not be fully accessible but there is a work around to access those apps.
I would like to conclude that smart android phone with low cost really making my life pretty independent.