diff --git a/src/material/list/list.md b/src/material/list/list.md index e6a7ed85d9d6..448cedc7ec21 100644 --- a/src/material/list/list.md +++ b/src/material/list/list.md @@ -241,6 +241,35 @@ anchors, including buttons and checkboxes. Always provide an accessible label for the `` element via `aria-label` or `aria-labelledby`. +To provide the best screen reader experience for a list, wrap each anchor element with a `
  • ` or `
    ` element and wrap all of the anchor elements with a `
      ` element or `
      ` element. + +```html + +
        + @for (link of list; track link) { +
      • + {{ link }} +
      • + } +
      +
      +``` + +#### Action + +To provide the best screen reader experience for a list, wrap each button element with a `
    • ` or `
      ` element and add `role="list"` to ``. + +```html + +
    • + +
    • +
    • + +
    • + +``` + #### Selection You should use `MatSelectionList` and `MatListOption` for lists that allow the user to select one