Skip to content

Commit 933c1c4

Browse files
patrickhlaukekfranqueirombgower
authored
Reformat T1, T2, T3 and suppress highlight.js (#4475)
Prevents unnecessary/unwanted `highlight.js` highlighting Closes #4473 Note: I went for a "belt and braces" (intended redundancy) approach here with using `no-highlight language-html`. In theory (from reading around the subject), the first one should be sufficient, but apparently not always the case, so the latter - while technically maybe not exact - also stops any highlighting (as there's no angle brackets anywhere in the preformatted blocks) Preview links: * https://deploy-preview-4475--wcag2.netlify.app/techniques/text/t1 * https://deploy-preview-4475--wcag2.netlify.app/techniques/text/t2 * https://deploy-preview-4475--wcag2.netlify.app/techniques/text/t3 Co-authored-by: Kenneth G. Franqueiro <[email protected]> Co-authored-by: Mike Gower <[email protected]>
1 parent ff55000 commit 933c1c4

File tree

3 files changed

+209
-145
lines changed

3 files changed

+209
-145
lines changed

techniques/text/T1.html

Lines changed: 66 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,77 @@
1-
<!DOCTYPE html><html lang="en"><head><title>Using standard text formatting conventions for paragraphs</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Using standard text formatting conventions for paragraphs</h1><section class="meta"><p class="id">ID: T1</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
2-
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
3-
</section><section id="description"><h2>Description</h2>
4-
<p>The objective of this technique is to recognize a paragraph in a plain text document. A paragraph is a coherent block of text, such as a group of related sentences that develop a single topic or a coherent part of a larger topic. </p>
5-
<p>The beginning of a paragraph is indicated by
6-
</p>
7-
<ul>
8-
<li>the beginning of the content, that is, the paragraph is the first content in the document, or</li>
9-
<li>exactly one blank line preceding the paragraph text</li>
10-
</ul>
11-
<p>The end of a paragraph is indicated by
12-
</p>
13-
<ul>
14-
<li>the end of the content, that is, the paragraph is the last content in the document, or</li>
15-
<li>one or more blank lines following the paragraph text</li>
16-
</ul>
17-
<p>A blank line contains zero or more non-printing characters, such as space or tab, followed by a new line.</p>
18-
</section><section id="examples"><h2>Examples</h2>
19-
<section class="example">
20-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Using standard text formatting conventions for paragraphs</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
6+
</head>
7+
<body>
8+
<h1>Using standard text formatting conventions for paragraphs</h1>
9+
<section class="meta">
10+
<p class="id">ID: T1</p>
11+
<p class="technology">Technology: text</p>
12+
<p class="type">Type: Technique</p>
13+
</section>
14+
<section id="applicability">
15+
<h2>When to Use</h2>
16+
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
17+
</section>
18+
<section id="description">
19+
<h2>Description</h2>
20+
<p>The objective of this technique is to recognize a paragraph in a plain text document. A paragraph is a coherent block of text, such as a group of related sentences that develop a single topic or a coherent part of a larger topic. </p>
21+
<p>The beginning of a paragraph is indicated by</p>
22+
<ul>
23+
<li>the beginning of the content, that is, the paragraph is the first content in the document, or</li>
24+
<li>exactly one blank line preceding the paragraph text</li>
25+
</ul>
26+
<p>The end of a paragraph is indicated by</p>
27+
<ul>
28+
<li>the end of the content, that is, the paragraph is the last content in the document, or</li>
29+
<li>one or more blank lines following the paragraph text</li>
30+
</ul>
31+
<p>A blank line contains zero or more non-printing characters, such as space or tab, followed by a new line.</p>
32+
</section>
33+
<section id="examples">
34+
<h2>Examples</h2>
35+
<section class="example">
2136
<p>Two paragraphs. Each starts and ends with a blank line.</p>
22-
23-
<pre xml:space="preserve">
24-
37+
38+
<pre class="no-highlight language-html">
2539
This is the first sentence in this
2640
paragraph. Paragraphs may be long
2741
or short.
28-
42+
2943
In this paragraph the first line is
3044
indented. Indented and non-indented
3145
sentences are allowed. White space within
3246
the paragraph lines is ignored in
3347
defining paragraphs. Only completely blank
3448
lines are significant.
35-
3649
</pre>
37-
</section>
38-
</section><section id="tests"><h2>Tests</h2>
39-
<section class="procedure"><h3>Procedure</h3>
40-
<p>For each paragraph:
41-
</p>
42-
<ol>
43-
<li>Check that the paragraph is preceded by exactly one blank line, or that the paragraph is the first content in the web page</li>
44-
<li>Check that the paragraph is followed by at least one blank line, or that the paragraph is the last content in the web page.</li>
45-
<li>Check that no paragraph contains any blank lines</li>
46-
</ol>
47-
</section>
48-
<section class="results"><h3>Expected Results</h3>
49-
<ul>
50-
<li>All checks above are all true for each paragraph.</li>
51-
</ul>
52-
</section>
53-
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
50+
</section>
51+
</section>
52+
<section id="tests">
53+
<h2>Tests</h2>
54+
<section class="procedure">
55+
<h3>Procedure</h3>
56+
<p>For each paragraph:</p>
57+
<ol>
58+
<li>Check that the paragraph is preceded by exactly one blank line, or that the paragraph is the first content in the web page</li>
59+
<li>Check that the paragraph is followed by at least one blank line, or that the paragraph is the last content in the web page.</li>
60+
<li>Check that no paragraph contains any blank lines</li>
61+
</ol>
62+
</section>
63+
<section class="results">
64+
<h3>Expected Results</h3>
65+
<ul>
66+
<li>All checks above are all true for each paragraph.</li>
67+
</ul>
68+
</section>
69+
</section>
70+
<section id="related">
71+
<h2>Related Techniques</h2>
72+
</section>
73+
<section id="resources">
74+
<h2>Resources</h2>
75+
</section>
76+
</body>
77+
</html>

techniques/text/T2.html

Lines changed: 80 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,98 @@
1-
<!DOCTYPE html><html lang="en"><head><title>Using standard text formatting conventions for lists</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Using standard text formatting conventions for lists</h1><section class="meta"><p class="id">ID: T2</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
2-
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
3-
</section><section id="description"><h2>Description</h2>
4-
<p>The objective of this technique is to use text formatting conventions to create simple lists of related items. Hierarchical lists or nested lists cannot be represented using this technique and should be represented using a different technology. </p>
5-
<p>A list is a sequence of list items. A list item is a paragraph that begins with a label. For unordered lists, asterisks, dashes, and bullet characters may be used as the label, but the same label characters must be used for all the items in a list. For ordered lists, the label may be alphabetic or numeric, and may be terminated by a period or a right parenthesis. The labels must be in ascending order, that is,
6-
</p>
7-
<ul>
8-
<li>numbers must be in numeric order,</li>
9-
<li>alphabetic labels must be in alphabetical order or in numeric order when interpreted as Roman numerals.</li>
10-
</ul>
11-
</section><section id="examples"><h2>Examples</h2>
12-
<section class="example">
13-
<h3>Unordered list</h3>
14-
<pre xml:space="preserve">
15-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Using standard text formatting conventions for lists</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
6+
</head>
7+
<body>
8+
<h1>Using standard text formatting conventions for lists</h1>
9+
<section class="meta">
10+
<p class="id">ID: T2</p>
11+
<p class="technology">Technology: text</p>
12+
<p class="type">Type: Technique</p>
13+
</section>
14+
<section id="applicability">
15+
<h2>When to Use</h2>
16+
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
17+
</section>
18+
<section id="description">
19+
<h2>Description</h2>
20+
<p>The objective of this technique is to use text formatting conventions to create simple lists of related items. Hierarchical lists or nested lists cannot be represented using this technique and should be represented using a different technology. </p>
21+
<p>A list is a sequence of list items. A list item is a paragraph that begins with a label. For unordered lists, asterisks, dashes, and bullet characters may be used as the label, but the same label characters must be used for all the items in a list. For ordered lists, the label may be alphabetic or numeric, and may be terminated by a period or a right parenthesis. The labels must be in ascending order, that is,</p>
22+
<ul>
23+
<li>numbers must be in numeric order,</li>
24+
<li>alphabetic labels must be in alphabetical order or in numeric order when interpreted as Roman numerals.</li>
25+
</ul>
26+
</section>
27+
<section id="examples">
28+
<h2>Examples</h2>
29+
<section class="example">
30+
<h3>Unordered list</h3>
31+
<pre class="no-highlight language-html">
1632
- unordered list item
17-
18-
- unordered list item
19-
33+
2034
- unordered list item
2135

36+
- unordered list item
2237
</pre>
23-
</section>
24-
<section class="example">
25-
<h3>Numeric ordered list</h3>
26-
<pre xml:space="preserve">
27-
38+
</section>
39+
<section class="example">
40+
<h3>Numeric ordered list</h3>
41+
<pre class="no-highlight language-html">
2842
1. Ordered list item
29-
43+
3044
2. Ordered list item
31-
45+
3246
3. Ordered list item
3347

3448
</pre>
35-
</section>
36-
<section class="example">
37-
<h3>Roman numeral ordered list</h3>
38-
<pre xml:space="preserve">
39-
49+
</section>
50+
<section class="example">
51+
<h3>Roman numeral ordered list</h3>
52+
<pre class="no-highlight language-html">
4053
i. Ordered list item
41-
54+
4255
ii. Ordered list item
43-
56+
4457
iii. Ordered list item
45-
46-
iv. Ordered list item
4758

59+
iv. Ordered list item
4860
</pre>
49-
</section>
50-
<section class="example">
51-
<h3>Alphabetic ordered list</h3>
52-
<pre xml:space="preserve">
53-
61+
</section>
62+
<section class="example">
63+
<h3>Alphabetic ordered list</h3>
64+
<pre class="no-highlight language-html">
5465
A) Ordered list item
55-
66+
5667
B) Ordered list item
57-
58-
C) Ordered list item
5968

