aria-live(property)

Description

In this modern web, it is very common to have dynamic updates/changes on the web. If you are wondering what the dynamic changes on the web is then here is the explanation. Dynamic changes are nothing, but the parts or portion of the web page gets updated without reloading the entire page and it is as simple as that. The examples could be chat log, stock ticker, cricket score board, ticket’s price list, search result on the fly, and so on. That said, When the dynamic changes/updates take place on the web then it is visually apparent that something is going on. However, same may or may not be communicated to the screen reader users as screen reader users can interact with only one part of the page at a time and they may not aware of the changes that are taking place at the other part of the page. If the update about the changes is not communicated/notified to the assistive technology users, then it is going to be nightmare for the users. It is important that authors need to communicate/notify these changes to screen reader users to make sure that users of screen reader are not lost on the web page.

ARIA introduces aria-live attribute or live roles to communicate/notify these dynamic changes to the screen reader users without moving their focus. Let us discuss more about aria-live in this post. Aria-live Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. To put it simpler, as soon as we set aria-live on any HTML container, the HTML container becomes live region. whatever the changes that are taking place in this container, assistive technologies will notify those changes to the users based on the value of the aria-live that we have set. The value of aria-live attribute is token and it accepts 3 values. The accepted values of aria-live are assertive, polite, and off, and will discuss in-details of purpose of all these values in the author notes section of this post.

Author notes

  • Aria-live can be used on any base markup and it is the global attribute
  • The default value of aria-live is off for all elements
  • Authors need to set the value of aria-live as assertive(aria-live=”assertive”) only if the updates are critical(like user name and password are incorrect). The reason is that assertive value interrupts the user’s current task and notify the updates immediately
  • Authors need to set the value of aria-live as polite(aria-live=”polite”) only if the updates need to be notified by assistive technology at the next graceful opportunity. The reason is that polite value does not interrupts the user’s current task and notify the updates at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.
  • Authors need to set the value of aria-live as off(aria-live=”off”) when the updates need not to be notified to the assistive technology users
  • Authors sometimes use hidden live regions to notify the important updates to the screen reader users. It is important to remember that these hidden live regions must be removed from the DOM as soon as the purpose is accomplished. Failing to do so results the screen readers to read the same live region content in the browse mode/reading mode without any context and this creates confusion to the users like why that text is present and so on.
  • if multiple changes to a live region should be spoken as a single unit of speech then follow the below steps
    • apply aria-busy at the start of updates to the region
    • perform necessary updates
    • remove aria-busy (or set to false) at the end of updates
  • For robust support, it is advised to include aria-live always in the initial markup itself but do not add the aria-live container dynamically with the script. Even author wants to add aria-live container dynamically to the DOM with the script(better to avoid this approach as much as possible), it is important to maintain some time delay to insert the dynamic message in the dynamic container for screen readers to pick this dynamic message.

    Do not do this:

    <div class=”will-change”>

      <!—both live container and content within the live container will be updated with Javascript –>

    </div>

    <script>

    document.querySelector(“.will-change”).setAttribute(“aria-live”, “polite”);

    document.querySelector(“.will-change”).textContent = “New content!”;

    </script>

    Instead, Do this:

    <div aria-live=”polite” class=”will-change”>

        <!– content will be updated with Javascript –>

    </div>

    <script>

    document.querySelector(“.will-change”).textContent = “New content!”;

    </script>

Sample code snippet

Here are sample code snippets for all the 3 different values

<h1>Polite</h1>

<button onclick=”updateContent(‘msg’)”>To view the updates, click this button!</button>

<br/> <br/>

<div id=”msg” role=”region” aria-live=”polite” id=”msg”></div>

<h1>Assertive</h1>

<button onclick=”updateContent(‘msg2’)”>To view the updates immediately, click this button!</button>

<br/> <br/>

<div id=”msg2″ role=”region” aria-live=”assertive”  id=”msg”></div>

<h1>Off</h1>

<button onclick=”updateContent(‘msg3’)”>No updates will be announced, so don’t click this button 😂!</button>

<br/> <br/>

<div id=”msg3″ role=”region” aria-live=”off” id=”msg”></div>

