Skip to content

Commit aa814af

Browse files
iadawniadawn
authored
Merge pull request #150 from w3c/editorial-updates-nov-24
editorial fixes
2 parents 6d678f0 + 6b5b03e commit aa814af

File tree

73 files changed

+245
-677
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+245
-677
lines changed

‎guidelines/acknowledgements/previous-notable-contributors.html

-8
This file was deleted.

‎guidelines/index.html

+37-38
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ <h2>Introduction</h2>
7777
</ul>
7878
</li>
7979
<li>The organization of the decision trees in <a href="#clear-meaning">Clear meaning</a> and <a href="#keyboard-focus-appearance">Keyboard focus appearance</a> differ slightly. Does one seem clearer than the other?</li>
80-
<li>The conformance section explains the approach the Accessibilty Guidelines Working Group is considering for WCAG 3.0. While many details still need to be worked out, do you have constructive comments about the proposed approach for WCAG 3.0? </li>
80+
<li>The conformance section explains the approach the Accessibility Guidelines Working Group is considering for WCAG 3.0. While many details still need to be worked out, do you have constructive comments about the proposed approach for WCAG 3.0? </li>
8181
</ul></p>
8282

8383
<p>To provide feedback, please file a <a href="https://github.com/w3c/wcag3/issues">GitHub issue</a> or send email to <a href="mailto:[email protected]?subject=WCAG%203.0%20public%20comment">[email protected]</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>). </p>
@@ -139,7 +139,7 @@ <h4>Image alternatives</h4>
139139
<div class="body-wrapper">
140140
<p class="guideline-text">Users have equivalent alternatives for images.</p>
141141
<aside class="doclinks">
142-
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/"">
142+
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/">
143143
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Image alternatives</a></p>
144144
</aside>
145145
</div>
@@ -172,7 +172,7 @@ <h5>Decorative image</h5>
172172
<div class="body-wrapper">
173173
<p class="provision-text"><a>Decorative image</a> is <a>programmatically</a> hidden.</p>
174174
<aside class="doclinks">
175-
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/decorative-images/">
175+
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/decorative-image/">
176176
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Decorative image methods</a></p>
177177
</aside>
178178
</div>
@@ -182,7 +182,7 @@ <h5>Equivalent text alternative</h5>
182182
<div class="body-wrapper">
183183
<p class="provision-text">Equivalent text alternative is available for <a>image</a> that conveys <a>content</a>.</p>
184184
<aside class="doclinks">
185-
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/equivalent-text-alternative/">
185+
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/equivalent-text-alternative/">
186186
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Content image methods</a></p>
187187
</aside>
188188
</div>
@@ -192,28 +192,28 @@ <h5>Detectable image</h5>
192192
<div class="body-wrapper">
193193
<p class="provision-text"><a>Image</a> is <a>programmatically determinable</a>.</p>
194194
<aside class="doclinks">
195-
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/detectable-image/">
195+
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/detectable-image/">
196196
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable image methods</a></p>
197197
</aside>
198198
</div>
199199
</section>
200200

201201
<section class="provision" data-status="exploratory" data-provision-type="supplemental">
202202
<h5>Image role</h5>
203-
<p class="provision-text">The role and importance of the <a>image</a> is <a>programmatically indicated</a>.</p>
203+
<p class="provision-text">The <a>role</a> and importance of the <a>image</a> is <a>programmatically indicated</a>.</p>
204204
</section>
205205
<section class="provision" data-status="exploratory" data-provision-type="supplemental">
206206
<h5>Image type</h5>
207-
<p class="provision-text">The type of <a>image</a> (photo, icon, etc.) is indicated.</p>
207+
<p class="provision-text">The <a>image type</a> (photo, icon, etc.) is indicated.</p>
208208
</section>
209209
<section class="provision" data-status="exploratory" data-provision-type="supplemental">
210-
<h5>Editable Alternatives</h5>
210+
<h5>Editable alternatives</h5>
211211
<p class="provision-text">Auto generated text descriptions are editable by <a>content</a> creator.</p>
212212
<p class="ednote">Needs <a href="#additional_research">additional research</a></p>
213213
</section>
214214

215215
<section class="provision" data-status="exploratory" data-provision-type="assertion">
216-
<h5>Style Guide</h5>
216+
<h5>Style guide</h5>
217217
<p class="provision-text">Text alternatives follow an organizational style guide.</p>
218218
</section>
219219
</section>
@@ -343,11 +343,13 @@ <h5>Semantic text appearance</h5>
343343

