Skip to content

Commit

Permalink
deploy: aa814af
Browse files Browse the repository at this point in the history
  • Loading branch information
@iadawn
iadawn committed Nov 27, 2024
1 parent 911756d commit ff0e42b
Show file tree
Hide file tree
Showing 41 changed files with 791 additions and 2,317 deletions.
8 changes: 0 additions & 8 deletions guidelines/acknowledgements/previous-notable-contributors.html
View file

This file was deleted.

75 changes: 37 additions & 38 deletions guidelines/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ <h2>Introduction</h2>
</ul>
</li>
<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>
<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>
<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>
</ul></p>

<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>
Expand Down Expand Up @@ -139,7 +139,7 @@ <h4>Image alternatives</h4>
<div class="body-wrapper">
<p class="guideline-text">Users have equivalent alternatives for images.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/"">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Image alternatives</a></p>
</aside>
</div>
Expand Down Expand Up @@ -172,7 +172,7 @@ <h5>Decorative image</h5>
<div class="body-wrapper">
<p class="provision-text"><a>Decorative image</a> is <a>programmatically</a> hidden.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/decorative-images/">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/decorative-image/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Decorative image methods</a></p>
</aside>
</div>
Expand All @@ -182,7 +182,7 @@ <h5>Equivalent text alternative</h5>
<div class="body-wrapper">
<p class="provision-text">Equivalent text alternative is available for <a>image</a> that conveys <a>content</a>.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/equivalent-text-alternative/">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/equivalent-text-alternative/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Content image methods</a></p>
</aside>
</div>
Expand All @@ -192,28 +192,28 @@ <h5>Detectable image</h5>
<div class="body-wrapper">
<p class="provision-text"><a>Image</a> is <a>programmatically determinable</a>.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/methods/detectable-image/">
<p><a href="https://w3c.github.io/wcag3/how-to/image-alternatives/detectable-image/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable image methods</a></p>
</aside>
</div>
</section>

<section class="provision" data-status="exploratory" data-provision-type="supplemental">
<h5>Image role</h5>
<p class="provision-text">The role and importance of the <a>image</a> is <a>programmatically indicated</a>.</p>
<p class="provision-text">The <a>role</a> and importance of the <a>image</a> is <a>programmatically indicated</a>.</p>
</section>
<section class="provision" data-status="exploratory" data-provision-type="supplemental">
<h5>Image type</h5>
<p class="provision-text">The type of <a>image</a> (photo, icon, etc.) is indicated.</p>
<p class="provision-text">The <a>image type</a> (photo, icon, etc.) is indicated.</p>
</section>
<section class="provision" data-status="exploratory" data-provision-type="supplemental">
<h5>Editable Alternatives</h5>
<h5>Editable alternatives</h5>
<p class="provision-text">Auto generated text descriptions are editable by <a>content</a> creator.</p>
<p class="ednote">Needs <a href="#additional_research">additional research</a></p>
</section>

<section class="provision" data-status="exploratory" data-provision-type="assertion">
<h5>Style Guide</h5>
<h5>Style guide</h5>
<p class="provision-text">Text alternatives follow an organizational style guide.</p>
</section>
</section>
Expand Down Expand Up @@ -343,11 +343,13 @@ <h5>Semantic text appearance</h5>

<section class="guideline" data-status="developing">
<h4>Clear meaning</h4>
<p class="guideline-text">Users can access explanations of or alternatives to ambiguous <a>text</a> <a>content</a>.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Clear Meaning</a></p>
</aside>
<div class="body-wrapper">
<p class="guideline-text">Users can access explanations of or alternatives to ambiguous <a>text</a> <a>content</a>.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> How to meet Clear Meaning</a></p>
</aside>
</div>
<details class="decision-tree">
<summary>Which foundational requirements apply?</summary>
<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>
Expand Down Expand Up @@ -380,20 +382,24 @@ <h4>Clear meaning</h4>

<section id="detectable-text" class="provision" data-provision-type="foundational">
<h5>Detectable text</h5>
<p class="provision-text">Text is programmatically determinable</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/methods/detectable-text">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable text methods</a></p>
</aside>
<div class="body-wrapper">
<p class="provision-text">Text is programmatically determinable</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/detectable-text/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Detectable text methods</a></p>
</aside>
</div>
</section>

<section id="unambiguous-text" class="provision" data-provision-type="foundational">
<h5>Unambiguous text</h5>
<p class="provision-text">Explain ambiguous text or provide an unambiguous alternative.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/methods/explain-ambiguous-text/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Unambiguous text methods</a></p>
</aside>
<div class="body-wrapper">
<p class="provision-text">Explain ambiguous text or provide an unambiguous alternative.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/clear-meaning/unambiguous-text/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Unambiguous text methods</a></p>
</aside>
</div>
</section>