Complementary info on aria-live

authors sometimes use CSS attributes(from display:none to display:block and vice-versa) to show and hide the dynamic message in the live container in order to notify the message to the screen reader users. However, this may not work as expected in some of the screen readers. It is better to use script to inject the dynamic message in the aria-live container in order to get robust support in most of the screen readers.

References

WAI ARIA1.1 specification: aria-live(property)

aria-busy(state)

Description

In this modern web, it is very quite common to have dynamic updates/changes on the web. If you are wondering what the dynamic changes on the web is then here is the explanation. Dynamic changes are nothing, but the parts or portion of the web page gets updated without reloading the entire page and it is as simple as that. The examples could be chat log, stock ticker, cricket score board, and so on. That said, When the dynamic changes/updates take place on the web then it is visually apparent that something is going on. However, same may or may not be communicated to the screen reader users. If the update about the changes is not communicated to the assistive technology users, then it is going to be nightmare for the users. During the dynamic changes, one can observe 2 steps. The first one is that web application or web page communicates to the user that it is currently busy with the help of some animations (such as spinner, loading, and other indicators) before actual changes take place on the web page. Basically, it indicates that we should not interact with the web page while update process is going on and need to wait till the update process is completed on the page. The second step is that actual changes display on the web page once the update process is completed. It is important that authors need to communicate these 2 steps to screen reader users to make sure that users of screen reader are not lost on the web page

ARIA introduces aria-busy attribute and aria-live attribute or live roles to communicate step1 and step2 respectively that is mentioned above. Let us discuss more about aria-busy in this post. Aria-busy Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. Aria-busy accepts 2 values and they are true and false. The default value of aria-busy is false for all elements. When aria-busy set to true for any element then it indicates that the element is being modified/updated.

Author notes

  • Aria-busy can be used on any base markup and it is the global attribute
  • The default value of aria-busy is false for all elements
  • When aria-busy set to true for any element then
    • screen readers are not supposed to expose any of the content which is inside of that element
    • It will be good if screen readers announce “busy” audibly when that element receives the focus
  • if multiple changes to a live region should be spoken as a single unit of speech then follow the below steps
    • apply aria-busy at the start of updates to the region
    • perform necessary updates
    • remove aria-busy (or set to false) at the end of updates
  • authors must set aria-busy to true until and unless all the children of the widget are loaded if the dynamic widget (live region) has any children

Sample code snippet

<div aria-live=”polite” aria-atomic=”true” aria-busy=”true”>

  <span>Total: $400</span>

</div>

Complementary info on aria-busy

As discussed in the author notes section of this post, screen readers should not expose any of the content that is inside of the element that has aria-busy set to true. Except JAWS, however, rest of all other screen readers exposes the content that is inside of the element that has aria-busy set to true. Similarly, as of now, no screen readers announce busy state audibly when element that has aria-busy set to true receives the focus.

References

Tooltip role

Description

Tooltip is a small bubble that appears when hover over or focus on the element and it provides the contextual information of the triggering element. To give you a simple example, we sometimes see question mark (help) icons beside the elements on the web. When we hover over or focus on this question mark icon then it displays the contextual information of that particular element. Now the question is that how to make these tooltips accessible to people with disabilities. Let us look into that. Authors tend to use HTML title attribute to display the tooltip as title attribute belongs to the native HTML but it is not suggested though. The reason is that the HTML title attribute is not well supported in the cross browser platforms, especially mobile/touch phones. Even though HTML title attribute belongs to the native HTML, it is the fact that support of the title attribute is not so great. Thus, the option of using HTML title attribute to display the tooltip is not encouraged. Instead of using HTML title attribute, Authors must use different techniques (such as scripts, CSS, and so on…) to display the tooltip. While constructing the tooltips with the different techniques, authors need to make sure that tooltip gets displayed even on focus along with the on hover. When authors follow this on focus pattern along with on hover pattern then the tooltip is going to be accessible to keyboard users. Now the question is that, if the tooltip is accessible to the keyboard users then do you think tooltip is going to be accessible to the screen reader users as well automatically?  Answer is no. There are some additional efforts authors need to put in order to make the tooltips accessible to the screen reader users. Let us look into that.

