Aria-relevant(property)

Description

As we discussed in the past, assistive technologies like screen readers may not be able to notify the changes that are happening elsewhere on the page while user is going through the web content at his/her own pace unless live region is set. As part of live regions, we covered the aria-live and aria-atomic in the past. Let us understand about aria-relevant as part of this blog post. Live regions may contain multiple changes and all of them may or may not be required for the user to notify. To control these multiple changes, authors can use aria-relevant attribute. Let me give an example. Imagine there is chat log. As soon as there is new message in the chat log, user should be notified about this change because it is relevant in this contexts. Similarly, previous chat messages sometimes may be removed from the chat log to accommodate new chat messages in the log. However, this particular change need not to be notified to the user as it does not have any meaning.

To put it simpler, Aria-relevant is an optional property for aria-live and it basically talks about what type of changes to be notified to the users within the live region. Aria-relevant accepts list of token values such as additions, removals, text, additionstext, all.

 

Author notes

 

  • Aria-relevant can be used on any base markup and it is the global attribute
  • The default value of aria-relevant is additionstext for all elements. This means that authors can leave aria-relevant to it’s default value if assistive technologies to notify about the new node as well as modified node text/modified image alt text within the accessibility tree
  • Authors can set aria-relevant to additions if assistive technologies to notify about the new node
  • Authors can set aria-relevant to removals if assistive technologies to notify about the removal node
  • Authors can set aria-relevant to text if assistive technologies to notify about the modified node text/modified image alt text
  • Authors can set aria-relevant to all if assistive technologies to notify about all the changes such as new node, removed node, modified node text/modified image alt text

 

 

Sample code snippet

<ul aria-live=”polite”

aria-relevant=”additions”>

<li>Item 1</li>

<li>Item 2</li>

<li>item 3</li>

</ul>

 

 

Complimentary info on aria-relevant

The removals value of aria-relevant attribute should be used sparingly. In other words, Authors should

not use removals value in all the contexts rather authors should use removals value whenever it makes sense for the user to notify about the removed content. To give you an example, it is important/relevant  for the user to notify about who left the meeting in the virtual meeting/conference.

Another important point to make a note of removal value is that most of the screen readers except voice over do not have great support on removal value as of now.

 

References

 

 

 

 

 

 

 

What’s probably coming in the ARIA1.2?_part2

A Quick recap

This is the continuation of part1(what’s probably going to come in ARIA1.2-part1) blog post and we pretty much covered the new roles(such as blockquote, caption, code, deletion, insertion, and so on..)  that are probably going to come in the ARIA1.2 as part of the previous blog post. Let us look into the changes that are probably going to take place on the existing attributes and roles usage in this part2 blog post.

 

Changes that are probably going to take place on the existing roles and attributes usage

Combobox(role)

There are significant changes that are going to take place for combobox role(role=”combobox”)  in ARIA 1.2. ARIA 1.1 combobox role implementation pattern is going to be no longer valid once ARIA 1.2 becomes W3C recommendation as the support of ARIA 1.1 combobox role implementation pattern is not very great. ARIA 1.2 combobox implementation pattern talks more or less ARIA 1.0 combobox implementation with aria-controls instead of aria-owns.

 

Aria-disabled(state)

Aria-disabled attribute is not going to be global attribute any more and it is allowed only in the certain roles

 

Aria-invalid(state)

Aria-invalid attribute is not going to be global attribute anymore and it is allowed only in the certain roles. The value of aria-invalid is also going to be enumerated type and it means that aria-invalid accepts certain list of token values

 

Aria-errormessage(property)

Aria-errormesage attribute is not going to be global attribute anymore and it is allowed only in the certain roles.

 

Aria-haspopup(property)

Aria-haspopup attribute is not going to be global attribute anymore and it is allowed only in the certain roles.

 

Aria-expanded(state)

There are significant changes to aria-expanded attribute in terms of which role should allow and which role should not. Aria-expanded attribute is going to be allowed in the menuitem role, checkbox role and application role. In addition, aria-expanded attribute is not going to be allowed on many roles(such as alert, alert dialog, article, main, banner, contentinfo, and so on.)

 

Listbox(role)

Group role has been added as child of listbox role

 

The role(s) that is probably going to be deprecated

Directory

Directory role is going to be deprecated

 

