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


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.



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.



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.