Accessibility: aria-label

icons and aria-labels

For Quarto websites, you can add icons as Nav Items in the navbar and/or page footer YAML. The value of the icon field can be the name of any of the Bootstrap icons. To make these items accessible to screen readers, you should also add an aria-label describing what the navigation item is.

For example, here are snippets from the YAML for the Quarto documentation website.

From the top navbar:

website:
  navbar:
    right:
      - icon: twitter
        href: https://twitter.com/quarto_pub
        aria-label: Quarto Twitter

From the page footer:

website:
  page-footer:
      - icon: github
        href: https://github.com/quarto-dev/quarto-cli
        aria-label: Quarto GitHub

Learn more

Nav items.