Minor changes that are probably going to take place on the existing roles and attributes

  • The below roles are not going to have any default value(aria-checked)
    • Checkbox
    • Menuitemcheckbox
    • Menuitemradio
    • Switch
  •  

  • Checkbox role is going to support aria-required property
  • List role is not going to allow group role as it’s children
  • Row role in the context of treegrid is going to allow aria-positionset and aria-setsize attributes
  • Math role is going to allow children
  • Grid role is not going to allow aria-level as it’s supported attribute
  • Aria-valuemin and aria-valuemax are going to supported attributes for the below roles instead of required attributes
    • Separator
    • Slider
    • Scrollbar
  • Aria-orientation is going to be supported attribute for the scrollbar role instead of required attribute
  • The default value of aria-valuenow attribute for the spinbutton role is going to be 0
  • Spin button role is going to support aria-valuetext attribute
  • Default value of the aria-valuemin and aria-valuemax for spinbutton role is not going to be present
  • Certain roles(such as log, timer, and so on.) are not going to require accessible name

 

 

Editorial changes that are probably going to take place on the below roles and attributes

 

  • Alertdialog role
  • Alert role
  • Rowheader

 

Do you have a feedback on these proposed changes?

ARIA WG opened ARIA 1.2 for the public review around couple of months ago and feedback can be submitted in the W3C ARIA GitHub repository or can be emailed to public-aria@w3.org. ARIA 1.2 is probably going to be come candidate recommendation(CR) in a month or so. Later this year, hoping that it is going to be become W3C recommendation too

References

 

What’s probably coming in the ARIA 1.2?_part1

Overview

ARIA 1.2 main goal is to add certain new roles and update the existing attributes and roles usage based on the feedback that ARIA WG received. In addition, New terminologies like prohibited states and prohibited properties have been introduced. Prohibited states and prohibited properties are nothing but those attributes are not allowed for the certain roles. To give an example, paragraph role(which is new role in the ARIA 1.2) does not allow aria-label and aria-labelledby attributes and this means that authors must not use aria-label and aria-labelledby role on the paragraph role. ARIA 1.2 specification is currently in the draft stage and This means that ARIA 1.2 specification may subject to change based on the feedback. ARIA WG opened ARIA 1.2 for the public review around couple of months ago and feedback can be submitted in the W3C ARIA GitHub repository or can be emailed to public-aria@w3.org. ARIA 1.2 is probably going to be come candidate recommendation(CR) in a month or so. Later this year, hoping that it is going to be become W3C recommendation too. A big kudos to ARIA working group for working so hard for the evolution of ARIA and making the web better place for everyone!

 

New roles that are probably going to come in the ARIA 1.2

 

There are bunch of new roles that are probably going to come in the ARIA 1.2 and let us look into them one by one briefly. of Course, we will discuss them one by one in detail in the future once ARIA 1.2 becomes W3C recommendation

Blockquote

Blockquote role(role=”blockquote”) is related to HTML <blockquote> tag and authors can use this role on content that is quoted from the different source.

 

Caption

Caption role(role=”caption”) is related to HTML <caption> tag and HTML <figcaption> tag and authors can use this role to name/describe the table, grid, and figure. Caption role prohibits aria-label and aria-labelled by attributes.

 

Code

Code role(role=”code”) is related to HTML <code> tag and authors can use this role on the container that has the piece of the computer code. When assistive technologies like screen reader detects code role then screen readers are supposed to read all the punctuations. Code role prohibits aria-label and aria-labelled by attributes.

 

Deletion

Deletion role(role=”deletion”) is related to HTML <del> tag and authors can use this role either on the content that has been deleted or on the content that has been recommended for the deletion. Deletion role prohibits aria-label and aria-labelled by attributes.

 

Insertion

Insertion role(role=”insertion”) is related to HTML <ins> tag and authors can use this role either on the content that has been inserted into the document or on the content that has been recommended for the insertion. Insertion role prohibits aria-label and aria-labelled by attributes.

 

Meter

Meter role(role=”meter”) is related to HTML <meter> tag and authors can use this role on the element that has the scalar measurement within the known range or fractional value. Meter role and progressbar role cannot be used interchangeably and both are for the different purposes.

 

Paragraph

Paragraph role(role=”paragraph”) is related to HTML <p> tag and author can use this role on the content that is paragraph. Paragraph role prohibits aria-label and aria-labelled by attributes.

 

Subscript