It is pretty simple to make the tooltips accessible to screen reader users. The solution is ARIA. Authors need to use just ARIA tooltip role to make the tooltips accessible to the screen reader users. To know how to use/implement ARIA tooltip role, please follow author’s notes section in this article. It is important to note that tooltip semantics/role would not be communicated to the users by most of the screen readers in spite of tooltip role is applied to the appropriate container. Not announcing the tooltip semantics/role is absolutely fine as long as tooltip information is conveyed with short delay or no delay to the users. Authors also need to remember that tooltips content should be short and sweet! The main reason for asking the tooltips content to be shorter is that screen reader announces the complete tooltip information at a time to the users and there is no provision for the users to navigate the tooltip content character by character/word by word/line by line and so on… when the tooltip is constructed as per the ARIA specification. With this restriction, screen reader users would not be able to comprehend the content very easily if the tooltip content is so longer unless user listens to the content again and again from the beginning. Thus, the request for the authors is that keep the tooltip content as short as possible.

There is common misconception that tooltip and non-modal dialog are one and the same but they are different. Typically, tooltips would not have any focusable elements whereas non-modal dialog would have focusable elements.

Author notes

  • Tooltip role must be set on the element that serves as the tooltip container.
  • aria-describedby must be set on the element that triggers the tooltip and it references the tooltip element
  • Tooltip widgets should not receive focus and A hover that contains focusable elements must be made using a non-modal dialog
  • Focus must stay on the triggering element while the tooltip is displayed
  • The tooltip widget must be shown via both on focus and hon hover
  • The tooltip widget must be hidden by removing focus from the element or by moving the mouse off the element
  • The tooltip widget should be hidden by pressing the Escape key
  • tooltip should not be disappeared while it’s being hovered

Sample code snippet

<div class=”ttipcontainer”>

  <button  class=”co_tooltipElement” id=”newButton05-2″ aria-describedby=”coid_accessibleTooltip_1″> Recent Searches </button>

  <span tabindex=”-1″ class=”co_accessibilityLabel” id=”coid_accessibleTooltip_1″ aria-hidden=”true” role=”tooltip”>Shows information of your recent searches</span>

</div>

Reference’s

WAI ARIA: few mistakes to avoid

There is nothing wrong using ARIA to remediate/fix the accessibility issues as long as the authors have thorough knowledge on how and when to use ARIA. At the same time, we need to remember that misuse of ARIA damages the accessibility much more than not having ARIA. There is a saying like no ARIA is better than bad ARIA. This blog post attempts to highlight some of the common mistakes that author does while remediating the accessibility issues with the help of ARIA.

WAI-ARIA mistake #01: Incorrect WAI-ARIA syntax

As you know, most technologies require a certain syntax in order for things to work as expected. Similarly, WAI-ARIA also requires a certain syntax in order for things to work the way they’re supposed to. Failing to provide the correct syntax can lead to unexpected results. Let’s discuss some of the common syntax errors that author introduce in their code, and result in assistive technologies not working as expected.

  • Role values are assumed to be case insensitive: Role values define the purpose of objects in the page. Authors often fail to implement these values following the lowercase convention established by the WAI-ARIA specification. For example, role=”LINK” can be provided, with the value types in as uppercase letters and as a result, assistive technologies cannot identify the object as a link. Authors need to remember that role values are case sensitive, and need to be typed in lowercase.
  • Incorrect spelling for attributes or values: Attributes are often spelled incorrectly. For example, aria-label might be spelled out as aria-lable. As a result, screen readers fail to announce the accessible name of the control. Authors need to be mindful and make sure attributes are spelled correctly.
  • Incorrect or invalid role declarations: Authors sometimes declare roles incorrectly. For example, role=”alert” might be declared as aria-role=”alert”. As a result, screen readers will fail to announce the live message. Authors need to avoid such mistakes and make sure to declare the roles appropriately using role=””, and not aria-role=””.
  • Role do not exist or are invalid: Authors sometimes provide a role that does not exist according to the WAI-ARIA specification, somehow thinking it will still work, or will serve the same purpose. For example, authors might provide role=”error” for the error message in an attempt to convey the error semantics, but there is no such thing as role=”error” in the specification. Authors should become very familiar with the allowed role values to avoid such issues.

