diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index a098cfe..e9a7e92 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -1195,9 +1195,9 @@ While this success criterion is only AAA-level, it's easy enough to meet and ben You can use ":focus" and ":focus-visible" to highlight selected and keyboard-focused elements, respectively. Take care to only alter styling, not behavior: only keyboard-focusable elements should receive outlines. Modern browser stylesheets use ":focus-visible" instead of ":focus"; old browsers only support ":focus" and re-style a subset of focusable elements. Your stylesheets should do the same, to match browser behavior. -I do not re-style ":focus" when ":focus-visible" works, to match existing behavior. I also override ":focus" styling only on the subset of focusable elements that would normally show an outline. Based on an idea by tempertemper, but modified to work on old browser engines such as KHTML and WebKit 537.21: +I do not re-style ":focus" when ":focus-visible" works, to match existing behavior. I also override ":focus" styling only on the subset of focusable elements that would normally show an outline. Based on an idea by TPGi. -=> https://www.tempertemper.net/blog/refining-focus-styles-with-focus-visible Refining focus styles with focus-visible +=> https://www.tpgi.com/focus-visible-and-backwards-compatibility/ :focus-visible and backwards compatibility ``` a:focus, @@ -1218,7 +1218,9 @@ a:focus, } ``` -If your site has elements that need to show focus on clicks rather than on keyboard-navigation (e.g. input, radio buttons), ":focus-visible" alone may not be enough. Some websites specify overrides in their stylesheets on a per-element basis to work around this. +If you’d like to learn more, Sara Soueidan wrote a far more detailed post on making accessible focus indicators: + +=> https://www.sarasoueidan.com/blog/focus-indicators/ A guide to designing accessible, WCAG-compliant focus indicators ## Screen reader improvements diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index f253eeb..9ca78e5 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -553,11 +553,11 @@ The recommended way to link to a transcript is by hyperlinking the image (i.e., A [StackOverflow thread about comic transcripts](https://stackoverflow.com/questions/65564539/what-is-the-semantically-correct-way-to-include-transcript-from-a-comic) outlines a good approach to semantically group images and transcripts, and my approach is similar. I group an image, alt-text, and caption in a `
` element and follow it with a transcript in a `
` element. I use `aria-describedby` to semantically link the figure and the transcript. -An image, alt-text, figure caption, and transcript combine to form a complex relationship that should be grouped together in a single landmark. I put all three inside an `
` with a heading, and give the group an `aria-label` that indicates the presence of the three sub-elements. Using an `article` landmark ensures that the figure and caption remain together as a single unit. The [html code](#xkcd-html) for the [xkcd comic earlier in the page](#xkcd-comic) is a representative example. +An image, alt-text, figure caption, and transcript combine to form a complex relationship that should be grouped together in a single landmark. I put all three inside an `
` with a heading, and give the group an `aria-label` that indicates the presence of the three sub-elements. Using an `article` landmark ensures that the figure and caption remain together as a single unit. The [html code](#xkcd-html) for the [xkcd comic earlier in the page](#infinite-scrolling) is a representative example. -{{}} +{{}} -{{< codecaption lang="HTML" id="xkcd-html" >}} here's a simplified version of the HTML used to embed a comic in this article. Of course, I take care of most of the boilerplate with shortcodes. {{< /codecaption >}} +{{< codecaption lang="HTML" >}} here's a simplified version of the HTML used to embed a comic in this article. Of course, I take care of most of the boilerplate with shortcodes. {{< /codecaption >}} ```figure {var1="SRC" str1="figure" str2="img" str3="alt" str4="details" str5="article", str6="figcaption" str7="aria-label" str8="aria-describedby"}
@@ -1152,7 +1152,7 @@ You can use `:focus` and `:focus-visible` to highlight selected and keyboard-foc {{< codecaption lang="CSS" >}} -I do not re-style `:focus` when `:focus-visible` works, to match existing behavior. I also override `:focus` styling only on the subset of focusable elements that would normally show an outline. Based on the post {{}} by {{, but modified to work on old browser engines such as KHTML and WebKit 537.21. +I do not re-style `:focus` when `:focus-visible` works, to match existing behavior. I also override `:focus` styling only on the subset of focusable elements that would normally show an outline. Based on the post {{}} by . {{< /codecaption >}} @@ -1177,7 +1177,7 @@ a:focus, {{}} - +If you'd like to learn more, {{< cited-work name="A guide to designing accessible, WCAG-compliant focus indicators" url="https://www.sarasoueidan.com/blog/focus-indicators/" extraName="headline" >}} by {{< indieweb-person url="https://www.sarasoueidan.com/" first-name="Sara" last-name="Soueidan" url="https://www.sarasoueidan.com/" itemprop="author">}} has far more details on making accessible focus indicators. Screen reader improve­ments {#screen-reader-improvements} ------------------------------- diff --git a/layouts/shortcodes/codecaption.html b/layouts/shortcodes/codecaption.html index 3560284..0d88e35 100644 --- a/layouts/shortcodes/codecaption.html +++ b/layouts/shortcodes/codecaption.html @@ -1,5 +1,8 @@ {{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}} {{- $id := (printf `code-%d` $codeIndex) -}} +{{- with .Get "id" -}} + {{- $id = . -}} +{{- end -}} {{ with .Parent }} {{- with .Get "id" -}} {{- $id = . -}}