Describe the bug

We should add an aria-label to the headings. Currently with aria-label not specified, VoiceOver returns heading level 1, 2 items What is VitePress, visited, link, Permalink to "What is VitePress?", which is very unclear and verbose.

Reproduction

Just head to https://vitepress.dev/guide/what-is-vitepress on Mac, open VoiceOver and click on any heading.

Expected behavior

An aria-label should be added to heading elements. Take the # What is VitePress? as an example, it should be rendered as:

<h1 id="what-is-vitepress" tabindex="-1" aria-label="What is VitePress?">
  <a class="header-anchor" href="#what-is-vitepress" aria-hidden="true">
    &ZeroWidthSpace;
  </a>
  What is VitePress? 
</h1>

Then VoiceOver returns Heading level 1, What is VitePress?.

System Info

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 98.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.7.0 - ~/.nvm/versions/node/v19.7.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v19.7.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v19.7.0/bin/npm
    pnpm: 8.6.0 - ~/.nvm/versions/node/v19.7.0/bin/pnpm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 17.0

Additional context

I am willing to fix this bug by myself. However as I'm not familiar with MarkdownIt, I think I need some help on where to customize the rendering rules of headers.

Validations

• Check if you're on the latest VitePress version.

  Follow our Code of Conduct

  Read the docs.

  Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.