Subscript role(role=”subscript”) is related to HTML <sub> tag and authors can use this role for the any meaningful text(not for the presentation purpose) that appears half a character below the normal line. Subscript role can be used for the chemical formulas like o2(oxygen). Subscript role prohibits aria-label and aria-labelled by attributes.

 

Superscript

Superscript(role=”superscript”) role is related to HTML <sup> tag and authors can use this role for the any meaningful text(not for the presentation purpose) that appears half a character above the normal line. Superscript role can be used for the footnotes. Superscript role prohibits aria-label and aria-labelled by attributes.

 

Time

Time role(role=”time”) is related to HTML <time> tag and authors can use this role on the content that represents the time/date.

 

Emphasis

Emphasis role(role=”emphasis”) is related to HTML <em> tag and authors can use this role on the any meaningful text(not for the presentation purpose) that is emphasized, but not on the text that is conveying importance. Emphasis role prohibits aria-label and aria-labelled by attributes.

 

Strong

Strong role(role=”strong”) is related to HTML <strong> tag and authors can use this role on the any meaningful text(not just for the presentation purpose)  that conveys importance/urgency/seriousness , but not on the text that is emphasized. Strong role prohibits aria-label and aria-labelled by attributes.

 

Generic

Generic role(role=”generic”) is related to HTML <div> tag and HTML <span> tag and this role is for the implementers of user agents but not for the authors. Implementers of user agents pass the generic role for those containers that do not have name and that do not have semantics to prevent the accessibility tree structure from the malware. Generic role prohibits aria-label and aria-labelled by attributes.

Just wait and take little bit break!

This is the series of the blog post and we pretty much covered the new roles that are probably going to come in ARIA 1.2 in this part1 blog post. To know what changes that are probably going to take place on the existing attributes and roles usage, head on to  part2(What’s probably coming in the ARIA 1.2?_part2)blog post

 

References

 

HTML address element accessibility

Description

HTML <address> element is introduced way back in the HTML 3. As per the HTML living standard, address element is to be used to provide the contact information for author/owner of document or article. For example, when added to an article, the address element provides contact information for the article author, and when added to a web page footer the address identifies contact information for the web page owner.

Contact information can be email address, physical location, website address, phone number. Address block cannot be used for arbitrary addresses and this is better explained in the author notes section of this blog post. As this is the standard, it is common that authors tend to use address element for such purposes. When author uses address element for such purposes then they may think it provides certain semantical information to assistive technology users. unfortunately, however, it is not the case and no screen readers provide semantical information to the users as of now. On other hand, voice over on iPhone/mac conveys as content information landmark semantics when address tag is used, and this is completely incorrect announcement/semantics. The bug is already filed on the same in the voice over WebKit Bugzilla.

Having said that, what announcement/semantics need to convey to the screen reader users when developer uses address tag. Answer is I don’t know. I am probably thinking that screen readers provide additional verbose like address along with the actual address whenever address block is used by developer. Since address block is not really adding any meaning to the assistive technology users and on top of that, it is creating problem to the voice over users, authors might think that it is not useful and may avoid using this all together. However, I am completely against to this. I would suggest that  authors need to add the address tag as per the standards to avoid the unknown complications and do certain work around(like add presentational role) for the voice over users to provide the best experience.

Author notes

  • <address> element should be used for the contact information relevant to the current site, page, document, section, or article. It should not be used to identify addresses in any other context.
  • Author should not include a postal address in the address block if it is NOT contact information. So, for example, if you have a real estate website, and you’re listing information about available houses, the address of a house listing should not be in the address block

Sample code snippet

  <address>

    You can contact author at <a href=”http://www.sumandamera.com/contact”>

    www.sumandamera.com</a>.<br>

    If you see any issues , please <a href=”mailto: sumandaa@gmail.com”>

    Email us</a>.<br>

    You may also want to visit us:<br>

    Suman Damera Pvt Ltd<br>

Nizampet<br>

        Hyderabad, , Telangana, 500090<br>

India

  </address>

Complementary info on <address> element

There is a reason why voice over is announcing <address> element as content info. The reason is that <address> element is mapped to ARIA content info landmark in the past in the  HTML AAM and therefore, apple treated this as content info landmark. To know more about this, please visit  HTML AAM GitHub. Later, HTML AAM for <address> element is updated with none of ARIA roles. To know more about this, please visit HTML AAM <address> element latest specification/edition.

References

HTML living standard: address element

