Skip to content

Pronunciation js #636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Pronunciation js #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
db40947
Create at-can-detect-natural-language-changes.html
jspellman Jun 2, 2022
94f1fb8
Created new files from template
jspellman Jun 7, 2022
59f8e15
fix folder name
jspellman Jun 7, 2022
56e055b
backgrouind tab
jspellman Jun 7, 2022
e5257f8
update introduction page
fstrr Jun 7, 2022
2e6cf32
add closing dd
fstrr Jun 7, 2022
0da4410
add closing p tag.
fstrr Jun 7, 2022
bec05b6
initial commit of html lang att method tests
fstrr Jun 7, 2022
e405bb5
glossary updates
jspellman Jun 7, 2022
66260ca
Merge branch 'Pronunciation-js' of https://github.com/w3c/silver into…
jspellman Jun 7, 2022
d93dbe8
rename outcome file for renamed title
Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions methods/html-lang-attribute/background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Method - Background</title>
</head>
<body>
<header>
<h1>Background</h1>
</header>
<main>
<section id="w3c">
<h2>W3C Resources</h2>
<ul>
<li><a href="https://www.w3.org/TR/i18n-html-tech-lang/">Internationalization Best Practices: Specifying Language in XHTML & HTML Content</a></li>
<li><a href="https://w3c.github.io/pronunciation/explainer/">Explainer: Improving Spoken Presentation on the Web</a></li>
<li><a href="https://act-rules.github.io/rules/b5c3f8">HTML page has lang attribute</a> - WCAG2 ACT Rule</li>
<li><a href="https://act-rules.github.io/rules/off6ek">HTML element language subtag matches language</a> - WCAG2 ACT Rule</li>
<li><a href="https://act-rules.github.io/rules/de46e4">Element with lang attribute has valid language tag</a> - WCAG2 ACT Rule</li>
</ul>
</section>
<section id="external">
<h2>Non-W3C Resources</h2>
<ul>
<li><a href="https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry">Language codes</a> - IANA assignments language subtag registry</li>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes">The lang and xml:lang attributes</a></li>
<li><a href="https://www.rfc-editor.org/rfc/rfc5646.html">RFC 5646: Tags for Identifying Languages</a></li>
</ul>
</section>
<section id="accsupport">
<h2>Accessibility Support</h2>
<p>There are differences in how assistive technologies handle unknown and invalid language tags. Some will default to the language of the page, whereas others will default to the closest ancestor with a valid lang attribute. Languages with no known pronunciation such as Latin are exempt from this method and outcome. A page written in Haryanvi can not correctly be pronounced by major screen readers. Haryanvi is not considered an accessibility supported language. </p>