344344
<section class="guideline" data-status="developing">
345345
<h4>Clear meaning</h4>
346-
<p class="guideline-text">Users can access explanations of or alternatives to ambiguous <a>text</a> <a>content</a>.</p>
347-
<aside class="doclinks">
348-
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/">
349-
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Clear Meaning</a></p>
350-
</aside>
346+
<div class="body-wrapper">
347+
<p class="guideline-text">Users can access explanations of or alternatives to ambiguous <a>text</a> <a>content</a>.</p>
348+
<aside class="doclinks">
349+
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/">
350+
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Clear Meaning</a></p>
351+
</aside>
352+
</div>
351353
<details class="decision-tree">
352354
<summary>Which foundational requirements apply?</summary>
353355
<p>For each item of ambiguous text, such as <a>non-literal text</a>, abbreviations and acronyms, <a>ambiguous numbers</a>, or text missing letters or diacritics:</p>
@@ -380,20 +382,24 @@ <h4>Clear meaning</h4>
380382

381383
<section id="detectable-text" class="provision" data-provision-type="foundational">
382384
<h5>Detectable text</h5>
383-
<p class="provision-text">Text is programmatically determinable</p>
384-
<aside class="doclinks">
385-
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/methods/detectable-text">
386-
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable text methods</a></p>
387-
</aside>
385+
<div class="body-wrapper">
386+
<p class="provision-text">Text is programmatically determinable</p>
387+
<aside class="doclinks">
388+
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/detectable-text/">
389+
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable text methods</a></p>
390+
</aside>
391+
</div>
388392
</section>
389393

390394
<section id="unambiguous-text" class="provision" data-provision-type="foundational">
391395
<h5>Unambiguous text</h5>
392-
<p class="provision-text">Explain ambiguous text or provide an unambiguous alternative.</p>
393-
<aside class="doclinks">
394-
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/methods/explain-ambiguous-text/">
395-
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Unambiguous text methods</a></p>
396-
</aside>
396+
<div class="body-wrapper">
397+
<p class="provision-text">Explain ambiguous text or provide an unambiguous alternative.</p>
398+
<aside class="doclinks">
399+
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/unambiguous-text/">
400+
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Unambiguous text methods</a></p>
401+
</aside>
402+
</div>
397403
</section>
398404

399405
</section>
@@ -472,7 +478,7 @@ <h5>Custom indicator</h5>
472478
<div class="body-wrapper">
473479
<p class="provision-text">A custom focus indicator is used with sufficient size, change of contrast, adjacent contrast, distinct style and adjacency.</p>
474480
<aside class="doclinks">
475-
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/methods/custom-focus-indicator/">
481+
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/custom-indicator/">
476482
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Custom indicator methods</a></p>
477483
</aside>
478484
</div>
@@ -482,7 +488,7 @@ <h5>User-agent default indicator</h5>
482488
<div class="body-wrapper">
483489
<p class="provision-text">Focusable item uses the user agent default indicator.</p>
484490
<aside class="doclinks">
485-
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/methods/default-focus-indicator/">
491+
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/user-agent-default-indicator/">
486492
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> User agent default indicator methods</a></p>
487493
</aside>
488494
</div>
@@ -1340,7 +1346,7 @@ <h2>Conformance</h2>
13401346
<p>There are two types of content in this document:</p>
13411347
<ul>
13421348
<li><strong>Normative:</strong> what you must do to meet the guidelines.</li>
1343-
<li><strong>Non-normative:</strong> advice to help you meet the guidelines. This is also called <a>informative</a>.</li>
1349+
<li><strong>Informative:</strong> advice to help you meet the guidelines. This is also called <a>non-normative</a>.</li>
13441350
</ul>
13451351
<p>We are experimenting with different conformance approaches for WCAG 3.0. Once we have developed enough guidelines, we will test how well each works.</p>
13461352
</details>
@@ -1355,7 +1361,7 @@ <h2>Conformance</h2>
13551361

13561362
<p>Other conformance concepts AG continues to explore the following include conformance levels, issue severity, adjectival ratings and pre-assessment checks.</p>
13571363

1358-
See [[[?WCAG3-explainer]]] for more information.
1364+
See <a href="https://www.w3.org/TR/wcag-3.0-explainer/">Explainer for W3C Accessibility Guidelines (WCAG) 3.0</a> for more information.
13591365

