From 8d1fa33d0c678134c4d4f3b48e69706b2d046c81 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Tue, 19 Apr 2022 20:19:58 -0700 Subject: [PATCH] Add more info on Windows High Contrast mode --- content/posts/website-best-practices.gmi | 8 +++++++- content/posts/website-best-practices.md | 24 ++++++++++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 76be171..ec23000 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -558,7 +558,13 @@ The Web version of this page is an example application of Technique C25 and the The Web version of this page only uses non-default colors when a user agent requests a dark color scheme (using the "prefers-color-scheme" CSS media query; see the next subsection) and for lightening borders. Any image with a solid background may match the page background; to ensure that their dimensions are clear, I surrounded them with borders. I also set a custom color for the borders and ensure that the image backgrounds don't match the border colors. I included borders further down to break up next/prev post navigation as well as separate footers, since these elements lack heading-based delineation. When overriding color schemes or disabling CSS altogether, the page layout remains clear. -Color overrides go well beyond simple foreground and background color changes. Windows' High Contrast Mode (HCM), for instance, makes more advanced modifications: +Color overrides go well beyond simple foreground and background color changes. Windows’ High Contrast Mode, for instance, makes more advanced modifications: + +> Win HCM is a collection of user defined color themes that overwrite your definitions in CSS. +> It’s not about design but readability. +> Some stuff will disappear in Win HCM, some won’t. Best advice is to use semantic HTML to keep things visible. +> You can use transparent outline to keep things visble like focus indicators and surface boundaries or use currentColor to maintain SVG fill colors in Win HCM. +> You can use a special media query combined with special CSS color keywords to give elements the user defined colors. => https://accessabilly.com/accessibility-issues-concerning-windows-high-contrast-mode/ Accessibility issues concerning Windows HCM diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 754ca4a..e267a8d 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -211,7 +211,7 @@ Understanding round-trips requires understanding your server's approach to conge Historically, TCP congestion control approaches typically set an initial window size to ten TCP packets and grew this value with each round-trip. Under most setups, this meant that the first round-trip could include 1460 bytes. The following round-trip could deliver under three kilobytes.[^4] -Nowadays, servers typically employ BBR-based congestion control. It allows for regular "spikes" in window size, but the initial window size is still small. Find more details in the slides from (PDF) by {{ +Nowadays, servers typically employ BBR-based congestion control. It allows for regular "spikes" in window size, but the initial window size is still small. Find more details in the slides from (application/pdf) by {{ HTTP/3 uses QUIC instead of TCP, which makes things a bit different; the important thing to remember is that _user agents should be aware of all blocking resources **before** finishing the earliest possible round-trip._ @@ -541,7 +541,7 @@ The xkcd comic included earlier in the page had th Image transcripts also help users relying on [machine-translation](#machine-translation), since translation tools rely on textual content (OCR is error-prone). These users won't read alt-text; have an alternative way to discover a transcript. Wherever you put the transcript, ensure it's semantically connected to the image. I linked a transcript in the figure caption. -I describe best practices for preparing pictures of text in [a dedicated section](#pictures-of-text). +I describe best practices for preparing pictures of text in [the "Pictures of text" section](#pictures-of-text). About custom colors ------------------- @@ -567,7 +567,23 @@ Even if you set custom colors, ensure that the page is compatible with color ove This page's [canonical location](https://seirdy.one/2020/11/23/website-best-practices.html) is an example application of Technique C25 (and the related [Technique G148](https://www.w3.org/WAI/WCAG22/Techniques/general/G148)). It only uses non-default colors when a user agent requests a dark color scheme (using the `prefers-color-scheme` CSS media query; see the next subsection) and for lightening borders. Any image with a solid background may match the page background; to ensure that their dimensions are clear, I surrounded them with borders. I also set a custom color for the borders and ensure that the image backgrounds don't match the border colors. I included borders to break up bottom sections, since these elements lack heading-based delineation. When overriding color schemes, the page layout remains clear. -Color overrides go well beyond simple foreground and background color changes. Windows' High Contrast Mode, for instance, makes [more advanced modifications](https://accessabilly.com/accessibility-issues-concerning-windows-high-contrast-mode/). +Color overrides go well beyond simple foreground and background color changes. Windows' High Contrast Mode, for instance, makes more advanced modifications to color palettes. + +
+
+
    +
  • Win HCM is a collection of user defined color themes that overwrite your definitions in CSS.
    • +
  • It’s not about design but readability.
    • +
  • Some stuff will disappear in Win HCM, some won’t. Best advice is to use semantic HTML to keep things visible.
    • +
  • You can use transparent outline to keep things visble like focus indicators and surface boundaries or use currentColor to maintain SVG fill colors in Win HCM.
    • +
  • You can use a special media query combined with special CSS color keywords to give elements the user defined colors.
    • +
+
+{{< quotecaption partOfType="WebSite" >}} +{{
In fact, the CSS Working Group is working on a specification for re-coloring websites in {{}}. The Chromium team's in-progress [auto dark mode](https://chromestatus.com/feature/5672533924773888) will use this specification to darken websites globally. Websites can opt out with the `color-scheme` property, but they really shouldn't have to: stylesheets should be robust enough to handle re-coloring. @@ -1327,7 +1343,7 @@ A special thanks goes out to GothAlice for the questions she answered in `#webde [^13]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnera­bilities. In Firefox, navigate to `about:config` and toggle some flags under javascript.options. -
+
Code snippet 11: Firefox prefs to turn off JIT compilation