Category Archives: States and Properties

aria-modal (property)

aria-modal is a new property introduced in ARIA 1.1. It indicates if an element is a modal when displayed. Modal window ¬†or simply modal is used only in specific situations where the entire work flow is blocked until the content in the overlay window gets attention. These are typically used to grab complete user attention… Continue Reading aria-modal (property)

aria-errormessage (property)

aria-errormessage property is used to present the error message to a screen reader user. It uses id value to reference the message container. This is similar to aria-describedby property which references a message from any other container on the page using the id value reference. As per WCAG 2.0 SC 3.3.1 Error Identification, user need… Continue Reading aria-errormessage (property)

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)