Feature: Add direct permalinks for each checklist item
Created by: andrewborstein
Background
I often link to https://www.a11yproject.com/checklist when I want to share concise and easily digestable documentation about accessibility with my teammates. But I would love if there were a way to easily share a link directly to a specific checklist item, instead of the entire list or a section of the list.
Currently my workaround is to grab the unique id
value from the <summary>
element in the DOM and manually append it to the URL. For example, https://www.a11yproject.com/checklist#dont-skip-heading-levels will link directly to that checklist item.
From A11y Project:
Potential implentation
One related technique that could be a source of inspiration is linkable headings.
Heading text wrapped in a link
From A11y Style Guide:
Underlying markup (simplified):
<h2>
<a href="#kssref-structure-lists">
Lists
</a>
</h2>
Example link: https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-lists
Heading with icon link appended
From Andy Bell's blog:
Underlying markup (simplified):
<h2 id="heading-size-scales-ftw">
Size scales FTW
<a href="#heading-size-scales-ftw">
<span class="visually-hidden"> permalink</span>
<svg aria-hidden="true" focusable="false"><path d="M9.199 ..."></path></svg>
</a>
</h2>
Example link: https://hankchizljaw.com/wrote/fluid-scale-and-tokens:-a-match-made-in-heaven/#heading-size-scales-ftw
Other implementation thoughts
If the anchor link approach is appealing, I think it might need to live outside of the <summary>
element, so it doesn't interfere with the normal open/close behavior. Or maybe there's a simple progressively enhanced JS solution that would work here, too, where opening a checklist item appends the #unique-id
to the URL and visiting said URL can automatically open the item details if JS is enabled.
Is there any interest in adding a feature like this? If so, I'd love to discuss potential implementation ideas and would also be happy to take the lead on a pull request!
BTW, love the redesign