69+
C) Ordered list item
6070
</pre>
61-
</section>
62-
</section><section id="tests"><h2>Tests</h2>
63-
<section class="procedure"><h3>Procedure</h3>
64-
<p>For each list in the text content
65-
</p>
66-
<ol>
67-
<li>Check that each list item is a paragraph that starts with a label</li>
68-
<li>Check that the list contains no lines that are not list items</li>
69-
<li>Check that all list items in a list use the same style label</li>
70-
<li>Check that the labels in ordered lists are in sequential order</li>
71-
<li>Check that the labels in each unordered list are the same</li>
72-
</ol>
73-
</section>
74-
<section class="results"><h3>Expected Results</h3>
75-
<ul>
76-
<li>All checks above are all true.</li>
77-
</ul>
78-
</section>
79-
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
71+
</section>
72+
</section>
73+
<section id="tests">
74+
<h2>Tests</h2>
75+
<section class="procedure"><h3>Procedure</h3>
76+
<p>For each list in the text content</p>
77+
<ol>
78+
<li>Check that each list item is a paragraph that starts with a label</li>
79+
<li>Check that the list contains no lines that are not list items</li>
80+
<li>Check that all list items in a list use the same style label</li>
81+
<li>Check that the labels in ordered lists are in sequential order</li>
82+
<li>Check that the labels in each unordered list are the same</li>
83+
</ol>
84+
</section>
85+
<section class="results"><h3>Expected Results</h3>
86+
<ul>
87+
<li>All checks above are all true.</li>
88+
</ul>
89+
</section>
90+
</section>
91+
<section id="related">
92+
<h2>Related Techniques</h2>
93+
</section>
94+
<section id="resources">
95+
<h2>Resources</h2>
96+
</section>
97+
</body>
98+
</html>