13601366
<section id="accessibility-supported">
13611367
<h3>Only accessibility-supported ways of using technologies</h3>
@@ -1480,7 +1486,7 @@ <h2>Glossary</h2>
14801486
<p>To be defined.</p>
14811487
</div>
14821488
</dd>
1483-
<dt><dfn>Image role</dfn></dt>
1489+
<dt><dfn data-lt="role">Image role</dfn></dt>
14841490
<dd>
14851491
<div class="ednote">
14861492
<p>To be defined.</p>
@@ -1494,7 +1500,7 @@ <h2>Glossary</h2>
14941500
</dd>
14951501
<dt data-status="developing"><dfn data-lt="Non-normative|Informative">Informative</dfn></dt>
14961502
<dd>
1497-
<p><a>Content</a> provided for information purposes and not required for <a>conformance</a>.</p>
1503+
<p><a>Content</a> provided for information purposes and not required for <a>conformance</a>. Also refered to as non-normative.</p>
14981504
</dd>
14991505
<dt><dfn>Interactive component</dfn></dt>
15001506
<dd>
@@ -1591,12 +1597,6 @@ <h2>Glossary</h2>
15911597
<dd>
15921598
<p>Testing scope that includes all <a>content</a> visually and <a>programmatically</a> available without a significant change. Conceptually, views correspond to the definition of a web page as used in WCAG 2, but are not restricted to content meeting that definition. For example, a view could be considered a “screen” in a mobile app or a layer of web content, such as a modal dialog.</p>
15931599
</dd>
1594-
<dt><dfn>Web technologies</dfn></dt>
1595-
<dd>
1596-
<div class="ednote">
1597-
<p>To be defined.</p>
1598-
</div>
1599-
</dd>
16001600
</dl>
16011601
</section>
16021602
<section class="appendix">
@@ -1624,7 +1624,7 @@ <h2>Change log</h2>
16241624
<li>2024-03-15: Updated placeholder guidelines with exploratory guidelines.
16251625
</li>
16261626
<li>2024-??-??: Updated placeholder guidelines; added 3 developing guidelines and accessibility supported; and
1627-
moved explanatory content to the <a href="https://www.w3.org/TR/wcag-3.0-explainer/"">Explainer for WCAG 3.0</a>
1627+
moved explanatory content to the <a href="https://www.w3.org/TR/wcag-3.0-explainer/">Explainer for WCAG 3.0</a>
16281628
</li>
16291629
</ul>
16301630

@@ -1633,7 +1633,6 @@ <h2>Change log</h2>
16331633
<h2>Acknowledgements</h2>
16341634
<p>Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the <a href="https://www.w3.org/groups/wg/ag/">Working Group home page</a>.</p>
16351635
<div data-include="acknowledgements/current-contributors.html" data-include-replace="true"></div>
1636-
<div data-include="acknowledgements/previous-notable-contributors.html" data-include-replace="true"></div>
16371636
<div data-include="acknowledgements/previous-contributors.html" data-include-replace="true"></div>
16381637
<div data-include="acknowledgements/research-partners.html" data-include-replace="true"></div>
16391638
<div data-include="acknowledgements/funders.html" data-include-replace="true"></div>

‎guidelines/respec-config.js

+18
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,24 @@ var respecConfig = {
6666
w3cid: 90883
6767
}],
6868

69+
formerEditors: [{
70+
name: "Michael Cooper, Staff Contact, 2016-2023",
71+
company: "W3C",
72+
companyURI: "https://www.w3.org/",
73+
w3cid: 34017
74+
}, {
75+
name: "Shawn Lauriat, Editor, 2016-2023",
76+
company: "Google, Inc.",
77+
companyURI: "https://www.google.com/",
78+
w3cid: 90646
79+
}, {
80+
name: "Wilco Fiers, Project Manager, 2021-2023",
81+
company: "Deque Systems, Inc.",
82+
companyURI: "https://www.deque.com/",
83+
w3cid: 43334
84+
}],
85+
86+
6987

7088
// authors, add as many as you like.
7189
// This is optional, uncomment if you have authors as well as editors.

‎how-to/.eleventy.js

