<mat-card> is a content container for text, photos, and actions in the context of a single subject.
The most basic cards require only a <mat-card> element with some content. However, Angular Material provides several preset sections that you can use inside <mat-card> :
These elements primarily serve as pre-styled content containers without any additional APIs. However, they align property on <mat-card-actions> can position the actions at the 'start' or 'end' of the container.
In addition to the sections mentioned above, <mat-card-header> gives the ability to add a rich header to a card. This header can contain:
<mat-card-title-group> can be used to combine a title, subtitle, and image into a single section. This element can contain:
Cards can be used in a wide variety of scenarios and can contain many different types of content. Because of this dynamic nature, appropriate accessibility treatment depends on how the <mat-card> is used.
Groups, Regions, and Landmarks
Many ARIA roles communicate that a part of the UI represents some semantically meaningful whole. Depending on what the content of the card means for your application, role="group", role="region", or one of the historical roles should usually be applied to the <mat-card> element.
A role is unnecessary when the card is used as a purely decorative container that does not convey a meaningful grouping of related material to a single theme. In these cases, the content of the card must follow standard practices for document content.
Depending on how the card is used, it may be appropriate to implement a tabindex for the <mat-card> element. If the card is the primary mechanism the user interacts with the application, then tabindex="0" is appropriate. If the card can be focused, but it is not part of the document flow, then tabindex="-1" is appropriate.
If the card serves as a purely decorative container, it doesn't need to be a table. In this case, the card contents should follow the general best practices for tab order.