<p>Since most assistive technologies will consistently use lang over xml:lang when both are used, violation of this method may not necessarily be a violation of the outcome. Only when there are inconsistencies between assistive technologies as to which attribute is used to determine the language does this lead to a violation of the <a href="#">Changes to Natural Language</a> outcome. </p>
</section>
<section id="assumptions">
<h2>Assumptions</h2>
<ul>
<li>The language of the page can be set by other methods than the lang attribute, for example using HTTP headers or the meta element. These methods are not supported by all assistive technologies. This method assumes that these other methods are insufficient to satisfy the outcome. </li>
</ul>
</section>
</main>
</body>
</html>
49 changes: 49 additions & 0 deletions methods/html-lang-attribute/examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Method - Examples</title>
</head>
<body>
<header>
<h1>Examples</h1>
</header>
<main>
<ul>
<li>{list of examples, unless using sub-sections, then delete this list}</li>
</ul>
<section id="passed">
<h2>Passed</h2>
<section class="example">
<h3>{Example Name}</h3>
{Use a copy of this section for each example if not using a bullet list of examples}
<p>{explanation}</p>
<pre>
&lt;
</pre>
</section>
</section>
<section id="failed">
<h2>Failed</h2>
<section class="example">
<h3>{Example Name}</h3>
{Use a copy of this section for each example if not using a bullet list of examples}
<p>{explanation}</p>
<pre>
&lt;
</pre>
</section>
</section>
<section id="inapplicable">
<h2>Inapplicable</h2>
<section class="example">
<h3>{Example Name}</h3>
{Use a copy of this section for each example if not using a bullet list of examples}
<p>{explanation}</p>
<pre>
&lt;
</pre>
</section>
</section>
</main>
</body>
</html>
105 changes: 105 additions & 0 deletions methods/html-lang-attribute/glossary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Method - Glossary</title>
</head>
<body>
<header>
<h1>Glossary</h1>
</header>
<main>
<p>This section does not use plain language for non-technical users. The technical descriptions are precise language primarily for test tool developers. </p>
<section id="ascii-whitespace-def">
<h2>ASCII Whitespace</h2>
<p>ASCII whitespace is U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE</p>
</section>
<section id="assistive-technology-def">
<h2>Assistive Technology</h2>
<p>Hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents.</p>
</section>
<section id="attribute-value-def">
<h2>Attribute Value</h2>
<p>The attribute value of a content attribute set on an HTML element is the value that the attribute gets after being parsed and computed according to specifications. It may differ from the value that is actually written in the HTML code due to trimming whitespace or non-digits characters, default values, or case-insensitivity. </p>
<p>Some notable case of attribute value, among others:</p>
<ul>
<li>For enumerated attributes, the attribute value is either the state of the attribute, or the keyword that maps to it; even for the default states. Thus <input type="image" /> has an attribute value of either Image Button (the state) or image (the keyword mapping to it), both formulations having the same meaning; similarly, "an input element with a type attribute value of Text" can be either <input type="text" />, <input /> (missing value default), or <input type="invalid" /> (invalid value default).</li>
<li>For boolean attributes, the attribute value is true when the attribute is present and false otherwise. Thus <button disabled>, <button disabled="disabled"> and <button disabled=""> all have a disabled attribute value of true.</li>
<li>For attributes whose value is used in a case-insensitive context, the attribute value is the lowercase version of the value written in the HTML code.</li>
<li>For attributes that accept numbers, the attribute value is the result of parsing the value written in the HTML code according to the rules for parsing this kind of number.</li>
<li>For attributes that accept sets of tokens, whether space separated or comma separated, the attribute value is the set of tokens obtained after parsing the set and, depending on the case, converting its items to lowercase (if the set is used in a case-insensitive context).</li>
<li>For aria-* attributes, the attribute value is computed as indicated in the WAI-ARIA specification and the HTML Accessibility API Mappings.</li>
</ul>
<p>This list is not exhaustive, and only serves as an illustration for some of the most common cases.</p>
<p>The attribute value of an IDL attribute is the value returned on getting it. Note that when an IDL attribute reflects a content attribute, they have the same attribute value.</p>
</section>
<section id="block-of-text-def">
<h2>Block of Text</h2>
<p>Any <a href="#natural-language-def">natural language</a> text, including alternative text, that starts on a new line and ends with a hard line break is a block of text. Each of the following are examples of a Block of Text: a paragraph, each item in a multi-line list, lines in a block of code, each cell in a table.</p>
<p>Any <a href="#natural-language-def">natural language</a> text, including alternative text, that isn’t part of a larger sentence. A block of text starts on a new line and ends with the line break. Examples include paragraphs, large quotations, lists, buttons, table cells. Quotations inside a paragraph or links inside sentences are not blocks of text. A paragraph broken by a line break (<br>) would be two blocks of text. A poem would be a block of text for every line. A definition list could be on one line on a wide screen could be one block of text and one the narrow screen it would be two blocks of text. </p>
</section>
<section id="content-type-def">
<h2>Content Type</h2>
<p>Each document has an associated encoding (an encoding), content type (a string), URL (a URL), origin (an origin), type ("xml" or "html"), and mode ("no-quirks", "quirks", or "limited-quirks"). [ENCODING] [URL] [HTML]</p>
<p>Unless stated otherwise, a document’s encoding is the utf-8 encoding, content type is "application/xml", document URL is "about:blank", document origin is an opaque origin, type is "xml", and its document mode is "no-quirks". </p>
<p>A document is said to be an XML document if its document type is "xml"; otherwise an HTML document. Whether a document is an HTML document or an XML document affects the behavior of certain APIs. </p>
<p>A document is said to be in no-quirks mode if its mode is "no-quirks", quirks mode if its document mode is "quirks", and limited-quirks mode if its document mode is "limited-quirks". </p>
</section>
<section id="default-page-language-def">
<h2>Default Page Language</h2>
<p>The default language of a web page is the most common language of its top-level browsing context document, if it is unique. If this document has either no or several most common languages, then it has no default language.</p>
</section>
<section id="document-element-def">
<h2>Document Element</h2>
<p>The <a href="https://dom.spec.whatwg.org/#concept-document">document</a> <a href="https://dom.spec.whatwg.org/#concept-element">element</a> of a document is the element whose <a href="https://dom.spec.whatwg.org/#concept-tree-parent">parent</a> is that document, if it exists; otherwise null.</p>
</section>
<section id="flat-tree-def">
<h2>Flat Tree</h2>
<p>While Selectors operate on the DOM tree as the host language presents it, with separate trees that are unreachable via the standard parent/child relationship, the rest of CSS needs a single unified tree structure to work with. This is called the flattened element tree (or flat tree).</p>
</section>
<section id="inclusive-descendent-def">
<h2>Inclusive Descendent</h2>
<p>An inclusive descendant is an object or one of its <a href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendants</a>.</p>
</section>
<section id="natural-language-def">
<h2>Natural Language</h2>
<p>Natural Language (sometimes just <em>language</em>) refers to the spoken, written, or signed communications used by human beings. From <a href="https://www.w3.org/TR/i18n-glossary/#def_natural_language">Internationalization Glossary</a> </p>
</section>
<section id="node-document-def">
<h2>Node Document</h2>
<p>Each <a href="https://dom.spec.whatwg.org/#concept-node">node</a> has an associated node document, set upon creation, that is a document.</p>
</section>
<section id="text-def">
<h2>Text</h2>
<p>A sequence of characters that can be <a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html#dfn-programmatically-determined">programmatically determined</a>, where the sequence is expressing something in <a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html#dfn-human-language">natural language</a>.</p>
</section>
<section id="text-inheriting-its-def">
<h2>Text Inheriting its Programmatic Language from an Element</h2>
<p>The text inheriting its programmatic language from an element E is composed of all the following texts:
<ul>
<li>text nodes: the value of any <a href="https://dom.spec.whatwg.org/#text">text nodes</a> that are <a href="https://act-rules.github.io/glossary/#visible">visible</a> or <a href="https://act-rules.github.io/glossary/#included-in-the-accessibility-tree">included in the accessibility tree</a> and children of an element inheriting its programmatic language from E;</li>
<li>accessible text: the <a href="https://act-rules.github.io/glossary/#accessible-name">accessible name</a> and <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-description">accessible description</a> of any element inheriting its programmatic language from E, and included in the accessibility tree;</li>
<li>page title: the value of the <a href="https://html.spec.whatwg.org/multipage/dom.html#document.title">document title</a>, only if E is a <a href="https://dom.spec.whatwg.org/#document-element">document</a> in a <a href="https://html.spec.whatwg.org/#top-level-browsing-context">top-level browsing context</a>.
</ul>
<p>An element F is an element inheriting its programmatic language from an element E if at least one of the following conditions is true (recursively):</p>
<ul>
<li>F is E itself (an element always inherits its programmatic language from itself); or</li>
<li>F does not have a non-empty lang attribute, and is the child in the <a href="https://drafts.csswg.org/css-scoping/#flat-tree">flat tree</a> of an element inheriting its programmatic language from E; or</li>
<li>F is a <a href="https://html.spec.whatwg.org/#fully-active">fully active document</a> element, has no non-empty lang attribute, and its <a href="https://html.spec.whatwg.org/#browsing-context-container">browsing context container</a> is an element inheriting its programmatic language from E.</li>
</ul>
</section>
<section id="top-level-browsing-context-def">
<h2>Top Level Browsing Context</h2>
<p>​A <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">browsing context that has no <a href="https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context">parent browsing context is the top-level browsing context for itself and all of the browsing contexts for which it is an <a href="https://html.spec.whatwg.org/multipage/browsers.html#ancestor-browsing-context">ancestor browsing context.</p>
<p>A <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">top-level browsing context</a> has an associated group (null or a <a href="">browsing context group</a>). It is initially null.</p>
<p>It is possible to create new browsing contexts that are related to a <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">top-level browsing context</a> while their <a href="https://html.spec.whatwg.org/multipage/browsers.html#bc-container">container</a> is null. Such browsing contexts are called auxiliary browsing contexts. Auxiliary browsing contexts are always <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">top-level browsing contexts</a>.</p>
</section>
<section id="valid-language-def">
<h2>Valid Language Tag</h2>
<p>A language tag is valid if its primary language subtag exists in the language subtag registry with a Type field whose field-body value is language. </p>
<p>A "language tag" is here to be understood as in the first paragraph of the RFC 5646 language tag syntax, i.e. a sequence of subtags separated by hyphens, where a subtag is any sequence of alphanumerical characters. Thus, this definition intentionally differs from the strict RFC 5646 syntax (and ABNF grammar) as user agents and assistive technologies are more lenient in what they accept. The definition is however consistent with the behavior of the :lang() pseudo-selector as defined by Selectors Level 3. For example, de-hello would be an accepted way to indicate German in current user agents and assistive technologies, despite not being valid according to RFC 5646 grammar. As a consequence of this definition, however, grandfathered tags are not correctly recognized as valid language subtags.
</p>
<p>Subtags, notably the primary language subtag, are case insensitive. Hence comparison with the language subtag registry must be done in a case insensitive way.</p>
</section>
</main>
</body>
</html>
33 changes: 33 additions & 0 deletions methods/html-lang-attribute/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Method: [HTML lang attribute indicates the language of text ] | {TBD (Pronunciation)} | WCAG 3.0</title>
</head>
<body>
<header>
<h1>HTML lang attribute indicates the language of text</h1>
</header>
<main>
<!-- This list is for editorial convenience and will be converted to tabs by the generator -->
<ul>
<li><a href="introduction.html">Introduction</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="tests.html">Tests</a></li>
<li><a href="glossary.html">Glossary</a></li>
</ul>
</main>
<footer>
<section id="status">
<h2>Status</h2>
<p>Exploratory</p>
</section>
<section id="changelog">
<h2>Change Log</h2>
<ul>
<li>{list of non-editorial changes by date}</li>
</ul>
</section>
</footer>
</body>
</html>
54 changes: 54 additions & 0 deletions methods/html-lang-attribute/introduction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML lang attribute indicates the language of text Method - Introduction</title>
</head>
<body>
<header>
<h1>Introduction</h1>
</header>
<main>
<section id="outcome">
<h2>Outcome</h2>
<p>This method supports the outcome <a href="#" class="outcome-link">Changes Of Natural Language</a>.</p>
</section>
<section id="platform">
<h2>Platform</h2>
<ul>
<li>All platforms that support HTML.</li>
</ul>
</section>
<section id="technology">
<h2>Technology</h2>
<ul>
<li>HTML</li>
</ul>
</section>
<section id="input_aspects">
<h2>Input aspects for testing</h2>
<ul>
<li><abbr title="Cascading Style Sheets">CSS</abbr> styling</li>
<li><abbr title="Document Object Model">DOM</abbr> tree</li>
</ul>
</section>
<section id="summary">
<h2>Summary</h2>
<p>When authors specify the correct natural language of content, user agents, including assistive technologies, can present text more accurately. Screen readers can load the correct pronunciation rules and braille tables for languages.</p>
</section>
<section id="user-need">
<h2>How it solves user need</h2>
<p>Specifying both the natural language of the view's main content as well as any changes in language of blocks of content in that view can help:</p>
<ul>
<li>People who use screen readers or other technologies that convert text into synthetic speech;</li>
<li>People who use braille that need the correct tables to be applied to text; and</li>
<li>People with certain cognitive, language, and learning disabilities who use text-to-speech software.</li>
</ul>

</section>
<section id="when-to-use">
<h2>When to use and what to do</h2>
<p>Ensure that the HTML element has a <code class="att">lang</code> attribute. The <code class="att">lang</code> attribute value must use a valid language tag, for example <code class="att">lang="en"</code> indicates the language as English. The attribute value must match the natural language of the page <code class="el">title</code> element. Changes in language must be indicated using the <code class="att">lang</code> attribute on the closest parent element.</p>
</section>
</main>
</body>
</html>
Loading