+3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ module.exports = function (eleventyConfig) {
2828
const basePath = dirname(page.inputPath).split("/").slice(1, 3).join("/");
2929
return {
3030
...outcome,
31+
hasFoundational: await fileExists(basePath + "/foundational/"),
32+
hasSupplemental: await fileExists(basePath + "/supplemental/"),
33+
hasAssertions: await fileExists(basePath + "/assertions/"),
3134
hasMethods: await fileExists(basePath + "/methods.md"),
3235
hasResearch: await fileExists(basePath + "/research.md"),
3336
hasUserNeeds: await fileExists(basePath + "/user-needs.md"),

‎how-to/_includes/layout/header.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<header class="minimal-header" id="site-header">
99
<div class="minimal-header-name">
10-
<a href="/">WCAG 3 Outcomes</a>
10+
<a href="/">How to meet WCAG 3</a>
1111
</div>
1212
<div class="minimal-header-logo">
1313
<a href="http://w3.org/" aria-label="W3C">
@@ -39,6 +39,7 @@
3939

4040
<nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en">
4141
<ul>
42+
<li><a href="https://w3c.github.io/wcag3/guidelines/">WCAG 3</a></li>
4243
{{ collections.all | breadcrumbs }}
4344
</ul>
4445
</nav>

‎how-to/_includes/layout/outcome-nav.html

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
12
<div class="sidenav">
23
<nav class="sn-contents" aria-label="Secondary">
34
{%- assign base = '/' | append: outcome.slug %}
45
<ul class="sidenav--list">
5-
<li>{% include 'link.html', href: '/', base: base, text: outcome.title %}</li>
6-
{%- if outcome.hasMethods -%}
7-
<li>{% include 'link.html', href: '/methods/', base: base, text: 'Methods' %}</li>
8-
{% endif -%}
6+
<li>{% include 'link.html', href: '/', base: base, text: outcome.title %}
7+
{% if outcome.requirements %}
8+
<ul>
9+
{% for navItem in outcome.requirements %}
10+
<li><a href="{{ base }}/{{ navItem | slugify}}">{{ navItem }}</a></li>
11+
{% endfor %}
12+
</ul>
13+
{% endif %}
14+
</li>
915
{%- if outcome.hasUserNeeds -%}
1016
<li>{% include 'link.html', href: '/user-needs/', base: base, text: 'User Needs' %}</li>
1117
{% endif -%}

‎how-to/_includes/requirement.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
{%- include "layout/page-title.html" %}
6+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
7+
<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css">
8+
<link rel="stylesheet" href="/assets/main.css">
9+
</head>
10+
<body dir="ltr">
11+
{% include "layout/header.html" %}
12+
<div class="default-grid with-gap leftcol">
13+
{% include "layout/outcome-nav.html" %}
14+
<main id="main" tabindex="-1">
15+
<h1>{% if title %}{{ title }}{% else %}{{ page.fileSlug | replace: '-', ' ' | capitalize }}{% endif %}</h1>
16+
17+
<p class="requirement-level"><span>Level: </span>{{ level | capitalize }}</p>
18+
19+
<div class="normative">
20+
{{ text }}
21+
</div>
22+
23+
{{ content }}
24+
</main>
25+
</div>
26+
{% include "layout/site-footer.html" %}
27+
</body>
28+
</html>

‎how-to/assets/main.css

+29-4
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,6 @@ h1 span {
111111
margin-bottom: 0.25em;
112112
}
113113

114-
main h2:first-of-type {
115-
116-
}
117-
118114
.normative {
119115
border: solid 1px var(--cloudy-subtle);
120116
margin-top: 1em;
@@ -140,4 +136,33 @@ main h2:first-of-type {
140136
.note::before {
141137
content: "Note: ";
142138
font-weight: bold;
139+
}
140+
141+
is:{.requirement-level, .technology} span {
142+
clip: rect(0 0 0 0);
143+
clip-path: inset(50%);
144+
height: 1px;
145+
overflow: hidden;
146+
position: absolute;
147+
white-space: nowrap;
148+
width: 1px;
149+
}
150+
.requirement-level, .technology {
151+
display: inline-block;
152+
background: #6bc8fe;
153+
color: #111111;
154+
font-weight: 700;
155+
font-size: 11px;
156+
font-size: .6125rem;
157+
line-height: 1.4;
158+
vertical-align: middle;
159+
margin-left: 1em;
160+
padding: 4px 8px;
161+
border-radius: 3px;
162+
text-transform: uppercase;
163+
letter-spacing: 1px;
164+
}
165+
166+
.sidenav--list a+ul {
167+
display: block;
143168
}

‎how-to/build/get-outcome.js

+1-19
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,8 @@ const fs = require('fs')
22
const path = require('path')
33

44
module.exports = function getOutcome(dirName) {
5-
const methodDir = path.resolve(dirName, 'methods')
6-
7-
const methods = fs.readdirSync(methodDir)
8-
.filter(file => fs.statSync(path.join(methodDir, file)).isDirectory())
9-
.map(subDir => {
10-
if (subDir.startsWith('_')) {
11-
return null
12-
}
13-
try {
14-
const fileStr = fs.readFileSync(path.join(methodDir, subDir, subDir + '.json'), 'utf8')
15-
const json = JSON.parse(fileStr)
16-
return json.method;
17-
} catch { /* do nothing */ }
18-
return null
19-
})
20-
.filter(method => method !== null)
21-
.sort((a, b) => a.index - b.index)
22-
235
const outcome = require(path.resolve(dirName, './outcome.json'))
246
outcome.slug = dirName.split(path.sep).pop();
257

26-
return { methods, outcome }
8+
return { outcome }
279
}

0 commit comments

Comments
 (0)