aria-atomic(property)

Description

We discussed about live regions(aria-live) in the past and this post also related to the live region itself. Before we understand aria-atomic, let me just recap what is the live region all about. When parts or portion of the web page gets updated without reloading the entire page and that portion of page is set to aria-live then those areas are called as live regions. To simplify further, whatever the changes that are happening to the element/container that has aria-live with appropriate token values(assertive/polite) are going to be communicated/notified to the screen reader users. However, here is the tricky thing. The underlying fact with aria-live with assertive/polite token values is that aria-live just notifies changes alone, but not the entire content that is present in the live region. You might be thinking that What is the big deal if entire content in the live region is not communicated to the screen reader users. Let me explain this with simple example. I think most of us do shopping on the ecommerce website for one or other things these days. While doing shopping on the ecommerce site, it is common that, whatever the products that we like, we add to the cart. As soon as the product gets added to the cart, it is obvious for the visual users that product has been added to the cart. To communicate the same to the screen reader users, we set aria-live to assertive/polite for the dynamic container. Do you think aria-live alone with assertive/polite is going to solve the purpose? Answer is not to the full extent. The reason is that the changed content of the dynamic container is going to be communicated to the screen reader users when live region is set but entire  content in the dynamic container is not going to be communicated. This may create some problems for the users in understanding the live updates. Let us understand what problem we are going to face. When product gets added to the cart then screen readers notify the live updates like “1” or “2” or “3” or something like that. Do you think this type of notification is understandable? Answer is no. to make same notification understandable, screen reader should reread the entire content in the live region live “your basket contains 1” or “your basket contains 2” or “your basket contains 3” or something like that. To reread the entire content in the live region as and when user activates add to cart, aria-live alone is not going to help, and this is kind of problem.

To address this problem, aria introduces aria-atomic attribute. Aria-atomic indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute(We will discuss about aria-relevant attribute in the future blog posts). To put this  simpler, when aria-atomic is set to true for the same shopping cart live region and product gets added to the cart then screen readers reread the entire content like “your basket contains 1” or “your basket contains 2” or something like that. This kind of announcement is pretty much understandable instead of just announcing like “1” or “2” when user activates add to cart element. Aria-atomic attribute accepts 2 values and they are true and false.

Author notes

  • Aria-live can be used on any base markup and it is the global attribute
  • The default value of aria-atomic is false for all elements
  • Authors need to set the value of aria-atomic as true only  when the entire content in the live region along with the label of the live region(if exists) needs to be reread by assistive technologies.
  • If author sets explicitly aria-atomic as false, then assistive technologies stop searching up ancestor chain and present the changed node to the user
  • If author does not set aria-atomic attribute itself in the live region then assistive technologies, consider the default value of aria-atomic as false and present the changed node to the user.

Sample code snippet

<h2>Basket summary</h2>

<div aria-live=”assertive” aria-atomic=”true”>

    <p>Your basket contains <span id=”quantity”>0</span> items.</p>

</div>

References

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

Inclusive design, Accessibility, and Usability

The terms inclusive design, accessibility, and usability are being used interchangeably by most of us. Although the purpose of those 3 terms are kind of similar (accommodating the web to as many as users), however, they are slightly different from each other in terms of it’s meaning. This blog post attempts to give you the basic understanding of these 3 terms. Let us look into them one by one

Inclusive design

Inclusive design is nothing but no one should be excluded in using product and it talks about people first as well as design for all. Let me explain this with simple examples. If I am giving the lecture in the Spanish language to the group of people and some of the group members do not know the Spanish language, then my lecture is not an inclusive. The reason for not being inclusive is that the group members who do not know Spanish language are completely excluded from the other group members due to the language barrier, which is not really great thing. To make the environment inclusive, we need to figure out what is the common language among all of them (perhaps English) and start giving the lecture as accordingly. Similarly, another example could be manufacturing the chairs. During the initial stages of chair development itself, manufactures should think through different personas who uses the chair. The different personas in this context could be, is my chair usable for tall person, is my chair usable for short person, and so on. if the manufacturer does not thing through different type of end users who use chair during the initial stages itself then it is high chance that chair is not going to be usable to certain group, which is not inclusive. These are the simple examples that I provided to make you understand what is inclusive. We can apply the same concept anywhere starting from designing the physical products to the designing the web and so on.

