Skip to content

Commit 76a3e69

Browse files
Jym77Jym77
authored
Merge branch 'develop' into fix-4c31df
2 parents 8665ede + 25aa483 commit 76a3e69

16 files changed

+389
-69
lines changed

‎.github/workflows/chair-accounts.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
WilcoFiers
22
daniel-montalvo
33
tbostic32
4-
kengdoj
4+
kengdoj

‎__tests__/spelling-ignore.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@
237237
- focusability
238238
- unitless
239239
- luminance
240+
- disambiguated
240241

241242
# Parts of Unicode
242243
- 000A

‎_rules/image-no-text-0va7u6.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Each test target has no [visible][] [text][human language], except if at least o
4545

4646
## Assumptions
4747

48-
- This rule assumes that there is no mechanism to change the rendering of text within image resources on the page. For pages that *do* provide such a mechanism, this rule might fail even if [SC 1.4.5 Images of Text][sc1.4.5] is satisfied.
48+
- This rule assumes that there is no mechanism to change the rendering of text within image resources on the page. For pages that _do_ provide such a mechanism, this rule might fail even if [SC 1.4.5 Images of Text][sc1.4.5] is satisfied.
4949
- When used in HTML, the SVG `<text>` element is not considered to be an image of text. This is because like any other element in HTML, SVG `<text>` can be adjusted through custom style sheets. This does not apply for SVG text that is in a separate file, and displayed through, for example, the `img` element.
5050

5151
## Accessibility Support

‎_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md

Lines changed: 170 additions & 45 deletions
Large diffs are not rendered by default.

‎_rules/text-contrast-afw4f7.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,10 @@ This 14pt bold black text has a contrast ratio of 3.6:1 on the gray background.
139139

140140
#### Passed Example 7
141141

142-
This text does not convey anything in human language.
142+
The content of this button ("X") does not convey anything in human language; therefore, it passes the rule regardless of its contrast ratio. However, [Success Criterion 1.4.11 Non-Text Content][sc1411] should be examined for this non-text element.
143143

144144
```html
145-
<p style="color: #000; background: #666;">
146-
----=====++++++++___________***********%%%%%%%%%%%±±±±@@@@@@@@
147-
</p>
145+
<button style="color: #666; background-color: #000" aria-label="Close">X</button>
148146
```
149147

150148
#### Passed Example 8
@@ -436,3 +434,4 @@ This text is part of a [disabled][] widget because it is a child of an element w
436434
[user origin]: https://www.w3.org/TR/css3-cascade/#cascade-origin-user 'CSS 3, user origin'
437435
[visible]: #visible 'Definition of Visible'
438436
[html element]: #namespaced-element
437+
[sc1411]: https://www.w3.org/TR/WCAG22/#non-text-contrast

‎_rules/text-contrast-enhanced-09o5cg.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,10 @@ This 14pt bold black text has a contrast ratio of 4.6:1 on the gray background.
139139

140140
#### Passed Example 6
141141

142-
This text does not convey anything in human language.
142+
The content of this button ("X") does not convey anything in human language; therefore, it passes the rule regardless of its contrast ratio. However, [Success Criterion 1.4.11 Non-Text Content][sc1411] should be examined for this non-text element.
143143

144144
```html
145-
<p style="color: #000; background: #666;">
146-
----=====++++++++___________***********%%%%%%%%%%%±±±±@@@@@@@@
147-
</p>
145+
<button style="color: #666; background-color: #FFF" aria-label="Close">X</button>
148146
```
149147

150148
#### Passed Example 7
@@ -467,3 +465,4 @@ This text is part of a [disabled][] widget because it is a child of an element w
467465
[visible]: #visible 'Definition of Visible'
468466
[html element]: #namespaced-element
469467
[sc143]: https://www.w3.org/TR/WCAG22/#contrast-minimum
468+
[sc1411]: https://www.w3.org/TR/WCAG22/#non-text-contrast

‎_rules/visible-label-in-accessible-name-2ee8b8.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,15 +145,15 @@ This link has [visible][] text with mathematical symbols, that does not match th
145145

146146
#### Failed Example 4
147147

148-
This link has [visible][] text does not match the [accessible name][] because there is a hyphen in the accessible name.
148+
This link has [visible][] text does not match the [accessible name][] because there is a hyphen in the accessible name.
149149

150150
```html
151151
<a href="#" aria-label="non-standard">nonstandard</a>
152152
```
153153

154154
#### Failed Example 5
155155

156-
This link has [visible][] text does not match the [accessible name][] because there are extra spaces in the accessible name.
156+
This link has [visible][] text does not match the [accessible name][] because there are extra spaces in the accessible name.
157157

