Smart.CardView - Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

CardView provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-disabled and others. They are applied to the corresponding elements inside the template of the components. CardView component contains many elements with different roles such as "toolbar", "button", "list", etc.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers. The following ARIA attributes are used by the CardView component:

• aria-disabled - indicates that the interaction with the CardView element is disabled.
• aria-label - label the controls inside the header toolbar and the content cards by making them recognizable.
• aria-hidden - indicates that there are elements from the template of the CardView that do not take part in the interaction with the component and will not be mapped to the accessibility API.
• aria-expanded - indicates that a Card item inside the CardView is expanded and it's contents are visible. It is also used by the toolbar buttons to indicate when their popup is visible.
• aria-haspopup - Applied to the buttons inside the header toolbar of the CardView to indicate that they have a popup.
• aria-labelledby - Applied to the Cards inside the CardView to indicate that they are labelled by another element inside their body.
• role - the CardView component has many controls with different purpose. Each one of them has a role corresponding to it's functionality, for example
  • group - the actual CardView has this role. It is used to indicate that the element is not intended to be included in the page summary of contents by assistive technologies but groups a user interface objects that will be.
  • list - the container that holds the CardView items ( Cards ).
  • listItem - the default role of each CardView item.
  • region - similar to the "group" role it groups a user interface objects that will be included in the page summary of contents by assistive technologies but unlike "group" it will also be included in the page symmary.
  • heading - the title of the CardView item's content.
  • toolbar - the header of the CardView that contains the filtering, searching controls.