The aria labels are properties roles and states that are added to the HTML structure to set the elements and provide information from a web content that is accessible for persons with disabilities. Assistive technology is an application capable of providing assistance driven by semantic HTML and aria labels. The WAI-ARIA specification attributes extend the native HTML elements by letting the user change how an HTML element is translated into the accessibility tree. The aria label started in 2008 with the drafts and was completed on March 20, 2014, by the w3 organization as a recommendation. The goal of the aria label is to provide assistance to persons that are impaired visually. The support from the browser is massively growing, and almost all browsers are able to interpret aria label attributes the aria label attributes define the HTML element as the identifier to communicate with the user. The aria label web accessibility is possible thanks to the semantic HTML and JavaScript it is likely to include aria attributes with the codes. The aria labels can be used together with HTML semantics and other native elements that can be repurposed using the aria attributes. The aria label web accessibility is achievable because of the growing support of web browsers for the goal of providing assistance for persons with disabilities. Below is an example of aria label syntax.
<button aria-label="mammals"
class="dog"
</button> What ARIA Label Stands for?
Aria label stands for Accessible Rich Internet Application, a W3C specification for enhancing accessibility beyond what can be achieved with a semantic HTML. The initiative of the organizer is to provide solutions for person with disabilities to connect to the internet or applications via ARIA labels. Aria label can use properties to enhance the web accessibility for interactive controls, such as tree menus, sliders, pop-ups, etc. It can also set useful positions for page structure and dynamically-updated “live regions”. The Arial label is also used to improve keyboard accessibility and interactivity, and more. It stands for the purpose of letting the web be visualized through the ARIA label. The acceptance and support by the assistive technologies and browser enables to reach the goal of providing normal approach the specified users.
What are the benefits of ARIA Labels?
The aria labels have a lot of benefits, especially for the persons that really need them. The aria label provides a visual experience by delivering information via sound or audio, it can be navigated using a keyboard or a pointer.
These are the benefit of ARIA labels.
- Accessibility: Providing accessibility for persons with disabilities, especially blind people, provides a visual extension that interprets the environment of the web page.
- Experience: The aria label shows how to toggle control and how to write on a text box, it simply interprets what is inside the page.
- Visual Equivalence: The importance of the aria label defines the need for users to experience how the World Wide Web is felt without needing to visualize all of it. The aria label is a simple addition to the HTML API, but it is a powerful tool for more person that needs it.
What is the ARIA-Label Syntax?
The ARIA syntax is distinguishable because it begins with the word “aria”, it is attached with a relevant word that is described as its function. The “aria” identity and the attribute name is connected with a dash or hyphen, as an example, “aria-label”. The attribute can be set with a value of a state or number or string, such as, “true”, “false”, “1”, or the value described by the ID.
ARIA-Label Syntax Example
These are examples of ARIA label syntax.
- This is an aria-label example, the button role contains ARIA label attribute that defines the button pressed instance with a label “Email is sent”.
<button aria-label="Email is sent">send</button>- This is an aria-labelledby example, the attribute provides reference information that is available from elements.
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>- This is an aria-describedby example, this attribute share similar role as the aria-labelledby, though its main function is to provide a relationship between elements. The example shows that aria-describedby referenced “trash-now” for the value of the id.
<button aria-describedby="trash-now">To Recycle Bin</button>
...
<p id="trash-now">The recycle bin will empty trash in 7 days</p>What is ARIAMixin API for aria-label?
The ARIAMixin API enables the ARIA label property to be part of the Element interface and Elementinternals interface to reflect the value of an aria label attribute. The Element interface is the base HTML element that is used to structure an HTML web page, the Elementinternals however, are custom-made elements that play the role of regular HTML elements but have special purposes. The ARIAMixin API allows the native elements to be re-purpose as ARIA label properties.
The ARIA label is designed to be used together with HTML and Javascript, it is compatible with all elements, and it can be used along with the HTML codes. However, there are instances that ARIA is not needed, although it can be applied but would not make sense. According to the rule of using ARIA labels, using semantic HTML should be used first, if it does not work ARIA will take over. Screen readers and assistive technology have the ability to interpret semantic HTML but sometimes native elements are not present in the DOM, for that ARIA is used.
What is the List of aria labels?
1. Aria-activedescendant
The aria-activedecendant attribute specifies the presently active element when the focus is on a composite widget, combobox, textgroup, group, or application. The aria-activedecendant attribute allows assistive technologies to focus on interactive items. It can be used to refer to the recent active element, informing assistive technology users of what is the current state. The browser maintains the DOM focus on the containing element or an input element when using aria-activedecendant. The user agent, however, conveys desktop focus events and states to assistive technology as if the aria-activedecendant element is currently in focus. This attribute is only applicable to elements with the role of the composite widget like combobox, textbox, group, or application. The aria-activedecendant attribute is in charge of informing assistive technology about which element is in focus. Javascript is used to change the focus and manage the value of the attributes. When focused, ensure that the presently active descendant is displayed and in view.
<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true"
aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit">
<ul aria-expanded="true" role="listbox" id="cb1-list">
<li role="option" id="cb1-opt1">Philippines</li>
<li role="option" id="cb1-opt2">Japan</li>
<li role="option" id="cb1-opt3">Korea</li>
<li role="option" id="cb1-opt4">China</li>
<li role="option" id="cb1-opt5">Taiwan</li>
<li role="option" id="cb1-opt6">Vietnam</li>
<li role="option" id="cb1-opt7">Singapore</li>
</ul>In a combobox, for example, the value of aria-activedecendant on an element corresponds to descendants of a listbox controlled by that element.
2. Aria-atomic
The aria-atomic attribute serves an essential purpose; it specifies whether the screen reader should always provide necessary information for the entire active region, even if only a section of it changed. The aria-atomic value is referred to as a state where only two value recognized it is either true or false, however, the default setting is false. Both accessibility APIs and the Document Object Model contain events that indicate when relevant portions of the document have changed. When the content of a live area changes, user agents must inspect the altered element and traverse its ancestors to locate the first element with an aria-atomic set. When the content of a live area changes, user agents must examine the updated element and traverse the ancestors to find the first ancestor with an aria-atomic set.
<span aria-labelledby="It is Christmas Day"
aria-live="polite"
aria-atomic="true">
<input type="number" id="DAY"
value="25">
<input type="number" id="Month"
value="12">
<input type="number" id="YEAR"
value="2022">
</span>An example of aria-atomic is shown above, indicating to the screen reader when the changes should be announced.
3. Aria-autocomplete
The aria-autocomplete is a type of attribute that identifies or predicts the value of an element base on the given value of the aria-autocomplete. The aria-autocomplete provides assistance for the user if the user enters familiar or the same value that is already declared in the same input box, text box, or search box. The aria-autocomplete can be set with static values but in order to provide helpful information for the user, it should be set as dynamic. The user will be able to efficiently enter the desired text as announced by the screen reader, it is effective if the user input is a recurrence or globally updated like the search engine box.
aria-autocomplete="monkey"
aria-autocomplete="banana"
aria-autocomplete="gold"
aria-autocomplete="key"This example syntax basically emphasizes how to manually input values that will be triggered on the interactive input boxes, the function of an aria-autocomplete. If anyone typed the first letter of the declared value of aria-autocomplete, it would suggest the values declared.
4. Aria-braillelabel
The aria-braillelabel is an attribute that identifies a recent element pointed that turns the label into braille, when using the aria-braillelabel make sure the element to which it is applied has a valid access name. Providing a valid accessible name enables the aria-braillelabel to be used for braille assistive technology. The value of aria-braillelabel is contained with specified content based on the Unicode and Unicode braille, it is not empty or only white space. The aria-braillelabel matches with the language of the document as it is localized for that purpose. The aria-braillelabel provides information to the user that the element is available through the Unicode braille that is translated into braille to let the user know how to configure the settings.
<button aria-braillelabel="***">
<img alt="3 out of 5 stars" src="three_stars.png">
</button>The example states that the aria-braillelabe is to provide a braille equivalent information that would be translated into the braille, above states 3 special star characters that describe the image element containing 3 stars.
5. Aria-brailleroledescription
The aria-brailleroledescription attribute specifies a human-readable, author-localized abbreviated description of an element’s role that is intended to be converted into Braille. Braille is not a one-to-one transliteration of letters and numbers, but rather a combination of abbreviations, contractions, and characters that represent words. The aria-brailleroledescription attribute allows for the providing a condensed version of the aria-roledescrioption value, which is a human-readable, author-localized description of an element’s role, for improved user experience with Braille interfaces. The value of aria-brailleroledescription is essentially and condensed version of the aria-roledescription attribute that will be converted into Braille.
<article aria-roledescription="slide" aria-brailleroledescription="sld" aria-labelledby="slide1heading">
<h1 id="slide1heading">Be my guest</h1>
<img alt="I" src="images/i.jpg">
</article>The Screen Readers interpret the preceding as slide be my guest image me, but with the braille, it is interpreted as “sld, be my guest gra, me”. The aria-roledescription attribute assigns the role “slide” to the article element the aria-roledescription=” slide” is a role not defined in the specification but is a regular role for slides in a presentation the role is written in braille and is supported by the aria-brailleroledscription ld specific for the braille interpretation the “gra” is an abbreviation for “graphic”, means image as presented into braille.
6. Aria-busy
The aria-busy indicates that an element is being modified at the moment and provides information through the assistive technologies to wait for a moment and later provides necessary information of what updates were made to the user. Set aria-busy=”true” until the loading is finished, then change the state. This prevents screen readers from informing changes before they have been implemented. The aria-busy is also useful when loading multiple parts of a love region at the same time. The aria-busy property of live regions is an optional property that can be true or false. When downloading is complete, use the ariamixin interface’s aria-busy property to set the value to false. The aria-busy is useful for providing necessary information if status or updates are being made in the live regions, the user will be able to decide what step they must do in the meantime.
<span aria-busy="true">
This element is currently being updated.
</span>The aria-busy is property indicates a state that the live region has, elements that are modified will be unable to be used while updating or changing the state of the attribute “busy” informs the user about the status.
7. Aria-checked
The aria-checked is an attribute that determines the actual checked state of checkboxes, including other widgets. The functions of aria-checked are checking the input whether it is checked unchecked or represents a group of elements that have a mixture of checked and unchecked values. Some checkboxes do not honor mixed values, so they are essentially boolean, which means the value can only be either “true” or “false”. In strong native semantics of HTML native checkbox authors are suggesting not to use the aria-checked on an input type checkbox, instead, use the native checked attribute or indeterminate IDL attribute to specify the checkbox’s checked or mixed state. The rule of using aria labels is to use the primary semantic elements else if the DOM is unable to load the necessary information needed by the screen reader that is when ARIA should be applied.
<input type="checkbox" id="chk15-label" name="Subscribe">
<label for="chk15-label">Subscribe My YouTube channel</label>To enable focus, the tabindex attribute must be present. Toggling the aria-checked state requires JavaScript. Additionally, if this checkbox is part of a submittable form, more JavaScript is needed to set a name and a value.
8. Aria-colcount
The aria-colcount property indicates the total columns in a table, grid, or treegrid when the DOM is unable to present all the columns. The aria-colcount is used to inform the user agent of all the necessary information about the columns that the table has if all the column’s details were present in the DOM. The value is an integer that represents the total column count in the table, else if a number of rows are unknown the value would be -1. This value informs the user agent that the current number of columns may not correspond to the number of the columns in the table. When using ARIA labels to work with the screen readers, it is best to use the semantic HTML elements before allowing ARIA to take over. The rules of using ARIA labels are in the condition that when the DOM is unable to present the elements with the screen reader’s assistive technology.
<div role="grid" aria-colcount="16">
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-colindex="2">First Name</span>
<span role="columnheader" aria-colindex="3">Last Name</span>
<span role="columnheader" aria-colindex="4">Company</span>
<span role="columnheader" aria-colindex="9">Phone</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="gridcell" aria-colindex="2">Freddy</span>
<span role="gridcell" aria-colindex="3">Dursty</span>
<span role="gridcell" aria-colindex="4">Chocolate Starfish</span>
<span role="gridcell" aria-colindex="9">321-1239</span>
</div>
<div role="row">
<span role="gridcell" aria-colindex="2">Farah</span>
<span role="gridcell" aria-colindex="3">Talgeist</span>
<span role="gridcell" aria-colindex="4">Chocolate Starfish</span>
<span role="gridcell" aria-colindex="9">321-1230</span>
</div>
…
</div>
</div>This example provides a column header information with the First Name, Last Name, Company, and Phone, each row has been provided with the aria-colindex position in order for the cell not to overlap each other. The aria-colcount=”16” property is the number of columns declared as static, and it is declared in the gridcell role. The information entered into the table is in rows, and each of the rows has different records.
9. Aria-colindex
The aria-colindex property specifies a column index or position within the table, grid, or treegrid in relation to the entire column count. Since most tables are very long or wide, only sections or portions can fit the screen, as the screen reader relies on information provided by the display. This may enhance the user experience, but the developer must inform users about which part of the content is being displayed. With such structures, the aria-colindex property defines the substructure’s column index or position in relation to the entire column. If all the columns are present in the Dom, the attribute aria-colindex or any ARIA label is not required, as the browser can determine the col index of each cell. If the developer does not use HTML elements and a cell or gridcell spans multiple columns, set aria-colspan to the number of columns it spans. Even if the columns are not of the same length, the aria-colindex property play important role in keeping the columns positioned in proper space including its children.
<div role="grid" aria-colcount="6">
<div role="rowgroup">
<div role="row">
<div role="columnheader" aria-colindex="1">First name</div>
<div role="columnheader" aria-colindex="2">Last name</div>
<div role="columnheader" aria-colindex="5">City</div>
<div role="columnheader" aria-colindex="6">Zip</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell" aria-colindex="1">Santos</div>
<div role="gridcell" aria-colindex="2">Annie</div>
<div role="gridcell" aria-colindex="5">Cavite</div>
<div role="gridcell" aria-colindex="6">4120</div>
</div>
</div>
…
</div>The example illustrated a grid with six columns, with the user seeing columns 1, 2, 5, and 6. The columns in the table aren’t contiguous, the total number of columns in the tables is specified on the table itself as aria-colcount =”6”. In this case, columnheader and gridcell elements have the aria-colindex attribute set.
10. Aria-colindextext
The aria-colindextext attribute specifies a text alternative along with the numeric aria-colindex. If there is a large table or want to display only a portion of the table, not all columns may be present in the DOM. When this occurs, users use the aria-colcount function with a numeric integer value to specify the entire grid or table it may have if all columns were not displayed. The aria-colindextext attribute provides text information that the screen reader may need in order for the user to be aware that the provided information in the display is only partial results.
<table aria-colcount="128">
<thead>
<tr>
<th aria-colindex="1" aria-colindextext="NYSE stock symbol" scope="col">NYSE</th>
<th aria-colindex="110" aria-colindextext="Value at start of 2021" scope="col">01/21</th>
<th aria-colindex="122" aria-colindextext="Value at start of 2022" scope="col">01/22</th>
<th aria-colindex="124" scope="col">Recommendation</th>
</tr>
</thead>
...
</table>In this example it states that the aria-colindextext provides text information that the aria-colindex cannot provide, the user will have expected information about what column field they are focusing on.
11. Aria-colspan
The aria-colspan property value determines how many columns each cell in a table grid and treegrid spans. This aria attribute is meant for cell and gridcells that are not part of a native table, and it will be ignored if the applied cell is a table. The value of aria-colspan should be a positive integer to ensure not cause the cell to overlap the next cell or gridcells that are on a similar row. The aria-colspan value should not extend beyond the boundaries of the comprising table grid and treegrid. Like any other aria labels if all element’s values are already described in the dom then there is no need for aria but if it doesn’t aria labels are the best to describe it.
<div role="grid" aria-rowcount="27">
aria-label=Volleyball League Scores"
<div role="rowgroup">
<div role="row" aria-rowindex="1">
<!--
aria-rowspan and aria-colspan provide
assistive technologies with the correct data cell header information
when header cells span more than one row or column.
-->
<span role="columnheader" aria-rowspan="2">Team</span>
<span role="columnheader" aria-colspan="2">Player</span>
<span role="columnheader" aria-colspan="31">Game 1 Frames</span>
<span role="columnheader" aria-colspan="31">Game 2 Frames</span>
<span role="columnheader" aria-colspan="31">Game 3 Frames</span>
<span role="columnheader" aria-rowspan="2">Total</span>
</div>
<div role="row" aria-rowindex="2">
<span role="columnheader">Last Name</span>
<span role="columnheader">First Name</span>
<span role="columnheader" aria-colspan="3">1</span>
<span role="columnheader" aria-colspan="3">2</span>
<span role="columnheader" aria-colspan="3">3</span>
<span role="columnheader" aria-colspan="3">4</span>
<span role="columnheader" aria-colspan="3">5</span>
<span role="columnheader" aria-colspan="3">6</span>
<span role="columnheader" aria-colspan="3">7</span>
<span role="columnheader" aria-colspan="3">8</span>
<span role="columnheader" aria-colspan="3">9</span>
<span role="columnheader" aria-colspan="4">10</span>
<span role="columnheader" aria-colspan="3">1</span>
<span role="columnheader" aria-colspan="3">2</span>
<span role="columnheader" aria-colspan="3">3</span>
<span role="columnheader" aria-colspan="3">4</span>
<span role="columnheader" aria-colspan="3">5</span>
<span role="columnheader" aria-colspan="3">6</span>
<span role="columnheader" aria-colspan="3">7</span>
<span role="columnheader" aria-colspan="3">8</span>
<span role="columnheader" aria-colspan="3">9</span>
<span role="columnheader" aria-colspan="4">10</span>
<span role="columnheader" aria-colspan="3">1</span>
<span role="columnheader" aria-colspan="3">2</span>
<span role="columnheader" aria-colspan="3">3</span>
<span role="columnheader" aria-colspan="3">4</span>
<span role="columnheader" aria-colspan="3">5</span>
<span role="columnheader" aria-colspan="3">6</span>
<span role="columnheader" aria-colspan="3">7</span>
<span role="columnheader" aria-colspan="3">8</span>
<span role="columnheader" aria-colspan="3">9</span>
<span role="columnheader" aria-colspan="4">10</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="10">
<span role="rowheader" aria-rowspan="3">The Mighty Bekis</span>
<span role="cell">Henderson</span>
<span role="cell">Alice</span>
<span role="cell">7</span>
<span role="cell">/</span>
<span role="cell">20</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">39</span>
<span role="cell">9</span>
<span role="cell">-</span>
<span role="cell">48</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">76</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">96</span>
<span role="cell">8</span>
<span role="cell">/</span>
<span role="cell">113</span>
<span role="cell">7</span>
<span role="cell">-</span>
<span role="cell">120</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">146</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">166</span>
<span role="cell">6</span>
<span role="cell">/</span>
<span role="cell">X</span>
<span role="cell">186</span>
<span role="cell">7</span>
<span role="cell">2</span>
<span role="cell">9</span>
<span role="cell">6</span>
<span role="cell">-</span>
<span role="cell">15</span>
<span role="cell" aria-colspan="2">X</span>
<span role="cell">35</span>
<span role="cell">7</span>
<span role="cell">/</span>
...
</div>
<div role="row" aria-rowindex="11">
<span role="cell">Mcdougni</span>
<span role="cell">Gina</span>
<span role="cell">9</span>
<span role="cell">-</span>
<span role="cell">9</span>
<span role="cell">8</span>
<span role="cell">1</span>
<span role="cell">18</span>
...The example shown below is an example of a volleyball tournament league scoring spreadsheet. Each game consists of ten frames, with each frame consisting of the three scores; two balls and the current total. In case someone scores all strikes, the 10th and final frame in each game spans four columns.
12. Aria-controls
The aria-controls is one of the ARIA Label Accessibility attributes that specifies the details of its element/s and its presence. They are controlled by the element on which their corresponding attribute is coordinated on. The aria-controls purposefully command and specifically identifies the elements it controls from the widget interface. This can be a useful attribute to point out the elements it is set to control under, regardless of the interaction and its resulting behavior. Elements such as the combobox and tabpanel utilize the aria-control command. The aria-controls are useful for ARIA Labels such as aria-label, aria-selected, and aria-labelledby.
<div class="tab-interface">
<div role="tablist" aria-label="Sample Tabs">
<span role="tab" aria-selected="true" aria-controls="panel-1"
id="tab-1" tabindex="0">
First Tab
</span>
<span role="tab" aria-selected="false" aria-controls="panel-2"
id="tab-2" tabindex="-1">
Second Tab
</span>
<span role="tab" aria-selected="false" aria-controls="panel-3"
id="tab-3" tabindex="-1">
Third Tab
</span>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
</div>
<div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
<p>Content for the third panel</p>
</div>
</div>This syntax tells that the tablist role is established, there are 3 tab panels and currently focused on tab panel 1, which is currently stated by the aria-selected=”true”. The aria-controls identify the tablist as controls that have a value of panel-1, panel-2, and panel-3.
13. Aria-current
The aria-current is a non-null state on an element that identifies that the particular element constitutes the present item within a section or its related elements. The aria-current sends a signal and informs the assistive technologies of the user input through a method of styling. The aria-current should be set on a link within a set of pagination links that are styled to identify the user is currently on the page. The attribute also helps aware the user of its present page set through a link contained through a sequence of links. The aria-current can be useful for developers in identifying the element it is set on, an example would be setting a value besides the false command. The aria-current can be used in all elements except for the elements with the role of grid cell, row, tab, and option. aria-current can also be used for ARIA Labels such as aria-selected.
<nav aria-label="breadcrumbs">
<ol>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/parent">
Parent
</a>
</li>
<li>
<a
href="/parent/current"
aria-current="location"
>
Current
</a>
</li>
</ol>
</nav>The above example for aria-currently identifies the Current as the focused page currently selected, it has a similar or related function as the aria-selected. There are 3 pages with the corresponding links, Home, Parent, and Current.
14. Aria-describedby
The aria-describedby recognizes the elements that mark out another element on which attribute sets, it lists the IDs of the elements that describe the object. The purpose of aria-describedby is to establish a link connecting widgets or groups and the text that is describing them. The aria-describedby isn’t limited to form controls, It can be utilized to connect the static text with widgets, groups of elements, areas that have a heading, definitions, and more. The developer can use aria-describedby to remark a certain element that is hidden, for instance in a form control description that is hidden by default, it can be revealed on request using a disclosure widget like a “more info” icon. When the user clicks on the icon, the description is referenced from that form field directly with aria-describedby. The aria-discribedby can be used in all elements, it is mostly used in interactive elements such as input, select, button, and textarea. The aria-describedby can be used for other aria labels like aria-labelledby, aria-description, and aria-details.
<button aria-describedby="trash-desc">Move to trash</button>
...
<p id="trash-desc">Items in the trash will be permanently removed after 20 days.</p>The syntax describes the “trash-desc” ID, as the aria-describedby attribute of the button as the description of the action to the user.
15. Aria-description
The aria-description determines a string value describing the ongoing element. The intention for the aria-description is to create a mechanism that details the current element, providing assistive technologies a greater context. The developers can use aria-description to generate a descriptive text that can be associated with the object via ID reference only if there is no appropriate descriptive text. The aria-description can be used in all types of elements. The aria-description can be used in ARIA Labels like aria-describedby, aria-label, and aria-details.
<div role="application" aria-label="calendar"
aria-description="Game schedule for the Boston Red Sox 2022 Season">
<h1>Red Sox 2022</h1>
<div role="grid">
...
</div>
</div>The example tells that the aria-description provides meaningful information about the application heading only states the title “Red Sox 2022”, the aria-description states to the user more details such as “Game schedule for the Boston Red Sox 2022 Season”.
16. Aria-details
The aria-details attribute can be used to provide additional information about an object or to create complicated descriptions. It is used to educate assistive technology users about the content by offering more information, whether that information is contained inside the present document or via a link to other assets. The aria-details attribute link to a URL with a detailed summary of the content of a replacement element. Other HTML and WAI-ARIA attributes serve similar functions. It takes the place of the depreciated longdesc attribute, which was removed owing to a lack of support and misuse. The aria-details attribute accepts the elements id, or a space-separated list of elements id, as values. All users should be able to see the elements referenced by aria-details. The aria-details notifies viewers who may not be able to easily scan a screen and detect that explanatory content is available.
<p>The <strong>cubic-bezier()<strong> functional notation defines a cubic
<span role="term" aria-details="bezier bezImg">Bézier curve</span>. As
these curves are continuous, they are often used to smooth down the start and
end of the curve and are therefore sometimes called easing functions.
</p><p role="definition" id="bezier">A <strong>Bézier curve</strong>,
(Pronounced \ ˈbe-zē-ˌā \)
<i aria-description="English pronunciation">BEH-zee-ay</i>) is a mathematically
described curve used in computer graphics and animation. The curve is defined
by a set of control points with a minimum of two. Web related graphics
and animations use Cubic Béziers, which are curves with four control
points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, and P<sub>3</sub>.
</p><p>The <strong>cubic-bezier()<strong> functional notation defines a cubic
<a href="bezierExplanation.html" id="bezImg"
aria-label="Explanation of Bézier curve in CSS timing functions">
<img alt="Animated Bézier curve showing 4 control points." src="bezier.gif">
</a>The example of aria-details is given above. When it comes to definition and term roles, the aria-details attribute is added to the term element along with the id of the element that has a defined role.
17. Aria-dropeffect
The aria-dropeffect property in ARIA 1.1 specifies the functions that may be executed when an object is released from a drop target. This information is sent to the sited user via the DataTransfer.deopEffect attribute. Any DOM node can be made draggable using HTML5’s Drag and Drop API. Text selections, images, and links can be dragged by default, but they can also set it to dragable=true with a dragstart event handler. The DataTransfer.Dropeffect property specifies the cursor that is displayed by the browser while dragging and is set on the element that may be dropped. Drag effects should be adjusted during drag operations as the draggable element is dragged across distinct drop areas. The aria-dropeffect property is expected to be deprecated in a future version of WAI-ARIA in favor of a new feature. It notifies assistive technology users that a popup menu or dialog box with a drag function is available. When the dragstart event fires, the user typically adds aria-dropeffect to all potential drop targets. The drop effects functions can be provided only after an object has been taken for drag operations, as the available drop effect functions are object-dependant.
18. Aria-errormessage
The aria-errormessage is an attribute that identifies an error that the element provides, it proves the error by executing the error message to let the user know it exists. The purpose of aria-errormessage is to communicate to the elements that show the error and provide action on how to deal with it. The developer can use aria-errormessage to help users identify the error in order to narrow down where the fault is coming from, and it will be easily fixed or defined properly. The aria-errormessage can be used in any given element. The aria-errormessage can be used for other aria labels such as aria-invalid, aria-describedby, aria-live, and aria-checked.
.errormessage {
visibility: hidden;
}
[aria-invalid="true"] {
outline: 2px solid red;
}
[aria-invalid="true"] ~ .errormessage {
visibility: visible;
}When an object is invalid, we use JavaScript to add `aria-invalid=”true”`. The above CSS makes the `.errormessage` following an invalid object become visible.
```html
<p>
<label for="email">Email address:</label>
<input type="email" name="email" id="email"
aria-invalid="true" aria-errormessage="err1" />
<span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p> For this example, we could have applied an aria-live property or used a live region such as alert. It can keep the example basic because the error message follows the input and becomes visible and accessible via the accessibility tree. The only modification to JavaScript is an update to the email input object.
19. Aria-flowto
The aria-flowto is an attribute responsible for selecting the following element or entity in a reading content order randomly. This makes it easier for the user to override the default setting of the assistive technology, it is to read the document in order of how it was written. If the readers’ perception of the order of the content is altered in any way, the aria-flowto component will attempt to reconstruct a reading path that begins with the original source order. Changing the tab order and the order property of CSS can both be accomplished by using the tabindex attribute, therefore a developer can utilize the aria-flowto to signal the assistive technology in giving an alternative reading command to the source order. This enables the assistive technology to interpret a document in the correct order, rather than the reading order that is set as the default for the document source. The aria-flowto attribute can be utilized by any and all roles in the aria labels, in addition to being usable by any and all components in the base markup.
<h1 aria-flowto="main">Daily Report</h1>
<h2> Sports Fest</h2>
<article id="sports fest"
title="Sports" aria-flowto="fest">
<p> There will be a lot of three-pointers in today's basketball game!</p>
</articleThe syntax states that the aria-flowto indicates “main” for heading 1 “Daily Report”, this enables the user to navigate through the elements that the assistive technology reads.
20. Aria-expanded
The aria-expanded attribute is applied to an element to indicate whether the control is expanded or collapsed, as well as whether its child components are visible or hidden. Widgets are expandable and collapsible items. Each of these things is controlled by an interactive element that allows them to open and close. This focusable, interactive control that toggles the visibility of the object has the aria-expanded property applied to it. Menu, dialogs, and accordion panels are examples of widgets. In a DOM tree, the parent of an item determines the visibility of its connected branch as well as whether it is presented. For example, aria-expanded is applied to the parent item to indicate if the user can see its child branch. Aria-control and aria-owns describe the relationship between an item and the element it controls. Aria-expanded indicates whether the controlling element is expanded or collapsed to assistive technology. Objects that control the visibility of another object can use one of two declarations. On elements that possess expandable grouping containers, use the aria-owns attribute. If an element’s grouping container is not owned by the element to which it belongs, use aria-control in your browser’s address bar to access the complete version of its page.
<button aria-expanded="false" aria-controls="widget1">Show widget</button>The example above is an example of aria-expanded using the button. A button that opens a widget should have an aria-control set to the id of the expandable widget and an aria-expanded set to the widget’s current state.
21. Aria-haspopup
The aria-haspopup attribute specifies the type and availability of interactive popup elements that can be triggered by the element of which the attribute is set. Popups are interactive menus, listboxes, trees, grids, and dialogs that display on top of other content in ARIA. One or more interactive items on the website cause popups. The presence of the aria-haspopup attribute with one of six stated values such as menus, listbox, tree, grid, dialog, or true indicates that the element that appears must play the appropriate role. A tooltip is not considered a popup because it is not interactive. The aria-haspopup state informs assistive technology users that there is a popup and what type of popup it is, but it does not allow them to interact with it. To make a popup keyboard accessible, it must focus and be capable of triggering a keyword mechanism for opening the popup. When creating a menubar, aria-haspopup=”menu” should be specified on a parent menuitem. It is important to note that menubars should not be utilized to generate website navigation.
<div class="menu-button-actions">
<button type="button"
id="menubutton1"
aria-haspopup="true"
aria-controls="menu1">
Actions
<svg xmlns="example"
class="down"
width="12"
height="9"
viewBox="0 0 12 9">
<polygon points="1 0, 11 0, 6 8"></polygon>
</svg>
</button>
<ul id="menu1"
role="menu"
tabindex="-1"
aria-labelledby="menubutton1"
aria-activedescendant="mi1">
<li id="mi1" role="menuitem">
Action 1
</li>
<li id="mi2" role="menuitem">
Action 2
</li>
<li id="mi3" role="menuitem">
Action 3
</li>
<li id="mi4" role="menuitem">
Action 4
</li>
</ul>
</div>
<p>
<label>
Last Action:
<input class="action"
id="action_output"
type="text"
value="">
</label>
</p>The syntax states in this example that the aria-haspopup is declared into a button as a trigger to show or inform the user of assistive technology about the popup message. The popup message will be the selected action that is included in the dropdown list box.
The aria-hidden is an attribute that describes an element’s visibility on the assistive technology, the role of the element is to be hidden unless expose by an instance. The benefit of aria-hidden is to avoid the redundant object that the screen reader receives. It can prevent not important objects to be interpreted differently like images and icons. The importance of the aira-hidden relies on the purpose of the assistive technology, the goal is to provide necessary information for the person using it. The functionality and appearance of the page in the browser are not affected by the aria labels that are used. Therefore, the aria-hidden can be useful to prevent conveying wrong information to the user, it removes the repeated sentence that may confuse or misinterpret the information they will receive. The aria-hidden is stated by developers to some contents or elements that are redundant information or repeated text. The aria-hidden attribute can also be used in other aria labels, such as the aria-disabled, aria-modal, and aria-expanded attributes.
<button>
<span class="Hidden" aria-hidden="true"></span>
<span class="label">
Hide
</span>
</button>This example allows the aria-hidden state to be true as the initial value, the button allows an instance to expose the label. The aria-hidden value should not be false when trying to hide most of the information, if the value is false at the beginning then there is no sense in including them in the elements.
23. Aria-valuetext
The aria-valuetext attribute value is string together with the aria-valuenow attribute as an indicator for a range widget element, the value may only contain a string that is set by the developer. The purpose of the aria-valuetext is to contain a text value based on the range or the widget that has a representing number for each value. The function of the aria-valuetext is to hold a readable text or relevant information that will be transmitted to the assistive technology and to the user. The developer can use the aria-valuetext to provide a range of information on the widget that can be useful for the users. The aria-valuetext can be used in the range widget element, to be used for the slider, meter, or scrollbar. The aria-valuetext can be used with other aria labels such as aria-valuenow, aria-valuemin, and aria-valuemax.
<div id=”content1″>This is a scrollbar</div>
<div
role=”scrollbar”
aria-controls=”content1″
aria-orientation=”vertical”
aria-valuemax=”100″
aria-valuemin=”0″
aria-valuenow=”25″
aria–valuetext=”Quarter of the content”>
<div class=”scrollhandle”></div>
</div>The example shows how the syntax of aria-valuetext is declared with the value “Quarter of the content”, the basis is the aria-valuenow that has a value of “25” that corresponds to a text value. The example can be used to inform the user how many percent of the content is being read.
24. Aria-valuenow
The aria-valuenow is a property holding the current or present value from a widget range, it may contain a string or number value. The aria-valuenow can also contain the value from the progressbar meter, and the input element’s value can also be derived from ranges numbers date and time. The purpose of aria-valuenow is to contain the present value indicated by the range or input. The function of aria-valuenow is to define the current value and hold all types of values that can be a number string character date or time. The developer can use the aria-valuenow to determine what is the set value in an instance, it may help with assistive technology for range instructions and other factors. The aria-valuenow can be used for elements such as progressbar meter input and range widget. The aria-valuenow can use with other aria labels such as aria-valuemin aria-valuemax and aria-valuetext.
<p id="temperatureLabel">
Oven Temperature
</p>
<div role="meter" id="temperature"
aria-valuenow="205"
aria-valuemin="70"
aria-valuemax="250"
aria-labelledby="temperatureLabel">
<div class="meter-color" aria-hidden="true"></div>
</div>The syntax states that the aria-valuemax is declared with the value of 250, it is together with other ARIA labels, aria-valuemin, and aria-valuenow to determine the range and to identify the selected element. The range explains that the value should only be between 70 and 250, the currently selected value within the range is 205 as stated by the aria-valuenow.
25. Aria-sort
The aria-sort is an attribute that is used on tables to arrange the contents in ascending or descending manner. The purpose of the aria-sort is to organize the contents within the table or grid. The function of aria-sort is to sort a column or a row in ascending or descending manner or order, although table elements provide sorting functionality the aria-sort attributes should be set whether ascending or descending order within the perimeter. The developer can use the aria-sort to organize a table or grid in order for the end-user to efficiently predict where to find the content they were looking for. The aria-sort is can be used in elements such as a row, column, table, grid, and treegrid. The aria-sort can be used with another aria label the aria-pressed, it triggers the sort functionality set by aria-sort in displaying ascending or descending columns or rows.
<table>
<caption>
Steering Committee Members
</caption>
<thead>
<tr>
<th>
<button>
First Name
</button>
</th>
<th aria-sort="ascending">
<button>
Last Name
</button>
</th>
<th>
<button>
Company
</button>
</th>
<th>
Email
</th>
</tr>
</thead>
... <!-- the <tbody> -->
</table>Above is an example of aria-sort. This table loads in ascending order with the last name column. If a user clicks the Last Name button, the aria-pressed =”true” attribute is applied to the button>element, and the aria-sort value is toggled to “descending” with JavaScript. If the user clicks on a different header button, the aria-sort is removed from the last Name header and placed on the th> parent of the chosen button. They asked users of assistive technology to help us understand how to work with the th[aria-sort=”ascending”] and th[aria-sort=”descending”] selectors. In the caption, they offered directions for disabled technology users who would not see the down arrows that we would add with CSS targeting the styles.
26. Aria-setsize
The aria-setsize is an attribute that defines the size that the browser computes, especially in tables and grids, the set size to determine how the content would fit in the cell. The purpose of the aria-setsize is to set the right size of the space in order to fit in the contents needed to display in the browser. The function of aria-setsize is to define a number of items in the set of list items or tree items if the presence of the list is not yet shown by the DOM. The developer can use the aria-setsize to override wrong information made by the browser to the list items and tree items. The elements that can be used with the aria-setsize are list items, buttons, options, and select elements. The aria-setsize can be used with the aria-posinset ARIA label, they are attributes used to indicate the position of the given item within the set.
<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
<li role="option" aria-setsize="16" aria-posinset="5">apples</li>
<li role="option" aria-setsize="16" aria-posinset="6">bananas</li>
<li role="option" aria-setsize="16" aria-posinset="7">cantaloupes</li>
<li role="option" aria-setsize="16" aria-posinset="8">dates</li>
</ul>In the example syntax above the option, the label size is set to 16 equally for fruit values as stated, aria-setsize=”16” and position is set by level, so it won’t overlap with the first declared value with the other.
27. Aria-rowspan
The aria-rowspan is an attribute that defines particularly the row spanned by a cell or a gridcell, treegrid, or table. The purpose of aria-rowspan is to let the assistive technology understand the size and span of the row information that will be relayed to the user. The developer can use aria-rowspan to enable the screen reader or user to learn the foundation of the table clearly how many rows are spanned and other useful information. The aria-rowspan can be used with the elements such as grid, gridcell, treegrid, and cell, but it will not be used or contained in a native HTML table like table headers and table data. The aria-rowspan can be used with other aria labels such as aria-rowindex and aria-colspan as they are used to define the table or grid.
<table>
<tr>
<th>Product</th>
<th>Product price</th>
<th>Discount</th>
</tr>
<tr>
<td>Lemon Juice</td>
<td>£2.30</td>
<td rowspan="1">£0.30</td>
</tr>
<tr>
<td>Egg Sandwich</td>
<td>£3.50</td>
<td rowspan="1">£1.10</td>
</tr>
</table>The syntax explains that the number of row spans declared is only one, as every value entered is in line with all the relevant content. If the first-row span is declared, the next row span in the same table should have the same value to avoid irrelevant structure output.
28. Aria-rowindextext
The aria-rowindextext is an attribute that provides a human-understandable text to users regarding its position on the table element. The purpose of the aria-rowindextext is to communicate to the user through assistive technology if the information or position of the raw is not present or larger than the available row span. The developer can use the aria-rowindextext to inform the user or provide additional information regarding its navigation with the assistive technology. The aria-rowindextext can be with elements within the row groups such as cells, grid cells, column headers, row headers, table, and treegrid. The aria-rowindextext can be used with other aria labels such as aria-rowindex, aria-rowcount, aria-rowspan, aria-colindextext, and aria-colindex.
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1" aria-rowindextext="Heading row">Aria-rowindextext Info</th>
<th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Element Info</th>
</tr>
</thead>The example states that the aria-rowindextext has a declared value of “Heading row”, which will be announced to the user, including the aria-rowindex information. The aria-rowindextext is helpful information that the developer can add along with the aria-rowindex to provide meaningful navigation through assistive technology.
29. Aria-rowcount
The aria-rowcount is an attribute that is set to define the number of rows that is in the table. The purpose of the aria-rowcount is to provide the full information regarding the actual number of raws that is within the table. The developer can use the aria-rowcount to let the user know what is the complete number of rows. While the display has the limitations of giving viewable images or tables, it can only accommodate information per frame. The aria-rowcount can be used with the elements such as a table, grid, and treegrid. The aria-rowcount can be used with other aria labels such as aria-rowindex and aria-colcount.
<div role="grid" aria-rowcount="2000">
<div role="rowgroup">
<div role="row" aria-rowindex="1">
<span role="columnheader">First Name</span>
<span role="columnheader">Last Name</span>
<span role="columnheader">Address</span>
<span role="columnheader">Telephone</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="100">
<span role="gridcell">Freddy</span>
<span role="gridcell">Krugger</span>
<span role="gridcell">24 Spy Ville st.</span>
<span role="gridcell">555-4564</span>
</div>
<div role="row" aria-rowindex="101">
<span role="gridcell">Sean</span>
<span role="gridcell">O’conor</span>
<span role="gridcell">5th Salvation avenue</span>
<span role="gridcell">555-7897</span>
</div>
<div role="row" aria-rowindex="102">
<span role="gridcell">Tokyo</span>
<span role="gridcell">Jarr</span>
<span role="gridcell">Fukushima Japan</span>
<span role="gridcell">555-3216</span>
</div>
</div>
</div>The aria-rowcount provides the user with information that 2000 rows are there in the grid, the example content’s row index is focused on the rowindex 100 to 102. The user will know where it is located in the grid and how far they are from the column header and the last row.
30. Aria-required
The aria-required is an attribute that is determining if a form is ready to be submitted or required more inputs. The aria-required purpose is to give conditions or requirements in order for the process to continue to the next level. The developer can use the aria-required to notify or give a warning to the user that there is missing information that is needed to be filled out in order to proceed with submitting. The aria-required is a helpful attribute or property that can assist the user by informing that there is blank information to fill up. The aria-required can be used with elements such as input, select, and textarea. The aria-required can be used with other aria labels such as aria-labelledby, aria-describedby, aria-checked, and aria-autocomplete.
<div class="text">
<label id="tp1-label" for="first"> Name:</label>
<input type="text" id="first" name="first" size="20"
aria-labelledby="tp1-label"
aria-describedby="tp1"
aria-required="true" />
<div id="tp1" class="tooltip"
role="tooltip"
aria-hidden="true">Your name is required</div>
</div>The example tells that an instance will not proceed if the required field is contained with information, compared to the aria-invalid the aria-required only requires an input element to be filled in to proceed to the next action.
31. Aria-relevant
The aria-relevant is a non-obligatory attribute that identifies the changes in the live regions, it is not required by the assistive technology’s screen reader to provide information about the updates. The aria-relevant value is acquired from the closest ascendant that has a definite value. The purpose of aria-relevant is to acquire value that can be stated if any adjustments are made in the live regions, although not required, it is helpful to users if any related information is delivered. The developer can use aria-relevant for instances that are needed to inform the users, like when a user in the chatroom leaves the chat. The aria-relevant can be used for markup elements the aria-relevant can be used with other aria labels such as aria-atomic aria-busy and aria-live.
<ul aria-live=”polite”
aria-relevant=”additions”>
<li>Apple Pie</li>
<li>Brownie</li>
<li>Egg Tart</li>
</ul>The example states that relevant information can be conveyed to the user via the live regions, the aria-live is stated “polite” level of providing information to the user. It is set at an average or intermediate level of letting the user know what information it is. The aria-relevant value is “additions” which the user will receive an announcement by the screen reader, while the apple, brownie, and egg tart are added to the list item table.
32. Aria-pressed
The aria-pressed is an attribute that is used to set a toggle element that can have 3 values. The purpose of the aria-pressed is to let the user know that they are toggling a button or an element that have toggle features. The developer can use the aria-pressed attribute to let the user know that a toggle is activated, engaged, or pressed via the screed reader of the assistive technology. The aria-pressed can be used for the button element, as it defines the button’s state if its value is true, false, or undefined. The aria-pressed can be used with other aria labels, such as, aria-selected and aria-checked.
utton aria-pressed="false">Pause</button>The example states that the button is indicated with “false” value, as it is not yet triggered by an instance or action. The value or aria-pressed can change to “true” once the action is done by the user. The user receives information via an announcement from the screen reader as “Pause”, the label of the button should not be changed in order for the screen reader to accurately give the exact information to the user.
33. Aria-posinset
The aria-posinset attribute is set on items that do not appear in the Document Object Model (DOM). When a table element is not displayed in its entirety within the frame, the aria-posinset attribute can be used to indicate where that element falls within the set of table elements. The aria-posinset attribute can be utilized by the developer in order to supply the user with information regarding where the element is positioned on the set of elements. Table elements, treegrid elements, and other semantic table components that are not exposed in the DOM are all qualified options for using the aria-posinset attribute. The aria-posinset can be also utilized in conjunction with the aria label known as aria-setsize.
<h2 id="periodictable">Periodic table of chemical elements</h2>
<ul role="listbox" aria-labelledby="periodictable">
<li role="option" aria-setsize="118" aria-posinset="1">Hydrogen</li>
<li role="option" aria-setsize="118" aria-posinset="3">Lithium</li>
<li role="option" aria-setsize="118" aria-posinset="11">Sodium</li>
<li role="option" aria-setsize="118" aria-posinset="19">Potassium</li>
</ul>The example states that the aria-posinset is declared statically, 1, 3, 11, and 19. The aria-setsize is also identified as 118 equally with the rest of the option roles. The screen reader will announce the set value in hierarchical order based on the value set from the lowest to the highest value.
34. Aria-owns
The aria-owns property identifies an element that specifies a relative connection between parents and child elements, it is possible if DOM or document object model cannot be used to present a visual relationship. The purpose of the aria-owns is to define parent and child elements with the other elements to determine their relationship. The developer can use aria-owns to provide information for the user that an element in focus belongs to a parent element or a child element that depends on the organizational structure, it may provide the necessary information for the user. The aria-owns can be used with all elements such as combo box and list box. The aria-owns can be used with other ARIA labels, such as aria-controls and aria-activedescendant.
<input type=”text” aria-label=”Tag” role=”combobox” aria-expanded=”true”
aria-autocomplete=”list” aria-owns=”owned_listbox” aria-activedescendant=”selected_option”>
<ul role=”listbox” id=”owned_listbox”>
<li role=”option”>Gazelle</li>
<li role=”option” id=”selected_option”>Lion</li>
</ul>The example syntax given shows how aria-owns are declared, it identifies the listbox value as “owned_listbox” which contains 2 options.
35. Aria-orientation
The aria-orientation is a property that determines whether the element’s position is horizontal or vertical. One of the functions of aria-orientation is to specify whether the element’s orientation is unknown. The responses of the arrows to the right, left, up, and down are affected by the orientation of the widget. The primary role of the aria-orientation is to inform the user on how to use a specific widget. A horizontal, a vertical, or an indeterminate orientation for the element can be indicated to the users through the use of the aria-orientation attribute, which can be used by the developer. Elements like sliders, tab lists, toolbars, menubars, scrollbars, list boxes, trees, and menus are all examples of places where the aria-orientation attribute might be utilized. The aria-orientation can be used in the aria-separator.
<div role="listbox" aria-orientation="vertical" id="test">
<button value="b1"> <button value="b2">
</div>
then the element with role="listbox" and id="test" exposes aria-orientation="vertical"In this example the aria-orientation determines the orientation of the list box, it will be announced by the screen reader to the user that the listbox’s orientation is “Vertical”.
36. Aria-multiline
The aria-multiline is an attribute that determines a search box or a text box contains multiple lines or only has a single line. The purpose of the aria-multiline is to let the user know that after typing an object and pressing the Enter key or Return key the line might break into another line or else it will proceed to submit. The developer can use the aria-multiline property to provide a piece of information if the user pressed enter after typing, not knowing it has proceeded to another line of the same element. The aria-multiline can be used in elements such as search boxes and text boxes. The aria-multiline can be used with other ARIA labels, such as aria-labelledby, aria-describedby, and aria-description.
<textarea rows="4" cols="50"
aria-labelledby="aria-text-label"
id="aria-text"
role="textbox" aria-multiline="true">This text box has multiple rows</textarea>The example states that the aria-multiline declaration is simple using boolean, to mean either it is “true” or “false”. The syntax tells that the textarea consist more than one text line, the aria-multiline should be stated as “true” to let the user know that the text box have multiple line.
37. Aria-live
The aria-live attribute is an element that identifies an element worldwide that is to be updated with categorizations of update levels for user agents. The updated information is then transmitted to the user and any assistive technologies that are being used. The aria-live mission is to offer real-time information to users, with the expectation that this data will be of some value to them. The aria-live can be utilized by the developer in order to provide the required information to users about any modifications that have been made by the developer. There are a few JavaScript elements that are compatible with the aria-live attribute, most significantly the document element. ARIA labels such as aria-atomic, aria-relevant, and aria-busy can be combined with the aria-live element.
<div id="announce" aria-live="polite"></div>This is how a simple syntax declaration is made for aria-live, the value is set to an average level of awareness or letting the user be informed about the changes or updates within the live region.
38. Aria-level
The aria-level attribute focuses on the hierarchical level of the elements that are under the same structure, it is defined. The purpose of aria-level is to define the levels if the parent’s child relationships are too simple. The developer can use the aria-level attribute if the DOM is unable to represent the level of an element within the tree or the structure. The aria-level can be used with elements such as treegrid. The aria-level can be used with other ARIA labels such as aria-setsize and aria-posinset to be able to identify the position if the DOM is unavailable to present the elements in focus. The same rule applies to the aria-level like any other ARIA label, if the semantic elements can already provide the information to the screen reader, then there is no need to use ARIA.
<p>
<div role="list>
<div role="listitem" aria-level="1">Dessert</div>
<div role="list">
<div role="listitem" aria-level="2">ice cream</div>
<div role="listitem" aria-level="2">pudding</div>
<div role="listitem" aria-level="2">fruit salad</div>
<div role="listitem" aria-level="2">jelly</div>
</div>
<div role="listitem" aria-level="1">Beverage</div>
<div role="list">
<div role="listitem" aria-level="2">soda</div>
<div role="listitem" aria-level="2">vodka</div>
<div role="listitem" aria-level="2">lemon Juice</div>
</div>
</div>
</p>The purpose of the aria-level base on this example is to let the user know that the Dessert and Beverage are the parent elements, and all the aria-level=”2” are the children’s elements.
39. Aria-labelledby
The purpose of aria-labelledby is important for user agents and screen readers since it offers the data or information regarding the element that it recognizes and also provides a name that is accessible. The aria-labelledby attribute plays a significant part as an essential factor attribute in every syntax that is utilized, and it is used in the majority of aria-label statements. Since it supplies the identification of every element that is used, the aria-labelledby is an essential component of other aria-labels. This is because other aria-labels need to be able to specify the attributes that are being used. As a result of the attribute’s ability to supply an accessible name, assistive technologies are dependent on the aria-labelledby attribute. This provides a benefit to the remainder of the ARIA labels that are employed.
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>The example simply identifies the checkbox’s value that is “I agree to the terms and conditions”, the same label as the page will be announced to the user.
40. Aria-label
The aria-label is a type of attribute that gives an interactive element a descriptive name that is communicated to a screen reader so that the user can understand what is being described. An accessible name that is pertinent to its use is what the aria-label is supposed to provide for its users, in particular when it comes to interactive features like the button. In the event that the DOM or the user agent is unable to detect the unique label character or picture that is provided by the page, the developer may make use of the aria-label. The aria-label can be utilized for the purpose of implementing interactive elements like buttons and labels. The aria-label is compatible with a variety of other aria labels, including the aria-labelledby and aria-describedby labels. More often than not, a browser’s capability to define an element can be compromised, particularly with regard to providing a meaningful name, which is something that an aria-label can give. The objective of the ARIA label is to provide useful data for assistive technology.
<button aria-label="Close" onclick="myDialog.close()">
<svg aria-hidden="true" focusable="false" width="17" height="17" >
</svg>X
</button>The simple syntax shows that the aria-label will be provided with a meaningful text that the user will understand in scenarios where the element label cannot be determined by the browser or user agent. The “X” stated as the label of the button, does not mean anything, if it is conveyed to the user, and would not be identified as “Close”. If it wasn’t for the aria-label=”Close” that provides the user alternate information about the button’s label.
41. Aria-keyshortcuts
The function of aria-keyshortcuts is to authorize the keyboard users to utilize keyboard keys to offer instructions or directions without entering the menu or utilizing the mouse. The value of aria-keyshortcuts is to activate and offer commands by pressing one or two keys on the keyboard. One non-modifiers should come after the modifier keys and be pressed together. One or more modifiers and one non-modifiers should be united with a plus (+) sign. Alt, Control, Shift, and Windows keys are the modifier keys. These keys don’t have an impact if used alone. The p, z, and (.) are the non-modifier keys that register a property or a character when even used alone. When used as a shortcut, non-modifier keys should go after the modifier keys. The order of modifier keys is not otherwise significant. “Alt+Shift+P” and “Shift+Alt+P” are equivalent, but “P+Alt+Shift” is invalid because all the modifier keys don’t come first and the “Shift” doesn’t include at least one non-modifier key. The key combinations listed must be the keys the users need to press, not the outcome of the combined keystrokes. For example, if the user needs the “%” symbol, the key combination is written as “Shift+5”, not “%” nor “Shift+%”
<a href="#content" aria-keyshortcuts="Alt+Shift+A">
Skip to next page</a>This example defines the key shortcuts using the keyboard keys Alt, Shift, and A key. It enables the instance to press directly to the “Skip to next page” without pressing the actual link.
42. Aria-invalid
The aria-invalid is a state that determines the input value to an element is not a valid value or does not follow the specific value it requires. The aria-valid is used to provide information that the inputted value does not follow the right format that the interactive widget needs, this means the process will not go through or would not proceed to the next instance. The most common text fields that are requiring a specific format are email addresses and phone numbers. If the entered value to a number of format elements includes even a single character, it will give an alert that the entered value will not be accepted. The aria-invalid can be used in any HTML form element, even beyond the aria role. The aria-invalid should go along with the JavaScript during the validation process, this should be set if the value is out of range or invalid format.
<ul>
<li>
<label for="name">Full Name</label>
<input type="text" name="name" id="name"
aria-required="true" aria-invalid="false"
onblur="checkValidity('name', ' ', 'Invalid Value (Please enter first and last name)');"/>
</li>
<li>
<label for="email">Email</label>
<input type="email" name="email" id="email"
aria-required="true" aria-invalid="false"
onblur="checkValidity('email', '@', 'Invalid Value, please enter a valid email’);"/>
</li>
</ul>This example provides 2 textboxes, one is for the Full name and the other one is for the email address. The first text box’s validation needs space between the first name and the last name, if the required conditions wasn’t met the text warning would appear. Same as to the email text box, if the entered value does not have an “@” symbol, the email is invalid.
43. Aria-readonly
The aria-readonly attribute determines elements that are in a read-only state, especially with interactive elements that are not editable. The purpose of the aria-readonly is to provide information for the user that an interactive element cannot be modified. The developer can use the aria-readonly attribute for list elements that are read-only, to let the user know that a list cannot be edited, else it can be selected as a read-only. The state of a read-only identified by aria-readonly for element still allows the user to copy the read-only content and paste it into their document. The aria-readonly can be used for elements such as forms, columns, rows, and tables. The aria-readonly can also be used with other aria-labels such as aria-owns, aria-activedescendant, and aria-autocomplete.
<input type=”text” aria-activedescendant=”cb1-opt6″ aria-readonly=”true”
aria-owns=”cb1-list” aria-autocomplete=”list” role=”combobox” id=”cb1-edit”>
<ul aria-expanded=”true” role=”listbox” id=”cb1-list”>
<li role=”option” id=”cb1-opt1″>Warriors</li>
<li role=”option” id=”cb1-opt2″>Celtics</li>
<li role=”option” id=”cb1-opt3″>Heat</li>
<li role=”option” id=”cb1-opt4″>Suns</li>
<li role=”option” id=”cb1-opt5″>Rockets</li>
<li role=”option” id=”cb1-opt6″>Spurs</li>
<li role=”option” id=”cb1-opt7″>Jazz</li>
</ul>This example stated that the aria-readonly is already declared as a value of “true”. The input element is text with 7 list options or basketball teams that can only be read, but the user will not be able to edit it.
44. Aria-grabbed
The aria-grabbed element is considered to be draggable and usable in drag-and-drop operations. The aria-grabbed attribute defines the state of the element when it has been grabbed. The function of the aria-grabbed attribute is to signal to the user that the object or elements that have been selected are grabbable or draggable and can be moved out of their current location. The functionality of the elements’ behavior can be described by the developer with the help of the aria-grabbed attribute by indicating whether the value of the element or the element’s state attribute is true or false. A value of false can be stated to an element by the developer in order to prevent the element from being included in the aria-grabbed state even if it is already being represented by another element. When performing a drag and drop operation, the aria-grabbed attribute is combined with the drop event and the drag event, both of which are involved in the process. The aria-grabbed label can also be used in conjunction with other ARIA labels, such as the aria-dropeffect label. It’s possible that the aria-grabbed will one day be replaced by a new ARIA label, which will allow for the capacity of the former to be improved and expanded.
45. Aria-disabled
The aria-disabled indicates a state for an interactive element that can be inaccessible or accessible in precedence if required actions are met. The purpose of aria-disabled is to provide information to the user that an instance cannot proceed due to some required toggles in need of interactions or blanks to be filled in information. The developer can use the aria-disabled better than the native HTML <disabled> element, the ARIA attribute provides versatility and relevance for the user of the assistive technologies. The aria-disabled can be used for elements such as options, header buttons, buttons, and items. The aria-disabled can be used with other ARIA labels such as, aria-hidden and aria-readonly.
<button type="submit" aria-disabled="true">Send</button>
<style>
button[disabled],
button[aria-disabled=true] {opacity= .5;}
</style>The example syntax shows that information about the send button is disabled, as the button element is stated as disabled. To proceed with submitting a function or trigger an instance, the value should be equal to “true” unless the button property is false.
46. Aria-multiselectable
The aria-multiselectable attribute is an identifier that a set of objects or items can be selected in two or more selections. The purpose of aria-multiselectable is to provide a piece of information to the user that a number of items can be multi-select, which means the user can select more than one item in the container. The developer can use the aria-multiselect to indicate a form that has an option that a user can select multiple items at once. The aria-multiselectable can be used in elements such as tables, cells, forms, and grids. The aria-multiselectable can be used with other ARIA labels like aria-selected, they are both points to an element that is selected.
<div role="listbox" tabindex="0" id="listbox1"
aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
<div role="option" id="listbox1-1" class="selected"
aria-selected="true">Keys</div>
<div role="option" id="listbox1-2">Coins</div>
<div role="option" id="listbox1-3">Pen</div<
</div>The syntax example states that the list box can have multiple select values, if the aria-multiselectable state is true the aria-selected value should be also true. The other items in the list box that are not selected have a state value of false.
47. Aria-placeholder
The aria-placeholder is an attribute that provides a text indicating a hint to an input or a format for input, it can be a sample input for a text box or a format like a date or time. The purpose of the aria-placeholder is to help the user to enter the right format or value for the text box. The developer can use the aria-placeholder to let the user know how to input a value and what is the right format to input, especially for the date and time. The aria-placeholder is used for elements such as text box, combo box, search box, slide, and the spin button. The aria-placeholder can be used with other ARIA labels, such as aria-labelledby and aria-label.
<span id="YourDateApplication">Your Date of Application</span>
<div contenteditable role="textbox"
aria-labelledby="YourDateApplication"
aria-placeholder="MM-DD-YYYY">mm-dd-yy</div>The example tells that the aria-placeholder provides helpful information as given, “MM-DD-YYYY” that is also provided by the HTML, but ARIA labels are best to provide consistent assistance to the user of the technology. The aria-placeholder would announce to the user via screen reader what the format of the text box requires.
48. Aria-roledescription
The aria-roledescription function is to provide a definitive role description of an element. The benefit of using the aria-roledesription is to provide a user experience that allows the assistive technology’s screen reader to give a meaningful description of an element. The aria-roledescription should not be used when describing an element’s role that has similar functions to other elements, if roledescription is needed it should be unique to avoid misinformation to the user. When using aria-roledescription to present a new role name to the user, localizing the page and its values should be considered, especially when customizing the assistive technology.
<div role="article" aria-roledescription="slide" id="slide" aria-labelledby="slideheading">
<h1 id="slideheading">Progress Report</h1>
<!-- remaining slide contents -->
</div>The example syntax states that the aria-roledescription describes the article as a Slide, and it would be translated to the user as a “progress report slide”.
49. Aria-rowindex
The function of the aria-rowindex is to provide a cell position, especially for a table that has too many rows. The aria-rowindex lets the user know where exactly it is located in the table, grid, or treegrid. The importance or aria-rowindex can be useful if not all or if only a portion of the table property is identified by the user agent or DOM, it needs ARIA label properties that will define its position to the user. The aria-rowindex value is an integer, positions declared or set should not overlap with other cells, current row value should be greater than the previous value else less than or equal to the entire row of the table.
<div role="grid" aria-rowcount="2000">
<div role="rowgroup">
<div role="row" aria-rowindex="1">
<span role="columnheader">First Name</span>
<span role="columnheader">Last Name</span>
<span role="columnheader">Home Address</span>
<span role="columnheader">Phone</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="100">
<span role="gridcell">Freddie</span>
<span role="gridcell">Aguilar</span>
<span role="gridcell">Mandaluyong</span>
<span role="gridcell">301-3434</span>
</div>
<div role="row" aria-rowindex="101">
<span role="gridcell">Sarah</span>
<span role="gridcell">Duterte</span>
<span role="gridcell">Davao City</span>
<span role="gridcell">302-0202</span>
</div>
<div role="row" aria-rowindex="102">
<span role="gridcell">Isko</span>
<span role="gridcell">Moreno</span>
<span role="gridcell">Manila</span>
<span role="gridcell">303-2222</span>
</div>
</div>
</div>The example syntax states that the position of the user is at row 100, then the next row is 101 and 102, and the user is able to know where they are located in the list table and where to navigate next.
50. Aria-selected
The aria-selected function identifies an element’s state that is selected or currently selected. The benefit of using aria-selected is to let the user know what is the current state of an element in focus. The importance of the aria-selected is that selectable items in a grid cell can be identified by the user via the screen reader that the currently focused item is selected. If one or more items can be selected, aria-multiselectable should be declared along with aria-selected. In the tablist where aria-selected can be used, a currently selected tab will enable a selected tab panel to be displayed. For the row, using aria-selected=”true” will enable the row to be selected but not as a column, the cell would be selected as a column if the grid cell supports column structure.
<nav role="navigation" aria-label="Pagination Navigation">
<ul>
<li>
<a href="/page-1" aria-label="Go to Page 1">See Page 1</a>
</li>
<li>
<a href="/page-2" aria-label="Current Page, Page 2"
aria-selected="true">You are currently on page 2</a>
</li>
<li>
<a href="/page-3" aria-label="Go to Page 3">Go to page 3</a>
</li>
</ul>
</nav>The syntax shows that Page 2 is the current page that is focused and selected, the role navigation plays the role of providing the user the information about a navigation function. The aria-selected value is true if the current element is in focus.
51. Aria-valuemin
The function of the aria-valuemin provides the necessary information to the user and user agent that the minimum value is required when using the widget element. The benefit of using the aria-valuemin is the same as using the aria-valuemax, as it controls the value or limits the value to be entered. The aria-valuemin value can be integer or decimal, as long as the value entered is within the range. The minimum value that aria-value can have is only equal to or greater than the minimum value. The range role itself should NOT be used as it is an “abstract”. The aria-valuemin attribute is used on all the range roles subtypes.
<div id="dimesLabel">Progress bar ranging from 0% to 100%</div>
<div role="slider" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"
aria-labelledby="dimesLabel" id="dimes"></div>This example states that the aria-valuemin has a declared value of 0, it relays the information to the user that the progress bar slider is just starting, and the progress will end at 100.
52. Aria-valuemax
The function of aria-valuemax is to identify the highest value property the range element contains. The benefit of aria-valuemax is that it can provide information about the range of the highest value that is required with the range element. The importance of aria-valuemax is providing the maximum capacity of an element, the user will not have difficulty in providing input because of the range value that the user may select. If the aria-valuemax is used to define the highest value of a range element, it should be paired with an attribute that defines the lowest value, the aria-valuemin. The combo declaration enables the syntax of the range widget to be complete when it is announced during selecting between the range.
<div id="dimesLabel">Select a number from 1 to 10</div>
<div role="slider" aria-valuenow="5" aria-valuemin="1"
aria-valuemax="10"
aria-labelledby="dimesLabel" id="dimes"></div>The example states that the aria-valuemax identifies that value declared as 10, the role element used is a slide that can be through sliding to an equivalent value, and the current selected 5.
What to know about Aria labels?
The ARIA labels are now widely used since it was published in 2014, although there are some browsers that still lack support but definitely being added as an attribute for HTML elements. The ARIA label focused on three components that can define an element, Role, State, and Attribute or Property.
These are the components that ARIA does for the HTML API.
- Role: The aria role represents a user interface element, for example, role=” table” or role=” textbox”, the roles can be used in different groups of roles. The group of roles is Widget roles, Landmark roles, and Document roles.
- State: The aria state is used to indicate an aria attribute’s current state, it can be either a true or false value. These aria state values are used in elements that are clickable and can be toggled. The
- Property: This type of aria label indicates a current state that is either a string or numeric value.
Do aria labels provide web usability for people with any kind of disability?
The ARIA label provides web usability technology for users that are blind or deaf. The scope of the aria label depends on assistive technology. The aria properties are applied to devices or assistive technology that is offered to persons that are visually impaired screen reader, and braille technology is part of the assistive technology. The aria label provides a user experience that can be accessed using the keyboard or the braille devices.
Do aria labels help for Search Engine Optimization?
There is no evidence that ARIA labels help in Search Engine Optimization. The ARIA label is not designed for the purpose of SEO, though there are forums talking about the possibility that it may help, as for now, there is no proof or evidence to support it.
Is it hard to use aria labels?
The ARIA labels were designed to be an additional attribute to the existing HTML elements. A well-developed semantic HTML page provides enough information or usable labels that a screen reader would already interpret, which means that aria labels are not needed in sections like this. If the DOM already provides necessary information about the elements, there is no need to add an aria attribute because it is already acceptable information for the screen readers. When a native HTML is not present in the DOM, that is when the aria labels may come.
- 48 Online Shopping and Consumer Behavior Statistics, Facts and Trends - August 22, 2023
- B2B Marketing Statistics - August 22, 2023
- 38 Podcast Statistics, Facts, and Trends - August 22, 2023
