2.5.3: label in name-New SC in the WCAG 2.1

Success Criterion 2.5.3 Label in Name (Level A): For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

A best practice is to have the text of the label at the start of the name

 

Description

 

There are certain group of people with disabilities, especially who are having learning and physical challenges, use speech recognition software like dragon naturally speaking to access the computers. Let us understand what speech recognition software is all about. Speech recognition software converts speech to text as opposed to the screen readers. Those users of speech recognition software access the computers with the speech input and there are voice commands to perform the regular activities on the computer like opening MS word document, , opening files/folder, sending the email, browsing the web and so on.. now that we understand that how those users of speech recognition software access the computers. On the similar lines, when user is trying to activate the send button by using voice commands after composing the email, for the instance, send button does not get activated in spite of the multiple attempts. The reason could be that, even though there is a visible text as send for the user interface control but the control may not have same text as an accessible name in the accessibility tree rather control has the submit as an accessible name in the accessible tree. As visible name of the control is send and accessible name of the control is submit, speech recognition software never understand and never activate this control  when user is trying to activate send button with the speech input. This creates problem and intern it impacts the ability to use the control itself for those users of speech recognition software.

In order to address this problem, WCAG 2.1 introduce this new SC. The intent of this Success Criterion (SC) is to help ensure that people with disabilities who rely on visual labels can also use those labels programmatically. In other words, the accessible name of the control must contain the text that is visible on the control but It does not mean that accessible name of the control need not to be identical with the visible label of the control. In addition, when the accessible name is different from visible label of the control then it is high chance that speech input users may accidently activate the hidden commands. As a result, speech input users get confused and disoriented with the unexpected actions. Text to speech(screen reader) users get best experience when accessible name of the control is matched with the visible name of the control.

Pass scenarios

  • Accessible name of the control matches visible label of the control
  • the words of the visible label in the accessible name are not scattered and are in the same order as they are in the visible label

 

References

 

1.4.12: Text Spacing-New SC in the WCAG 2.1

Success Criterion 1.4.12 Text Spacing (Level AA): In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

 

Description

There are certain group                 of low vision users, especially people who are suffering from Age-related Macular Degeneration, read the content on the web by customizing the original view. What does it mean? Let us understand this. Few low vision users feel very difficult to read the content on the web in it’s default view.  The reason is that block of text seems to be cluttered due to the small spacing for the low vision users and this makes it hard to read. To overcome this challenge, those low vision users use the stylesheets/extensions/bookmarklets  to make the same block of the text readable. You might be wondering what exactly these tools do. These tools enable the low vision user to adjust the spacing between characters/words/lines/paragraphs on the web and that intern helps the user’s readability. So far all is good and we understand that there are tools/assistive technologies that enables the low vision user to adjust the text spacing. However, when they try to adjust the text spacing via these tools then what if the text is cut off vertically, text is cut of horizontally, text is overlapped, and text is fixed. When we encounter such problems while using those tools then it is going to be problem for the low vision users to read the content on the web.

In order to address this problem, WCAG2.1 introduced this new success criterion. The intent of this Success Criterion (SC) is to ensure that people can override text spacing to improve their reading experience. Having said that, do you think user can adjust/override the text spacing to any extent. Answer is no. the success criterion clearly specifies that distances between paragraphs, lines, words and characters must be able to be increased to certain values without leading to loss of functionality or readability. The below are the specifications for the same.

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

 

author responsibility

This SC does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author’s content has the ability to be set to those metrics without loss of content or functionality. The author requirement is two-fold:

  • to not interfere with a user’s ability to override the author settings, and
  • to ensure that content modified to Success Criterion 1.4.12’s metrics does not break content.

 

Benefits

  • People with low vision who require increased space between lines, words, and letters are able to read text.
  • People with dyslexia may increase space between lines, words, and letters to increase reading speed.
  • Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes. To put it more simpler, Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

 

Pass scenarios

The below are the few scenarios where this success criterion is met

  • Spacing can be adjusted to the SC’s metrics
  • Text is not cut off in the both directions(horizontally and vertically)
  • Text is not overlapped
  • Plugin technologies that have a built-in ability to modify styles to the specified metrics.

