Change markers: add New visual style and remove unnecessary "text sem…

…antics" (#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)
w3c · Nov 19, 2024 · c050bcc · c050bcc
1 parent 1b2d567
commit c050bcc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -33,11 +33,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;