search

paulmartins / hugo-digital-garden-theme

Hugo Theme for digital gardening projects.
MIT License
83 stars 40 forks source link

Accessibility: Garden/Projects/Books cards' links aren't navigable in screen-readers #20

Open Cordelya opened 1 month ago

Cordelya commented 1 month ago

If you visit a site using this theme via Lynx (and probably many other text-only or screen-reader type browsers), links to garden/project/book items aren't rendered because there's no anchor text to display.

For my one site that is using this theme, my temporary fix has been to add the following just below the anchor with the .stretched-link class:

<a href="{{ .Permalink }}" class="sr-only">{{ .Title }}</a>

This allows text browsers to properly render those links while hiding them from graphical browser visitors via Bootstrap's sr-only class.

If you'd like to incorporate this change into this repo, let me know and I'll put together a PR.

Related - the "Digital Garden", "Projects", and "Library" headings that appear as headings in a graphical browser are not formatted as headings in a text-based browser because they're not wrapped in <h#> tags. I'll drop some screenshots in the replies that illustrate all of this. I haven't formulated a solution for that issue yet, but it's on my to-do list.

Cordelya commented 1 month ago

image

In the above screenshot, I have navigated to the theme's Demo using Lynx. Green text represents navigable links. Yellow text represents text wrapped in <h5> tags image alt text. The "Digital Garden" and "Projects" links, which are styled as subheadings with CSS, display as undifferentiated plain-text.