Not applicable/exceptional  scenarios

This SC does not applicable for the below scenarios

  • PDF files as it is not implemented using markup
  • Video captions in the video player
  • Images of text that is built with canvas technology
  • There are cases where a text style property is not used in a language or script(e.g. applying word spacing for Japanese language would not have any effect as the language does not have words itself.

How to test this SC

Follow the below step by step instructions to test this SC

  1. Click Text Adaptation Bookmarklet – Steve Faulkner
  2. add the bookmarklet to the browser by following simple instructions that are given in the same link
  3. once the bookmarklet is added, open any web page
  4. navigate to browser bookmarks and activate “text spacing” bookmarklet
  5. the same web page displays with the SC metrics text spacing and check if the text is readable
  6. that is all you are done!

Techniques

Here are the few techniques that author can use to meet this success criterion

 

References

 

 

aria-colindex(property)

Overview

 

As discussed in aria-colcount(property) post, at time, author might not want to show all the total columns of the table in the DOM due to the usage of advance filters and so on rather author might want to show only portion of the columns in the DOM. When author wants to show only the portion of the columns of the table in the DOM then it is  suggested to use aria-colcount property to communicate the total no of columns to the assistive technology users. Up to this, we are clear with the concept. However, using aria-colcount alone would not be sufficient to convey all the table properties to the assistive technology users. Since only the portion of the columns are visible in the DOM, assistive technologies like screen readers do not understand which cell/column has the data. As a result, screen readers might end up with incorrect column index announcements when user navigates through the table and it is a problem.

In order to address this problem, aria1.1 introduced the new brand table property and that is aria-colindex. When aria-colindex property is set on the cell container of the table then screen readers would understand column index of that cell and announces the column index accordingly. Let me elaborate this little bit more. As have been discussing, this property should be used only the portion of the columns of the tables are available in the DOM. By considering this important point in the mind, let us think there are 4 columns(column2, column3, colunm5, and column9) of the table are available in the DOM out of 16 total columns. If aria-colindex is set as 2 for the column2 cell then screen readers would announce the column2 and this announcement is appropriate. Failing to set this attribute may result the incorrect column index announcements by screen reader software and this intern confuses the users a lot. When aria-colcount is set for the complete table container then it is necessary to set the aria-colindex to define the position of the visible column of that table.

In a broader view, aria-colindex Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.

 

Author notes

  • Authors should use this property for the below roles only<
    • Cell
    • Row
    • Column header
    • Gridcell
    • Rowheader
  • Authors should not set/define this attribute If all of the columns are present in the DOM as user agent can automatically calculate the column index of each cell or gridcell
  • Authors should set/define this attribute only when portion of the columns is present in the DOM at a given moment,
  • this attribute is needed to provide an explicit indication of the column of each cell or gridcell with respect to the full table
  • Authors MUST set the value for aria-colindex to an integer greater than or equal to 1,
  • Aria-colindex must be greater than the aria-colindex value of any previous elements within the same row,
  • Aria-colindex must be less than or equal to the number of columns in the full table
  • aria-colindex cannot be greater than aria-colcount, unless aria-colcount is unknown (e.g. value -1)
  • aria-colindex must be set on the start of the span if the cell or gridcell spans multiple columns or multiple rows
  • If the set of columns which is present in the DOM is contiguous, and if there are no cells which span more than one row or column in that set,<
    • aria-colindex is not needed to set on the every cell
    • aria-colindex can be set on the row element with a value equal to the the index number of the first column in the set. Browsers will then compute a column number for each cell in the row.
  • aria-colindex needs to be set on each cell in the row If the set of columns which is present in the DOM is noncontiguous

 

Sample code snippet

if given

<div role=”table”>

<div role=”row”>

<div id=”SD” role=”cell” aria-colindex=”4″ aria-colcount=”8″>suman damera</div>

</div>

</div>

then expose aria-colindex=”4″ on the element with id=”SD”

 

References