Repository navigation
Fix heading structure, video iframe titles and footer link underlines - #586
julien-deramond wants to merge 2 commits into
Conversation
|
|
||
| // Links inside running text must not rely on colour alone (WCAG 1.4.1) | ||
| .bd-footer-note a { | ||
| text-decoration: underline; |
There was a problem hiding this comment.
Requested the review to you @mdo’s review on this modification to have your opinion on the design side of it.
From a pure a11y perspective, I think this approach would be better. However, it would also change the rendering of the blog footer. I could backport this change (or an alternative solution) to the other sites as well.
In this PR:
On the main website:
Maybe we could just keep the underline and tweak it slightly (reduce the gap, adjust the color, etc.).
If we don't want this change, we can simply revert this part and keep the other a11y improvements.
There was a problem hiding this comment.
Late to this sorry! Yeah lets reduce the underline opacity to like 50 for default, then full on hover.
There was a problem hiding this comment.
Done at https://deploy-preview-586--bootstrapblog.netlify.app/. But maybe on hover you wanted to keep the gray/black/dark color instead of blue.
8c05903 to
7cafc4d
Compare
7cafc4d to
5c9bd34
Compare
a3f58d3 to
5fe0d73
Compare
e8636d5 to
a49509c
Compare
Add an h1 to the archive and videos pages, make the archive year headings h2, give each video iframe a title naming its post, and underline the links in the footer's running text so they don't rely on colour alone. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
a49509c to
b8d7863
Compare
Adds an
h1to the archive and videos pages (visually hidden, so the layout doesn't change), turns the archive year headings intoh2, gives each video iframe on/videos/a title naming its post instead of the identical "YouTube Video", and underlines the links in the footer's running text so they don't rely on colour alone (WCAG 1.4.1).What was done
src/pages/archive.astro:<h1 class="visually-hidden">Archive</h1>; year<h3>becomes<h2 class="h3">(same look).src/pages/videos.astro:<h1 class="visually-hidden">Videos</h1>; iframetitleisVideo: <post title>.src/components/footer/Footer.astro+src/assets/scss/_footer.scss: the slot list getsbd-footer-note, and links in it are underlined. The shared footer's column links keep their current style.h1rather than a visible heading, to keep the current design; a visible title would be the alternative.h5heading order (@twbs/bui, Bootstrap 6).npm testpasses (build, eslint, stylelint, markdownlint, linkinator, lockfile-lint). Built HTML has oneh1on each page. Not checked in a browser or with a screen reader.How to review
h1on archive and videos; keep it, or ask for a visible page title.npm ci && npm start, open http://localhost:4000/archive/ and /videos/ (look unchanged), scroll to the footer and check the four links are underlined in light and dark.🤖 Generated with Claude Code