WAI-ARIA mistake #02: Children roles without parent roles

                Authors frequently define children roles on objects without first defining their parent role. As you may or may not know, certain roles cannot be used without their related parent/context roles. For example, a tab role might be defined without its tablist parent role. As a result, screen              readers may not work as expected. Some screen reader and browser combinations will still provide the information as expected, but others won’t, making it a very unreliable solution. Authors need to make sure that children roles are provided with their contextual or related parent roles.

WAI-ARIA mistake #03: Parent roles without children roles

Similarly, many times we see authors provide a parent role without defining the expected related children roles. As you may or may not know from the specification, certain roles cannot be defined without also defining their related children roles. For example, when menu or menubar roles are defined without the expected menuitem children roles for related objects, screen readers may not be able to convey the relationship as expected. Again, some screen reader and browser combinations will still provide the information as expected, but others won’t, making it a very unreliable solution. Authors need to make sure that parent roles are provided with their contextual or related children roles.

WAI-ARIA mistake #04: Invalid ID value references

We frequently see authors providing incorrect or inaccurate ID reference values for certain attributes. As you may or may not know, attributes are set to only accept ID references as their respective values, such as the aria-labelledby, aria-describedby, and aria-errormessage attributes. If authors provide an incorrect ID value, or assign an ID that does not exist in the document, then screen readers will not be able to create the reference and announce the information as expected (ex: the element’s label, the related instructions, the error message, etc). To avoid these situations, authors need to make sure that the ID values that are defined for WAI-ARIA attributes are valid.

WAI-ARIA mistake #05: Allowed WAI-ARIA attributes missing

We often see authors use WAI-ARIA attributes in ways that go against what is defined in the specification, hoping to make things better for accessibility. As you may or may not know, certain roles only allow for certain attributes. As an example, authors might assign aria-selected=”true” to the anchor/link element, falsely thinking that screen readers will announce the selected state of the anchor/link. However, since aria-selected is not allowed on link elements as per the WAI-ARIA spec, screen readers will NOT announce the selected state of such an element. On the other hand, when aria-selected attributes are used with certain roles such as treeitem, tab, gridcell and so on, it can work really well. Authors need to make sure that the attributes they assign to particular roles are allowed for those roles.

WAI-ARIA mistake #06: Required WAI-ARIA attributes missing

We sometimes see authors define WAI-ARIA roles without defining their expected required attributes. As you may or may not know, certain WAI-ARIA roles cannot be defined without also defining their expected required attributes. For example, when the slider role is defined on an object, certain attributes such as aria-valuemin, aria-valuemax and aria-valuenow must also be defined. Failing to do so results in screen readers not conveying the information as expected. Therefore, authors need to make sure they provide all expected required roles and attributes when a particular WAI-ARIA role is used.

Oh, wait! I have a quick tip

If you are wondering how to catch all these 6 mistakes then use Deque axe  tool. Yes, AXE catches all of the 6 mistakes that we have discussed in this blog post. You just need to run the AXE tool and that is all, it throws the issues!

References

Combobox role

Description

As you may have seen, most of the forms on the website contain auto suggestion characteristics/features. Let me explain this with simple example. While typing any string in the google search text field, it displays some list of the suggestions dynamically, and this behavior is nothing but auto suggestion behavior. This particular behavior is just not limited to the google search text field but there are many input fields on the web that has these auto suggestion characteristics. Since these auto suggestions are most of the places on the web these days, imagine if these auto suggestions are not accessible to the people with the disabilities. When these auto suggestions are not accessible then it is going to create huge problem to the people with disabilities.

In order to address this problem, ARIA introduces the combobox role. When the combobox role is applied along with required ARIA attributes for the widget that has auto suggestion characteristics then keyboard and screen reader users would get seamless experience. However, it is not that easy to construct accessible auto combobox/auto suggestion widget. Constructing an accessible combobox is one of the trickiest things in the ARIA. The reason is that authors might have to apply multiple ARIA attributes, java script, focus management and so on… at the same time to construct accessible combobox. While applying various techniques at the same time, it is highly possible that authors make mistakes if they are not careful.