158158
```html
159159
<a aria-label="1 2 3. 4 5 6. 7 8 9 0" href="tel:1234567890">123.456.7890</a>

‎package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/design/process.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The purpose of this stage is to avoid that people spend a huge amount of time on
2828

2929
### Passes this stage and moves on to "To Do" when:
3030

31-
- Currently no explicit criteria for passing this stage, but 3 initial approvals from different organizations are recommended. This should give an indication on whether the rule can get 3 final approving reviews and get through Call for Review later.
31+
- Currently no explicit criteria for passing this stage, but 3 initial approvals from different organizations are recommended. This should give an indication on whether the rule can get 3 final approving reviews and get through Call for Review later.
3232

3333
### Fails this stage and becomes "Rejected" when:
3434

‎pages/glossary/embedded-image.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ An element presents an _embedded image_ when any of the following is true:
1515
- the element is an `svg` element having one or more `image` [descendants][] with a non-empty `href` [attribute value][]; or
1616
- the element has a [computed][] [`background-image`][background-image] CSS property with at least one [`image`][css-image] that is a [url reference][url-reference].
1717

18-
1918
[attribute value]: #attribute-value 'Definition of Attribute Value'
2019
[background-image]: https://drafts.csswg.org/css-backgrounds-3/#background-image
2120
[computed]: https://www.w3.org/TR/css-cascade-4/#computed 'CSS Cascading and Inheritance Level 4 (Working draft) - Computed Values'

‎pages/glossary/included-in-the-accessibility-tree.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ The general rules for when elements are included in the accessibility tree are d
1313

1414
For more details, see [examples of included in the accessibility tree][].
1515

16-
[Programmatically hidden](#programmatically-hidden) elements are removed from the accessibility tree. However, some browsers will leave [focusable](#focusable) elements with an `aria-hidden` attribute set to `true` in the accessibility tree. Because they are hidden, these elements are considered **not** included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.
16+
[Programmatically hidden](#programmatically-hidden) elements are removed from the accessibility tree. However, some browsers will leave [focusable](#focusable) elements with an `aria-hidden` attribute set to `true` in the accessibility tree. Because they are hidden, these elements are considered **not** included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.
1717

1818
[examples of included in the accessibility tree]: https://act-rules.github.io/pages/examples/included-in-the-accessibility-tree/
19-

‎pages/glossary/inert.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ input_aspects:
1010
---
1111

1212
An [HTML or SVG element][] is inert if:
13+
1314
- it has an `inert` [attribute value][] of true; or
1415
- one of its ancestor elements in the [flat tree][] has an `inert` [attribute value][] of true; or
1516
- it is [blocked by a modal][].
1617

17-
[HTML or SVG element]: #namespaced-element 'Definition of HTML or SVG element'
18+
[html or svg element]: #namespaced-element 'Definition of HTML or SVG element'
1819
[attribute value]: #attribute-value 'Definition of Attribute value'
1920
[blocked by a modal]: https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog
2021
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree'

‎pages/glossary/rendered-image-resource.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ A _rendered image resource_ in a [web page][] is any resource with [visible pixe
1313
[embedded image]: #embedded-image 'Definition of Embedded Image'
1414
[image sources]: https://html.spec.whatwg.org/multipage/images.html#image-source
1515
[visible pixels]: #visible 'Definition of visible'
16-
[web page]: #web-page-html 'Definition of web page (HTML)'
16+
[web page]: #web-page-html 'Definition of web page (HTML)'

‎test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>About - Chat with us</title>
6+
<style>
7+
body {
8+
background: #fff;
9+
color: #000;
10+
}
11+
a {
12+
color: #000;
13+
}
14+
.sr-only {
15+
position: absolute;
16+
left: -10000px;
17+
top: auto;
18+
width: 1px;
19+
height: 1px;
20+
overflow: hidden;
21+
}
22+
.breadcrumb ol {
23+
list-style-type: none;
24+
padding: 0;
25+
}
26+
.breadcrumb ol li {
27+
display: inline;
28+
}
29+
.breadcrumb li + li::before {
30+
display: inline-block;
31+
margin: 0 0.25em;
32+
transform: rotate(15deg);
33+
border-right: 0.1em solid currentcolor;
34+
height: 0.8em;
35+
content: '';
36+
}
37+
.contactus-nav {
38+
border: 1px solid #999;
39+
padding: 0;
40+
}
41+
.contactus-nav h2 {
42+
background: #eee;
43+
margin: 0;
44+
padding: 10px;
45+
}
46+
.contactus-nav ul {
47+
list-style-type: none;
48+
margin: 0;
49+
padding: 0;
50+
}
51+
.contactus-nav ul li {
52+
padding: 0 5px;
53+
}
54+
.contactus-nav ul li a {
55+
display: block;
56+
border-bottom: 1px solid #ccc;
57+
padding: 10px;
58+
}
59+
.contactus-nav ul li:last-child a {
60+
border-bottom: 0;
61+
}
62+
.contactus-nav,
63+
.content {
64+
}
65+
.flex {
66+
display: flex;
67+
align-content: flex-start;
68+
justify-content: flex-start;
69+
gap: 60px;
70+
}
71+
.arrow {
72+
border: solid black;
73+
border-width: 0 3px 3px 0;
74+
display: inline-block;
75+
padding: 3px;
76+
margin-right: 10px;
77+
}
78+
79+
.right {
80+
transform: rotate(-45deg);
81+
-webkit-transform: rotate(-45deg);
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<main>
87+
<section aria-labelledby="heading-chat" id="page1" style="display:none;">
88+
<h1 id="heading-chat">Chat With Us</h1>
89+
<p>Chat is available</p>
90+
<p>24 hours / 7-days a week</p>
91+
<button>Chat Now</button>
92+
</section>
93+
<section aria-labelledby="heading-call" id="page2" style="display:none;">
94+
<h1 id="heading-call">Call Us</h1>
95+
<h2>You call us from inside the EU</h2>
96+
<p>From Monday to Friday</p>
97+
<p>
98+
<span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00
99+
CET
100+
</p>
101+
<p><a href="tel:0000000000">0000000000</a></p>
102+
<h2>You call us from outside the EU</h2>
103+
<p>From Monday to Friday</p>
104+
<p>
105+
<span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00
106+
CET
107+
</p>
108+
<p><a href="tel:0000000000">0000000000</a></p>
109+
<h2>We call you (for free)</h2>
110+
<p>From Monday to Friday</p>
111+
<p>
112+
<span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00
113+
CET
114+
</p>
115+
<p>Text "call me" plus your country code & number to</p>
116+
<p><a href="tel:0000000000">0000000000</a></p>
117+
</section>
118+
<div id="page3" style="display:none;">
119+
<nav aria-label="breadcrumbs" class="breadcrumb">
120+
<ol>
121+
<li>
122+
<a href="#">Services</a>
123+
</li>
124+
<li>
125+
<a href="#">Contact Us</a>
126+
</li>
127+
<li>Chat</li>
128+
</ol>
129+
</nav>
130+
<div class="flex">
131+
<nav aria-label="contact us" class="contactus-nav">
132+
<h2>Services</h2>
133+
<ul>
134+
<li>
135+
<a href="?page3" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Chat</a>
136+
</li>
137+
<li><a href="?page4">Call</a></li>
138+
<li><a href="#">Email</a></li>
139+
</ul>
140+
</nav>
141+
<section aria-labelledby="heading-call" class="content">
142+
<h1 id="heading-call">Contact Us</h1>
143+
<p>We're happy to help you!</p>
144+
<p>Chat is available</p>
145+
<p>24 hours / 7-days a week</p>
146+
<button>Chat Now</button>
147+
</section>
148+
</div>
149+
</div>
150+
<div id="page4" style="display:none;">
151+
<nav aria-label="breadcrumbs" class="breadcrumb">
152+
<ol>
153+
<li>
154+
<a href="#">Services</a>
155+
</li>
156+
<li>
157+
<a href="#">Contact Us</a>
158+
</li>
159+
<li>Call</li>
160+
</ol>
161+
</nav>
162+
<div class="flex">
163+
<nav aria-label="contact us" class="contactus-nav">
164+
<h2>Services</h2>
165+
<ul>
166+
<li><a href="?page3">Chat</a></li>
167+
<li>
168+
<a href="?page4" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Call</a>
169+
</li>
170+
<li><a href="#">Email</a></li>
171+
</ul>
172+
</nav>
173+
<section aria-labelledby="heading-call" class="content">
174+
<h1 id="heading-call">Contact Us</h1>
175+
<p>We're happy to help you!</p>
176+
<p>You can call us from Monday to Friday</p>
177+
<p>
178+
<span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span
179+
><span class="sr-only">to</span> 18:00 CET
180+
</p>
181+
<p><a href="tel:0000000000">0000000000</a></p>
182+
</section>
183+
</div>
184+
</div>
185+
</main>
186+
<script>
187+
var urlParams = new URLSearchParams(window.location.search)
188+
var page = urlParams.get('page')
189+
if (page == '60e950cff70bf1ec60a702086748ab4dec361514') {
190+
page = '1'
191+
} else if (page == 'c1d4e0f067462f4b28716f028d9213a25eb82f28') {
192+
page = '2'
193+
}
194+
document.getElementById('page' + page).style.display = 'block'
195+
</script>
196+
</body>
197+
</html>

‎test-assets/shared/chat.png

1.04 KB
Loading

‎test-assets/shared/phone.png

1.12 KB
Loading

0 commit comments

Comments
 (0)