Tag Archives: WAI ARIA

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-selected (state)

Aria-selected state is used to notify when one or more items in a widget have selectable functionality. Eg: various tabs in a tab panel have selectable mechanism. In general the selected state is notified to the user with a change in color. The change in color notification will not be recognized by screen reading technologies.… Continue Reading aria-selected (state)

aria-required (property)

aria-required property is used on a form element when the user input is required on the field. Providing aria-required property set to true before the form submission avoid users from making mistakes. Aria-required property like any other aria role, state or property just indicates that the field is required to the user. The visual identification… Continue Reading aria-required (property)

aria-relevant (property)

Aria-relevant property is an optional value to an aria-live region. Aria-relevant property is used when the web page contains frequently updating content such as a live chat. Aria-relevant property helps in intimating the updated content to the assistive technology. In some cases it is also important for the user to intimate the logs that are… Continue Reading aria-relevant (property)

aria-readonly (property)

aria-readonly (property) is used when certain fields on the page are not editable. User can just find information on the readonly field but cannot edit. By setting aria-readonly property to true screen reader user can identify that the field is readonly. When aria-readonly (property) is used on any element content authors should allow focusing on… Continue Reading aria-readonly (property)

aria-pressed (state)

aria-pressed state is used to inform the user that an element is a toggle button. aria-checked(state) and aria-selected (state) (future link) are similar to aria-pressed. In normal state aria-pressed will be in release state and the value is false. When the user clicks or activates the button it changes to pressed state where the value… Continue Reading aria-pressed (state)

aria-posinset (property)

Aria-posinset property defines an element’s number or position in the current set of listitems or treeitems. Defining aria-posinset is not required if all elements in the set are present in the DOM. If all items in a set are present in the document structure, it is not necessary to set aria-posinset attribute, as the user… Continue Reading aria-posinset (property)

ARIA-orientation (property)

Aria-orientation property is used to indicate if an element is oriented horizontally or vertically on a web page. aria-orientation is used on components such as separators, scrollbars and spin buttons. So roles in which the aria-orientation property can be used are separator role, scrollbar role and spinbutton role. aria-orientation have two possible values. Aria-orientation=”horizontal” is… Continue Reading ARIA-orientation (property)

ARIA-multiline (property)

Aria-multilline property is used in conjunction with input type textarea. Textarea is used when user is expected to provide large content in a form. This attribute is used for fields like feedback, comments in a form. Screen readers such as NVDA cannot identify the difference between normal text and textarea. So users who use them… Continue Reading ARIA-multiline (property)

ARIA-invalid (state)

WCAG 22.0 SC 3.3.1 Error Identification says, if an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. Errors for form fields may occur in various ways. One of them is the invalid format of inputting the data. The input format… Continue Reading ARIA-invalid (state)