To put the things simpler, Inclusive design targets/aims to accommodate the web to the full range of human diversity. When we say diverse users then the design of the product should be in such a way that it can be used by different people such as people with different culture, people with different geographical location, people with different computer literacy and skills, people with low internet connectivity, people who speaks different languages, people with different education background, people with the different age group, people with disabilities, and so on.. thus, inclusive design does not talk accessibility of people with disabilities alone and it talks much more than just accessibility of people with disabilities. Accessibility of people with disabilities is just one single part of the inclusive design. On other hand, most of the designers forget to consider people with disabilities group all together during designing phase. Forgetting to consider people with disabilities group during design phase may not be an intentional thing but many designers may not aware of that there is such a group exist. Sometimes, forgetting to consider the people with disabilities group during design phase may be an intentional thing because designers/company thing that people with disabilities are minority only. When they think so then implication is so huge as you are leaving 15 to 20% of the world population. Yes, as per the recent census, 15 to 20% of the world population has one or other form of disability. Whatever the reason it could be, you are leaving 15 to 20% of world population in accessing your product if you do not consider the people with disabilities group. Therefore, as part of the design process, designers should consider the different personas including people with disabilities in order to make the design as inclusive as possible. On top of that, when accessibility is being considered at the design phase itself then it is going to reduce your time, money, and effort. In fact, we preach accessibility should be considered at the requirement phase itself and that would result much more inclusive experience.

There is one more term called universal design, and this is almost identical to the inclusive design. It is ok to use either of the terms based on the contexts.

Accessibility

Accessibility talks about addressing the challenges of people with disabilities in general whereas web accessibility talks about addressing the challenges of people with disabilities to the web specific. Inclusive design is the process/method of the making the products/services to the diverse users whereas web accessibility is the result of the inclusive design process. web accessibility means that people with disabilities can equally perceive, navigate, operate, and understand the websites and tools. Web accessibility also talks about more of principles, standards, guidelines, checkpoints, techniques, and so on. and it is kind of the measurement how accessible the product/service/web is for people with disabilities. On other hand, inclusive design talks about more of abilities of the different type of the users, frustration of the different type of the users, challenges of the different types of the users, and so on.

Apart from that, Web enhances it’s usability when the site is accessible. Let me explain this with examples. When the accessibility color contrast guideline is followed then it is not only helping low vision users but also it helps even sighted users who use the device in the sunny. Another example providing the captions for the videos/multimedia. As per the accessibility requirement, captions are needed for all the videos/multimedia in order to help people with hearing impaired. Providing the captions for the videos/multimedia just not only helps the people who are hearing impaired but also helps the hearing people when the videos are opened in the noisy environment. Thus, some of the accessibility requirements enhances the usability for all.

In addition, Web enhances the inclusion aspect as well when the site is accessible. Let us look into that with the examples. Providing the alt text for the informative images is the accessibility requirement in order to help screen reader users. Text alternative for the informative images not only helps the screen reader users but also helps the people who are having connectivity issues. Another example could be making the web content as understandable as possible with all relationships. Simple design and easy language not only help the people with disabilities but also the people with low literacy or not fluent in the language/people who are new users or infrequent users. Thus, some of the accessibility requirements improves the inclusion aspect as well.

Usability

Usability is about designing products to be effective, efficient, and satisfying and is the qualities that make a web experience intuitive and easy to use. To put it in the simple words, usability is nothing but how easy it is for the users to complete certain task on the web. For example, booking flight ticket in the airlines involves with multiple steps (such as searching for the flights, choosing the right flights, booking the seat, payment, and so on.)  and how easy user can navigate, understand, operate, and complete the desired task is all about the usability.

The sad part of the story is that most of the times people with disabilities are not considered in the usability process and this is forgotten. It is important that real people with disabilities along with other users are involved in the usability process to make the web usable to all. In addition, the real people with disabilities should be involved from the design phase to all the stages of the product development and that leads to usable accessibility. Usable accessibility is nothing, but web is usable and accessible for all the users including people with disabilities.

 Conclusion

Inclusive design is the process/method to accommodate the web for diverse users including people with disabilities. Web accessibility talks about how well the people with disabilities can access the web and it is usually the result of the inclusive design process. Usability talks how easy it is for all the users including people with disabilities to accomplish certain task on the web. All 3 terms (inclusive design, accessibility, and usability) sound similar but they are slightly different from each other and all together makes the web better place for everybody.

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