search

CivicActions / accessibility

CivicActions Accessibility Site: A collection of resources about digital accessibility and how it aligns with open source, CivicTech and Digital Transformation.
https://accessibility.civicactions.com
Other
27 stars 11 forks source link

Feature request: Add permalinks to heading ID's #261

Closed mgifford closed 3 years ago

mgifford commented 3 years ago

Is your feature request related to a problem? Please describe. I want what GitHub is doing with displaying their Markdown files. I want to be able to view https://github.com/CivicActions/accessibility/blob/main/_posts/2021-03-12-automated-accessibility-testing-leveraging-github-actions-and-pa11y-ci-with-axe.md

Some other sites (maybe the W3C) are doing this with the https://en.wikipedia.org/wiki/Section_sign but a link symbol can work. No big deal.

Main thing is that when I hover over the headings I get a link to an anchor that I can click on to make it easy to share a link right to the heading "Running pa11y-ci in a GitHub action", I shouldn't have to dig into the source code to find the ID or install an extension or bookmarklet to get this link.

Screen shot of the page

Describe the solution you'd like Let's just re-use what GitHub uses. At least the code side.

Describe alternatives you've considered I'm not even 100% sure what to search for.

dmundra commented 3 years ago

Couple of solutions:

mgifford commented 3 years ago

@lukefretwell where was this functionality added here https://distributedgov.com/

dmundra commented 3 years ago

@mgifford here it is https://github.com/distributedgov/distributedgov.github.io/commit/8029fe2bfb40a52f17d41ba0d7d19a7367862818

I matches the solution from https://github.com/allejo/jekyll-anchor-headings

mgifford commented 3 years ago

This can also be called "heading anchors" (HT Daniel) or "linked headings" (HT Erik Kroes) or Anchor Links (HT Darek Kay). Darek also provided this great link: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/

Turning the heading into a link and adding a UTF8 🔗 symbol ::before would looks like it would be best. Possibly without any hover or focus to show/hide it.

mgifford commented 3 years ago

First step is to get the anchor headings https://github.com/CivicActions/accessibility/pull/271

mgifford commented 3 years ago

Interesting example here especially with focus on the page https://www.access-board.gov/ict/#about-the-ict-accessibility-standards