</section>
Expand Down Expand Up @@ -472,7 +478,7 @@ <h5>Custom indicator</h5>
<div class="body-wrapper">
<p class="provision-text">A custom focus indicator is used with sufficient size, change of contrast, adjacent contrast, distinct style and adjacency.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/methods/custom-focus-indicator/">
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/custom-indicator/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> Custom indicator methods</a></p>
</aside>
</div>
Expand All @@ -482,7 +488,7 @@ <h5>User-agent default indicator</h5>
<div class="body-wrapper">
<p class="provision-text">Focusable item uses the user agent default indicator.</p>
<aside class="doclinks">
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/methods/default-focus-indicator/">
<p><a href="https://w3c.github.io/wcag3/how-to/focus-appearance/user-agent-default-indicator/">
<svg aria-hidden="true" class="i-info"><use xlink:href="img/icons.svg#i-info"></use></svg> User agent default indicator methods</a></p>
</aside>
</div>
Expand Down Expand Up @@ -1340,7 +1346,7 @@ <h2>Conformance</h2>
<p>There are two types of content in this document:</p>
<ul>
<li><strong>Normative:</strong> what you must do to meet the guidelines.</li>
<li><strong>Non-normative:</strong> advice to help you meet the guidelines. This is also called <a>informative</a>.</li>
<li><strong>Informative:</strong> advice to help you meet the guidelines. This is also called <a>non-normative</a>.</li>
</ul>
<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>
</details>
Expand All @@ -1355,7 +1361,7 @@ <h2>Conformance</h2>

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

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

<section id="accessibility-supported">
<h3>Only accessibility-supported ways of using technologies</h3>
Expand Down Expand Up @@ -1480,7 +1486,7 @@ <h2>Glossary</h2>
<p>To be defined.</p>
</div>
</dd>
<dt><dfn>Image role</dfn></dt>
<dt><dfn data-lt="role">Image role</dfn></dt>
<dd>
<div class="ednote">
<p>To be defined.</p>
Expand All @@ -1494,7 +1500,7 @@ <h2>Glossary</h2>
</dd>
<dt data-status="developing"><dfn data-lt="Non-normative|Informative">Informative</dfn></dt>
<dd>
<p><a>Content</a> provided for information purposes and not required for <a>conformance</a>.</p>
<p><a>Content</a> provided for information purposes and not required for <a>conformance</a>. Also refered to as non-normative.</p>
</dd>
<dt><dfn>Interactive component</dfn></dt>
<dd>
Expand Down Expand Up @@ -1591,12 +1597,6 @@ <h2>Glossary</h2>
<dd>
<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>
</dd>
<dt><dfn>Web technologies</dfn></dt>
<dd>
<div class="ednote">
<p>To be defined.</p>
</div>
</dd>
</dl>
</section>
<section class="appendix">
Expand Down Expand Up @@ -1624,7 +1624,7 @@ <h2>Change log</h2>
<li>2024-03-15: Updated placeholder guidelines with exploratory guidelines.
</li>
<li>2024-??-??: Updated placeholder guidelines; added 3 developing guidelines and accessibility supported; and
moved explanatory content to the <a href="https://www.w3.org/TR/wcag-3.0-explainer/"">Explainer for WCAG 3.0</a>
moved explanatory content to the <a href="https://www.w3.org/TR/wcag-3.0-explainer/">Explainer for WCAG 3.0</a>
</li>
</ul>

Expand All @@ -1633,7 +1633,6 @@ <h2>Change log</h2>
<h2>Acknowledgements</h2>
<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>
<div data-include="acknowledgements/current-contributors.html" data-include-replace="true"></div>
<div data-include="acknowledgements/previous-notable-contributors.html" data-include-replace="true"></div>
<div data-include="acknowledgements/previous-contributors.html" data-include-replace="true"></div>
<div data-include="acknowledgements/research-partners.html" data-include-replace="true"></div>
<div data-include="acknowledgements/funders.html" data-include-replace="true"></div>
Expand Down
18 changes: 18 additions & 0 deletions guidelines/respec-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,24 @@ var respecConfig = {
w3cid: 90883
}],

formerEditors: [{
name: "Michael Cooper, Staff Contact, 2016-2023",
company: "W3C",
companyURI: "https://www.w3.org/",
w3cid: 34017
}, {
name: "Shawn Lauriat, Editor, 2016-2023",
company: "Google, Inc.",
companyURI: "https://www.google.com/",
w3cid: 90646
}, {
name: "Wilco Fiers, Project Manager, 2021-2023",
company: "Deque Systems, Inc.",
companyURI: "https://www.deque.com/",
w3cid: 43334
}],



