A rough timeline of QUIC support in OpenSSL-like libraries:
1. BoringSSL implements QUIC.
2. Quiche, a QUIC library, requires BoringSSL. Nginx can be patched to use Quiche for HTTP/3.
3. Nginx's experimental QUIC branch (nginx-quic) is released. It requires BoringSSL.
4. Some organizations (mostly Akamai) fork OpenSSL to implement the BoringSSL QUIC API, calling their fork QuicTLS. They plan to upstream changes.
5. nginx-quic supports building with QuicTLS too.
6. [OpenSSL decides against the BoringSSL API](https://daniel.haxx.se/blog/2021/10/25/the-quic-api-openssl-will-not-provide/) and declines QuicTLS patches, preferring to write their own incompatible implementation.
7. LibreSSL implements the BoringSSL QUIC API.
8. [nginx-quic can link against LibreSSL](https://hg.nginx.org/nginx-quic/rev/79cd6993a3e3) as well as BoringSSL and QuicTLS; they all use similar APIs.
(I _believe_ wolfSSL is mostly compatible with the BoringSSL QUIC API, but I might be wrong.)
Developers will have a harder time supporting multiple TLS implementations, hurting the viability of e.g. LibreSSL-based distributions.
image_alt: "Retro-looking browser with bitmap fonts showing this article's \"code snippet 4\"."
image_alt: "Retro-looking browser with bitmap fonts showing this article’s “code snippet 4”."
articleType: "TechArticle"
articleType: "TechArticle"
evergreen: true
evergreen: true
title: "Best practices for inclusive textual websites"
title: "Best practices for inclusive textual websites"
@ -124,7 +124,7 @@ If you're able to control your HTTP headers, then use headers instead of a `<met
the <ahref="https://html.spec.whatwg.org/multipage/images.html#list-of-available-images">list of available images</a> prior to dynamically inserting a <code>meta</code>
the <ahref="https://html.spec.whatwg.org/multipage/images.html#list-of-available-images">list of available images</a> prior to dynamically inserting a <code>meta</code>
element with an <code>http-equiv</code> attribute in the Content security policy state.
element with an <code>http-equiv</code> attribute in the Content security policy state.
Resources that have already been fetched are not guaranteed to be blocked by a Content
Resources that have already been fetched are not guaranteed to be blocked by a Content
Security Policy that's enforced late.
Security Policy that’s enforced late.
</p>
</p>
</blockquote>
</blockquote>
{{<quotecaptionpartOfType="TechArticle">}}
{{<quotecaptionpartOfType="TechArticle">}}
@ -307,7 +307,7 @@ Lazy loading may or may not work. Some browsers, including Firefox and the Tor B
{{<quotation>}}
{{<quotation>}}
<blockquoteitemprop="text">
<blockquoteitemprop="text">
<p>Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.</p>
<p>Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user’s approximate scroll position throughout a session, by strategically placing images in a page’s markup such that a server can track how many images are requested and when.</p>
</blockquote>
</blockquote>
{{<quotecaptionpartOfType="TechArticle">}}
{{<quotecaptionpartOfType="TechArticle">}}
{{<cited-workname="<img>: The Image Embed element"url="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"extraName="headline">}}
{{<cited-workname="<img>: The Image Embed element"url="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"extraName="headline">}}
@ -416,7 +416,7 @@ Long pages with many DOM nodes may benefit from CSS containment, a more recently
Leveraging containment and `content-visibility` is a progressive enhancement, so there aren't any serious implications for older browsers. I use `content-visibility` to defer rendering off-screen entries in my archives. Doing so allows me to serve long archive pages instead of resorting to pagination, with page-length limited only by download size. In my tests using Lighthouse with Chromium Devtools' simulated CPU throttling,[^11] this article rendered faster _with_ containment-enabled CSS than without any custom stylesheets at all.
Leveraging containment and `content-visibility` is a progressive enhancement, so there aren't any serious implications for older browsers. I use `content-visibility` to defer rendering off-screen entries in my archives. Doing so allows me to serve long archive pages instead of resorting to pagination, with page-length limited only by download size. In my tests using Lighthouse with Chromium Devtools' simulated CPU throttling,[^11] this article rendered faster _with_ containment-enabled CSS than without any custom stylesheets at all.
Using `content-visibility` for content at the end of the page is relatively safe. Using it for content earlier in the page risks introducing minor [layout shifts](#layout-shifts) and scrollbar-jumping. Eliminate the layout shifts by calculating a value for the `contain-intrinsic-size` property. {{<mention-workitemtype="TechArticle">}}{{<cited-workurl="https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/"name="Calculating 'contain-intrinsic-size' for 'content-visibility'" extraName="headline">}}, by {{<indieweb-personfirst-name="Thijs"last-name="Terluin"url="https://www.terluinwebdesign.nl/en/author/thijs-terluin/"org="Teluin Webdesign"org-url="https://www.terluinwebdesign.nl/en/"itemprop="author">}}{{</mention-work>}}, is a comprehensive guide to calculating intrinsic size values. The scrollbar is less likely to jump around noticeably on extra-long pages, so sufficient page-length could let you get away with setting `contain-intrinsic-size` to a rough estimate.
Using `content-visibility` for content at the end of the page is relatively safe. Using it for content earlier in the page risks introducing minor [layout shifts](#layout-shifts) and scrollbar-jumping. Eliminate the layout shifts by calculating a value for the `contain-intrinsic-size` property. {{<mention-workitemtype="TechArticle">}}{{<cited-workurl="https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/"name="Calculating ‘contain-intrinsic-size’ for ‘content-visibility’" extraName="headline">}}, by {{<indieweb-personfirst-name="Thijs"last-name="Terluin"url="https://www.terluinwebdesign.nl/en/author/thijs-terluin/"org="Teluin Webdesign"org-url="https://www.terluinwebdesign.nl/en/"itemprop="author">}}{{</mention-work>}}, is a comprehensive guide to calculating intrinsic size values. The scrollbar is less likely to jump around noticeably on extra-long pages, so sufficient page-length could let you get away with setting `contain-intrinsic-size` to a rough estimate.
### Performance of assistive technologies
### Performance of assistive technologies
@ -516,7 +516,7 @@ Web pages that hide content behind "show content" widgets are difficult to searc
{{<image-figureid="reddit-redesign">}}
{{<image-figureid="reddit-redesign">}}
{{<picturename="find"alt="screenshots before/after clicking a \"see more\" link obscuring a search match.">}}
{{<picturename="find"alt="screenshots before/after clicking a “see more” link obscuring a search match.">}}
<figcaptionitemprop="caption">
<figcaptionitemprop="caption">
@ -660,10 +660,10 @@ I personally try to maintain the flow of an article even if its figures and capt
that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix,
that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix,
without affecting the flow of the document.</p>
without affecting the flow of the document.</p>
<p>If a <code>figure</code> element is referenced by its relative position, e.g.,
<p>If a <code>figure</code> element is referenced by its relative position, e.g.,
"in the photograph above" or "as the next figure shows", then moving the figure would disrupt the
“in the photograph above” or “as the next figure shows” then moving the figure would disrupt the
page's meaning. Authors are encouraged to consider using labels to refer to figures, rather than
page’s meaning. Authors are encouraged to consider using labels to refer to figures, rather than
using such relative references, so that the page can easily be restyled without affecting the
using such relative references, so that the page can easily be restyled without affecting the
page's meaning.</p>
page’s meaning.</p>
</blockquote>
</blockquote>
{{<quotecaptionpartOfType="TechArticle">}}
{{<quotecaptionpartOfType="TechArticle">}}
<citeitemprop="name headline"class="p-name">HTML Living Standard</cite>, section 4.4.12:
<citeitemprop="name headline"class="p-name">HTML Living Standard</cite>, section 4.4.12:
@ -802,7 +802,7 @@ If you include a `theme-color` directive in your document `<head>`, then recent
{{<image-figure>}} {{<picturename="wk_link"alt="dark blue link on dark gray background.">}}
{{<image-figure>}} {{<picturename="wk_link"alt="dark blue link on dark gray background.">}}
<figcaptionitemprop="caption">WebKit's default dark stylesheet uses dark-colored links that are difficult to read.</figcaption>
<figcaptionitemprop="caption">WebKit’s default dark stylesheet uses dark-colored links that are difficult to read.</figcaption>
{{</image-figure>}}
{{</image-figure>}}
CSS filters such as `invert` are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin.
CSS filters such as `invert` are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin.
@ -816,7 +816,7 @@ Darker backgrounds draw less power on devices with OLED screens; however, backgr
This image is an approximation of what halation looks like, cropped from <ahref="https://www.essentialaccessibility.com/blog/accessibility-for-people-with-astigmatism">Essential Accessibility</a>.
This image is an approximation of what halation looks like, cropped from <ahref="https://www.essentialaccessibility.com/blog/accessibility-for-people-with-astigmatism">Essential Accessibility</a>.
</figcaption>
</figcaption>
{{<picturename="halation"alt="Fuzzy white text on black background reading \"But it is not\".">}}
{{<picturename="halation"alt="Fuzzy white text on black background reading “But it is not”." >}}
{{</image-figure>}}
{{</image-figure>}}
"Just disable dark mode" is a poor response to users complaining about halation: it ignores the utility of dark themes described at the beginning of this section.
"Just disable dark mode" is a poor response to users complaining about halation: it ignores the utility of dark themes described at the beginning of this section.
@ -1553,7 +1553,7 @@ Designers already test their websites with multiple browser engines to ensure cr
Screen readers on touch screen devices are also quite different from their desktop counterparts, and typically feature fewer capabilities. Be sure to test on both desktop and mobile.
Screen readers on touch screen devices are also quite different from their desktop counterparts, and typically feature fewer capabilities. Be sure to test on both desktop and mobile.
Screen reader implementations often skip punctuation marks like the exclamation point ("!"). Ensure that meaning doesn't rely too heavily on such punctuation.
Screen reader implementations often skip punctuation marks like the exclamation point (<samp>!</samp>). Ensure that meaning doesn't rely too heavily on such punctuation.
Screen readers have varying levels of verbosity. The default verbosity level doesn't always convey inline emphasis, such as `<em>`, `<code>`, or `<strong>`. Ensure that your meaning carries through without these semantics.[^35]
Screen readers have varying levels of verbosity. The default verbosity level doesn't always convey inline emphasis, such as `<em>`, `<code>`, or `<strong>`. Ensure that your meaning carries through without these semantics.[^35]
@ -1698,7 +1698,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju
I'm still on step 17, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht).
I'm still on step 17, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht).
{{<image-figurerepresentative="True">}} {{<picturename="serenity"alt="Retro-looking browser with bitmap fonts showing this article's \"Code snippet 4\"." class="pix"sf=2>}}
{{<image-figurerepresentative="True">}} {{<picturename="serenity"alt="Retro-looking browser with bitmap fonts showing this article’s “code snippet 4”." class="pix"sf=2>}}
<legend>Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.</legend>
<legend>Publish a response on your own website and share the link here to send me a webmention! Include a link to this page’s canonical location for it to be accepted.</legend>
<p>Webmentions received for this post appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. I replace broken links with <ahref="https://web.archive.org/">Wayback Machine</a> snapshots, if they exist.</p>
<p>Webmentions received for this post appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don’t support them. I auto-replace broken links with <ahref="https://web.archive.org/">Wayback Machine</a> snapshots, if they exist.</p>
