Month: March 2018

aria-roledescription property

by

March 11, 2018

4:35 pm

Leave a comment on aria-roledescription property

ARIA

, ,

We have been doing lot of things for an element like adding or changing the name of the element by using aria-label, adding instructions by using aria-describedby, changing the states like pressed/not pressed, checked/not checked by using other aria techniques. Is it possible to customize the name of role or role of the element? I did not mean from the button to link and vice-versa. I meant different. Let us understand with the scenario what I meant.

For ex: button is the name of the role. is it possible to change from button role to attachment button as name of the role? It is not possible in aria 1.0

Aria 1.1 introduced aria-roledescription property to customize the name of the role. The method is that Put the string or custom text in the aria-roledescription attribute and it would become as a role of the element. Assistive technologies would announce the string as name of the role that is presented in the aria-roledescription but not actual role of the element. Let us understand this better with the same scenario

Button role is the actual role of the element. If I want to change from button role to attachment role then I simply add the string “attachment button” in the aria-roledescription. That is all, assistive technologies would announce it as “attachment button”.

We need to be careful while using this attribute as it suppress the native role of the element and announces the string that is presented in the aria-roledescription attribute as the name of the role.

Author notes

  • Authors should use this property in conjunction with wai aria role or implicit aria semantics.
  • Authors should limit the use of this attribute to clarifying non interactive elements such as group or region or to provide the description for a widget.
  • Authors should ensure that The value of aria-roledescription is not empty or does not contain only whitespace characters.

 

Notes for assistive technology vendors

  • Assistive technologies SHOULD use the value of aria-roledescription when presenting the role of an element, but SHOULD NOT change other functionality based on the role of an element that has a value for aria-roledescription. For example, an assistive technology that provides functions for navigating to the next region or button SHOULD allow those functions to navigate to regions and buttons that have an aria-roledescription.

 

aria-current state

by

March 11, 2018

6:56 am

2 Comments on aria-current state

ARIA

, ,

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

by

March 10, 2018

4:54 pm

2 Comments on Term role

ARIA

, ,

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

by

March 10, 2018

4:41 pm

Leave a comment on Table role

ARIA

, ,

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

by

March 10, 2018

4:27 pm

Leave a comment on Switch role

ARIA

, ,

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

by

March 10, 2018

3:59 pm

Leave a comment on Figure role

ARIA

, , , , , ,

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

by

March 5, 2018

3:53 pm

Leave a comment on 3Ws(WWW) of accessibility

WCAG

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.