From 299e56d3afbbe6ed2021b52ced9bdee04672b543 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 19 Nov 2024 19:58:45 +0000 Subject: [PATCH] Change markers: add New visual style and remove unnecessary "text semantics" (#1481) In WCAG 2.1 there's one change marker for the third note in "Full pages" https://www.w3.org/TR/WCAG21/#cc2 - this currently looks odd/just like an awkward start of the sentence. > ![WCAG 2.1 third note in 'Full pages', with 'New' at the start of the paragraph looking like it's just part of the sentence](https://user-images.githubusercontent.com/895831/96334873-e2599980-106b-11eb-9d28-775789405927.png) In WCAG 2.2, there's a few more change markers, and these use JavaScript to add "text semantics", wrapping them in square brackets. but these don't - to my mind at least - add anything useful ... they're not read out by default by AT unless you go character by character, and as they just live in their own little paragraph, they don't really need to delimit start/end of anything and are just as understandable without the square brackets. > ![one of WCAG 2.2's '[New]' change markers](https://user-images.githubusercontent.com/895831/96336427-9ca2ce00-1077-11eb-8ca2-f3db0f24bf22.png) **This PR adds a more visually explicit style, and removes the square brackets** ![WCAG 2.1 third note in 'Full pages', with 'New' at the start of the paragraph, now styled as bold white text on a red box with slightly rounded corners, like a tag/badge](https://user-images.githubusercontent.com/895831/96336449-c78d2200-1077-11eb-8b8b-47c50ac601a5.png) ![one of WCAG 2.2's 'New' change markers, styled as bold white text on a red box with slightly rounded corners, and without the square brackets around the word](https://user-images.githubusercontent.com/895831/96336471-fefbce80-1077-11eb-8683-00639fc6e18c.png) (cherry picked from commit c050bcc3a0c8db4adda8f89887dd2057a0213191) --- guidelines/guidelines.css | 8 +++++++- script/wcag.js | 5 ----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/guidelines/guidelines.css b/guidelines/guidelines.css index ef3be40bf0..48312e0a1a 100644 --- a/guidelines/guidelines.css +++ b/guidelines/guidelines.css @@ -3,7 +3,13 @@ } .change { - display:inline; + display: inline; + color: #fff; + background: #B50000; + border-radius: 0.25em; + padding: 0.25em 0.4em; + margin: 0 0.25em 0 0; + font-weight: bold; } .new { diff --git a/script/wcag.js b/script/wcag.js index a498d3a416..77d142229f 100644 --- a/script/wcag.js +++ b/script/wcag.js @@ -32,11 +32,6 @@ function linkUnderstanding() { } function addTextSemantics() { - // put brackets around the change marker - document.querySelectorAll('p.change').forEach(function(node){ - var change = node.textContent; - node.textContent = "[" + change + "]"; - }) // put level before and parentheses around the conformance level marker document.querySelectorAll('p.conformance-level').forEach(function(node){ var level = node.textContent;