Category Archives: WAI-ARIA

aria-details (property)

Aria-details property identifies the element that provides a detailed explanation of an object. It is an ARIA 1.1 property. When an image or a similar element needs a detailed explanation, something more than what aria-describedby can provide aria-details can be used. The detailed explanation can be a container of text on the same page or… Continue Reading aria-details (property)

aria-colspan property

aria-colspan property defines the number of columns a cell spanned within a table, grid or a treegrid. Use host attribute equivalent if available. If both the host language equivalent and aria-colspan property are defined user agents have to pick the value expressed through the host language attribute and expose it to assistive technologies. Content authors… Continue Reading aria-colspan property

aria-colindex property

aria-colindex property is used on a table, grid or a treegrid where all the columns are currently not present. aria-colindex property notifies the index or position of the column in a table or grid or a treegrid with respect to the number of columns available. User agents can calculate the index of the column if… Continue Reading aria-colindex property

aria-colcount (property)

Dynamic tables are quite common in modern web. Number of columns depends on the data fetched by the input given by the user or any other parameters that define the table. aria-colcount (property) will be ideal to use in scenarios where the total number of columns are not available currently in the DOM. If all… Continue Reading aria-colcount (property)

aria-current (State)

aria-current state is used to indicate the current item in a set of elements within a component or a widget or a set of related elements. The aria-current state is specifically important to inform the screen reader user about the difference when an element within a set of related elements is visually styled to indicate… Continue Reading aria-current (State)

aria-valuetext property

Aria-valuetext property works similar to a aria-valuenow property. It Defines the human readable text alternative of aria-valuenow for a range widget. If aria-valuetext property is defined for any widget, author should also specify aria-valuenow unless aria-valuenow cannot be determined. The major difference between aria-valuetext and aria-value now is the type of value determined through them.… Continue Reading aria-valuetext property

aria-valuenow property

aria-valuenow property is used while developing range widgets. For a range widget a minimum and maximum values need to be defined. Examples of a range widget are sliders such as volume button on windows operating system. The volume button has a minimum value of 0% to a maximum value of 100%. Other range widgets include… Continue Reading aria-valuenow property

aria-valuemin (property)

aria-valuemin property is used while developing range widgets. For a range widget a minimum and maximum values need to be defined. Examples of a range widget are sliders such as volume button on windows operating system. The volume button has a minimum value of 0% to a maximum value of 100%. Other range widgets include… Continue Reading aria-valuemin (property)

aria-valuemax (property)

aria-valuemax property is used while developing range widgets. For a range widget a minimum and maximum values need to be defined. Examples of a range widget are sliders such as volume button on windows operating system. The volume button has a minimum value of 0% to a maximum value of 100%. Other range widgets include… Continue Reading aria-valuemax (property)

aria-sort (property)

aria-sort (property) is used to inform the screen reader user whether the columns or rows in a grid can be sorted. Aria-sort (property) is used to a table header or a grid header. This aria-sort (property) can be used both for column headers or row headers. aria-sort (property) has two possible values “ascending” and “descending”.… Continue Reading aria-sort (property)