// authors, add as many as you like.
// This is optional, uncomment if you have authors as well as editors.
Expand Down
5 changes: 3 additions & 2 deletions how-to/404/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<header class="minimal-header" id="site-header">
<div class="minimal-header-name">
<a href="/wcag3/how-to/">WCAG 3 Outcomes</a>
<a href="/wcag3/how-to/">How to meet WCAG 3</a>
</div>
<div class="minimal-header-logo">
<a href="http://w3.org/" aria-label="W3C">
Expand Down Expand Up @@ -47,7 +47,8 @@

<nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en">
<ul>
<li><a href="/wcag3/how-to/">All WCAG 3 Outcomes</a></li>
<li><a href="https://w3c.github.io/wcag3/guidelines/">WCAG 3</a></li>
<li><a href="/wcag3/how-to/">How to meet WCAG 3</a></li>
<li><a href="/wcag3/how-to/404/" aria-current="page">Page Not Found</a></li>
</ul>
</nav>
Expand Down
33 changes: 29 additions & 4 deletions how-to/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,6 @@ h1 span {
margin-bottom: 0.25em;
}

main h2:first-of-type {

}

.normative {
border: solid 1px var(--cloudy-subtle);
margin-top: 1em;
Expand All @@ -140,4 +136,33 @@ main h2:first-of-type {
.note::before {
content: "Note: ";
font-weight: bold;
}

is:{.requirement-level, .technology} span {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.requirement-level, .technology {
display: inline-block;
background: #6bc8fe;
color: #111111;
font-weight: 700;
font-size: 11px;
font-size: .6125rem;
line-height: 1.4;
vertical-align: middle;
margin-left: 1em;
padding: 4px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 1px;
}

.sidenav--list a+ul {
display: block;
}
46 changes: 28 additions & 18 deletions ...eaning/methods/detectable-text/index.html → .../clear-meaning/detectable-text/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>WCAG 3.0 Text is programmatically determinable Method - Introduction</title>
<title>WCAG 3.0 Clear Meaning Outcome - </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css">
<link rel="stylesheet" href="/wcag3/how-to/assets/main.css">
Expand All @@ -17,7 +17,7 @@

<header class="minimal-header" id="site-header">
<div class="minimal-header-name">
<a href="/wcag3/how-to/">WCAG 3 Outcomes</a>
<a href="/wcag3/how-to/">How to meet WCAG 3</a>
</div>
<div class="minimal-header-logo">
<a href="http://w3.org/" aria-label="W3C">
Expand Down Expand Up @@ -47,33 +47,43 @@

<nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en">
<ul>
<li><a href="/wcag3/how-to/">All WCAG 3 Outcomes</a></li>
<li><a href="https://w3c.github.io/wcag3/guidelines/">WCAG 3</a></li>
<li><a href="/wcag3/how-to/">How to meet WCAG 3</a></li>
<li><a href="/wcag3/how-to/clear-meaning/">Clear Meaning</a></li>
<li><a href="/wcag3/how-to/clear-meaning/methods/">Methods</a></li>
<li><a href="/wcag3/how-to/clear-meaning/methods/detectable-text/" aria-current="page">Detectable Text</a></li>
<li><a href="/wcag3/how-to/clear-meaning/detectable-text/" aria-current="page">Detectable Text</a></li>
</ul>
</nav>

<div class="default-grid with-gap leftcol">
<div class="sidenav">

<div class="sidenav">
<nav class="sn-contents" aria-label="Secondary">
<ul class="sidenav--list">
<li>
<a href="/wcag3/how-to/clear-meaning/">Clear Meaning</a></li><li>
<a href="/wcag3/how-to/clear-meaning/methods/">Methods</a></li>
</ul>
<a href="/wcag3/how-to/clear-meaning/">Clear Meaning</a>

<ul>

<li><a href="/wcag3/how-to/clear-meaning/detectable-text">Detectable text</a></li>

<li><a href="/wcag3/how-to/clear-meaning/unambiguous-text">Unambiguous text</a></li>

</ul>

</li></ul>
</nav>
</div>
<main id="main" tabindex="-1">
<h1>Text is programmatically determinable</h1>
<p></p>
<dl class="method-card">
<div>
<dt>Level:</dt>
<dd>Foundational</dd>
</div>
</dl>
<p class="ednote">This guideline content needs to be written.</p>
<h1>Detectable text</h1>

<p class="requirement-level"><span>Level: </span>Foundational</p>

<div class="normative">
Text is programmatically determinable.
</div>

<h2>Methods</h2>
<p class="ednote">Methods need to be written.</p>
</main>
</div>
<footer class="site-footer grid-4q" aria-label="Site">
Expand Down
Loading

0 comments on commit ff0e42b

Please sign in to comment.