That said; let me tell what combobox role is all about with the technical terms. A combobox is a composite widget made up of the combination of two distinct elements: 1) a single-line textbox, and 2) an associated pop-up element for helping users set the value of the textbox. The popup may be a listbox, grid, tree, or dialog.

It is very commonly misunderstood that both ARIA combobox role and HTML select element are one and the same because most of the screen readers interpret both of them as combobox. Although ARIA combobox role and HTML select element are being interpreted as comboboxes by most of the screen reader users, they are not identical but they are similar. The one significant distinct feature between both of them is that ARIA combobox role would contain textbox element whereas HTML select would not contain the textbox element. As per the analysis and my understanding, ARIA listbox role and HTML select are one and the same. In fact, ARIA listbox role contains much more features than HTML select and will discuss more about listbox role in the future blog posts.

Author notes

  • Combobox role must contain or must own a text input element with role textbox or searchbox or native input text field and that the text input has aria-multiline set to false.
  • Aria-Autocomplete attribute must be set with appropriate value (inline, list, both, and none) on the textbox element based on the nature of the suggestion and how those suggestions are presented. Elements that support aria-autocomplete have an implicit aria-autocomplete value of none and the below is the brief description of each aria-autocomplete value. We will discuss about this attribute in details in the future blog posts.
    • While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If text input gets auto filled  with the first suggestion from the list of the suggestions then set aria-autocomplete=”inline”
    • While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If user has to select suggestion manually  from the list of the suggestion then set aria-autocomplete=List”
    • While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If text input gets auto filled  with the first suggestion from the list of the suggestions and suggested string can be selectable then set aria-autocomplete=”both”
    • While user is typing some string on the text input, it displays the same set of the suggestions in the popup element irrespective of the string that user has typed. If these type of behavior is present then set aria-autocomplete=”none”
  • Authors must ensure that that only textbox is visible when the combobox is in the collapsed state and Elements with the role combobox have an implicit aria-expanded value of false
  • Authors must set the value of aria-expanded as true when textbox and secondary element that serves as its popup are visible.
  • Authors MUST ensure it contains or owns an element that has a role of listbox, tree, grid, or dialog when combobox is expanded.
  • Authors MUST set aria-controls on the textbox element to a value that refers to the combobox popup element.
  • Authors must set the value of aria-has popup based on the type of popup element as combobox popup element can be grid, tree, dialog, listbox and Elements with the role combobox have an implicit aria-has popup value of listbox.
  • Authors may set aria-activedescendant on the textbox element if the popup element supports aria-activedescendant and the value of aria-activedescendant must refer to the active element that is in the popup while DOM focus remains on the textbox element. It is important to remember that whenever aria-activedescendant attribute is being set on the textbox element then literal DOM focus does not need to move to the elements contained in the popup to navigate within the popup elements and the DOM focus can remain on the textbox element. There is much more to understand about aria-activedescendant attribute and will discuss in details about this attribute in the future blog posts
  • Authors may set aria-owns attribute on the combobox element if DOM hierarchy cannot be used to represent the relationship and the value of aria-owns must refer to the popup element

Code snippet

<div aria-label=”Tag” role=”combobox” aria-expanded=”true” aria-owns=”owned_listbox” aria-has popup=”listbox”>

    <input type=”text” aria-autocomplete=”list” aria-controls=”owned_listbox” aria-activedescendant=”selected_option”>

</div>

<ul role=”listbox” id=”owned_listbox”>

    <li role=”option”>Zebra</li>

    <li role=”option” id=”selected_option”>Zoom</li>

</ul>

Complimentary info on the combobox role

The combobox role and aria-owns attribute must be set on the textbox element as per the ARIA 1.0 whereas the same combobox role and aria-owns attribute must be set on the container that is the parent of the textbox element as per the ARIA 1.1. To know more about how to set the combobox role and aria-owns in the ARIA 1.1, please look at the code snippet section of this post. Although ARIA 1.0 is obsolete, user agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional.

References