techniques/text/T3.html

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,71 @@
1-
<!DOCTYPE html><html lang="en"><head><title>Using standard text formatting conventions for headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></head><body><h1>Using standard text formatting conventions for headings</h1><section class="meta"><p class="id">ID: T3</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
2-
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
3-
</section><section id="description"><h2>Description</h2>
4-
<p>The objective of this technique is to use text formatting conventions to convey the structure of the content. Headings are used to locate and label sections of a text document, showing the organization of the document.</p>
5-
<p>The beginning of a heading is indicated by
6-
</p>
7-
<ul>
8-
<li>two blank lines preceding the heading</li>
9-
</ul>
10-
<p>
11-
The end of a heading is indicated by
12-
</p>
13-
<ul>
14-
<li>a blank line following the heading</li>
15-
</ul>
16-
<p>A blank line contains any number of non-printing characters, such as space or tab, followed by a new line.</p>
17-
<p>The programmatic identification of the Heading is the two blank lines preceding it and one blank line succeeding it. Text documents are necessarily void of underlying structure and so structure must be indicated in the programmatic layout for screen readers. This programmatic layout will enable screen readers to voice blank lines twice before the text that will be considered as a heading. A screen magnifier user would decipher headings by visually identifying the space before it (or their technology may have Screen reader capabilities that can identify the spaces).</p>
18-
</section><section id="examples"><h2>Examples</h2>
19-
<section class="example">
20-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Using standard text formatting conventions for headings</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
6+
</head>
7+
<body>
8+
<h1>Using standard text formatting conventions for headings</h1>
9+
<section class="meta">
10+
<p class="id">ID: T3</p>
11+
<p class="technology">Technology: text</p>
12+
<p class="type">Type: Technique</p>
13+
</section>
14+
<section id="applicability">
15+
<h2>When to Use</h2>
16+
<p>Plain text documents. Not applicable to technologies that contain markup.</p>
17+
</section>
18+
<section id="description">
19+
<h2>Description</h2>
20+
<p>The objective of this technique is to use text formatting conventions to convey the structure of the content. Headings are used to locate and label sections of a text document, showing the organization of the document.</p>
21+
<p>The beginning of a heading is indicated by</p>
22+
<ul>
23+
<li>two blank lines preceding the heading</li>
24+
</ul>
25+
<p>The end of a heading is indicated by</p>
26+
<ul>
27+
<li>a blank line following the heading</li>
28+
</ul>
29+
<p>A blank line contains any number of non-printing characters, such as space or tab, followed by a new line.</p>
30+
<p>The programmatic identification of the Heading is the two blank lines preceding it and one blank line succeeding it. Text documents are necessarily void of underlying structure and so structure must be indicated in the programmatic layout for screen readers. This programmatic layout will enable screen readers to voice blank lines twice before the text that will be considered as a heading. A screen magnifier user would decipher headings by visually identifying the space before it (or their technology may have Screen reader capabilities that can identify the spaces).</p>
31+
</section>
32+
<section id="examples">
33+
<h2>Examples</h2>
34+
<section class="example">
2135
<p>A paragraph is followed by two blank lines, then a heading, then one blank line, then another paragraph:</p>
22-
23-
<pre xml:space="preserve">
24-
36+
<pre class="no-highlight language-html">
2537
...this is the end of paragraph 1.
2638

2739

2840
The Text of the Heading
2941

3042
This is the beginning of paragraph 2.
31-
32-
3343
</pre>
34-
</section>
35-
</section><section id="tests"><h2>Tests</h2>
36-
<section class="procedure"><h3>Procedure</h3>
37-
<p>For each heading in the content:
38-
</p>
39-
<ol>
40-
<li>Check that each heading is preceded by two blank lines</li>
41-
<li>Check that each heading is followed by a blank line</li>
42-
<li>Check that no heading contains any blank lines</li>
43-
</ol>
44-
</section>
45-
<section class="results"><h3>Expected Results</h3>
46-
<ul>
47-
<li>All of the checks above are true.</li>
48-
</ul>
49-
</section>
50-
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
44+
</section>
45+
</section>
46+
<section id="tests">
47+
<h2>Tests</h2>
48+
<section class="procedure">
49+
<h3>Procedure</h3>
50+
<p>For each heading in the content:</p>
51+
<ol>
52+
<li>Check that each heading is preceded by two blank lines</li>
53+
<li>Check that each heading is followed by a blank line</li>
54+
<li>Check that no heading contains any blank lines</li>
55+
</ol>
56+
</section>
57+
<section class="results">
58+
<h3>Expected Results</h3>
59+
<ul>
60+
<li>All of the checks above are true.</li>
61+
</ul>
62+
</section>
63+
</section>
64+
<section id="related">
65+
<h2>Related Techniques</h2>
66+
</section>
67+
<section id="resources">
68+
<h2>Resources</h2>
69+
</section>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)