diff --git a/.github/workflows/chair-accounts.md b/.github/workflows/chair-accounts.md index e960f880d6..011ca21a1a 100644 --- a/.github/workflows/chair-accounts.md +++ b/.github/workflows/chair-accounts.md @@ -1,4 +1,4 @@ WilcoFiers daniel-montalvo tbostic32 -kengdoj \ No newline at end of file +kengdoj diff --git a/_rules/image-no-text-0va7u6.md b/_rules/image-no-text-0va7u6.md index cc98e2b567..0fd210c74b 100644 --- a/_rules/image-no-text-0va7u6.md +++ b/_rules/image-no-text-0va7u6.md @@ -45,7 +45,7 @@ Each test target has no [visible][] [text][human language], except if at least o ## Assumptions -- 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. +- 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. - 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. ## Accessibility Support diff --git a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md index 99f745fb62..fe6557e46e 100755 --- a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md +++ b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md @@ -47,7 +47,7 @@ This rule applies to any set of two or more [HTML or SVG elements][] for which a For each pair of links in each target set, one of the following is true: -- both links resolve to the [same resource][]; or +- both links resolve to the [same resource][]; or - both links resolve to [equivalent resources][equivalent resource]; or - there is no visual information within the [web page][] to let users know that both links resolve to [non-equivalent resources][equivalent resource]. @@ -240,7 +240,15 @@ These two HTML `a` elements have the same [accessible name][] and are nested wit ```html <html lang="en"> <p> - To get in touch with us, you can either <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1">contact us</a> via chat or <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2">contact us</a> by phone. + To get in touch with us, you can either + <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" + >contact us</a + > + via chat or + <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" + >contact us</a + > + by phone. </p> </html> ``` @@ -281,12 +289,18 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog <div> <span style="text-align:center;">Contact us</span> <span style="display:flex; justify-content:space-around;"> - <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> - <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> + <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" /> + <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" /> </span> <span style="display:flex; justify-content:space-around;"> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=60e950cff70bf1ec60a702086748ab4dec361514">Contact Us</a> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=c1d4e0f067462f4b28716f028d9213a25eb82f28">Contact Us</a> + <a + href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=60e950cff70bf1ec60a702086748ab4dec361514" + >Contact Us</a + > + <a + href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=c1d4e0f067462f4b28716f028d9213a25eb82f28" + >Contact Us</a + > </span> </div> </html> @@ -301,12 +315,16 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog <div> <span style="text-align:center;">Contact us</span> <span style="display:flex; justify-content:space-around;"> - <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> - <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> + <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" /> + <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" /> </span> <span style="display:flex; justify-content:space-around;"> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=3">Contact Us</a> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=4">Contact Us</a> + <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=3" + >Contact Us</a + > + <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=4" + >Contact Us</a + > </span> </div> </html> @@ -321,18 +339,22 @@ These two HTML `span` elements have an [explicit role][] of link, same [accessib <div> <span style="text-align:center;">Contact us</span> <span style="display:flex; justify-content:space-around;"> - <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> - <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> + <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" /> + <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" /> </span> <span style="display:flex; justify-content:space-around;"> <span - role="link" - tabindex="0" - onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1'">Contact Us</span> + role="link" + tabindex="0" + onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1'" + >Contact Us</span + > <span - role="link" - tabindex="0" - onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2'">Contact Us</span> + role="link" + tabindex="0" + onclick="location='/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2'" + >Contact Us</span + > </span> </div> </html> @@ -347,11 +369,21 @@ These two SVG `a` elements have the same [accessible name][] and [context][progr <p> <svg enable-background="new 0 0 264 120" viewBox="0 -20 264 140" xmlns="http://www.w3.org/2000/svg"> <text>Contact us</text> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" aria-label="Contact Us"> - <path d="m212.0806 68.0717c-10.3917 10.3852-22.4311 20.3239-27.1905 15.5646-6.8075-6.8075-11.0088-12.7418-26.0285-.6696-15.0132 12.0657-3.4792 20.1139 3.1182 26.7047 7.6149 7.6149 36.0001.407 64.0571-27.6434 28.0504-28.057 35.2386-56.4422 27.6172-64.0571-6.5974-6.604-14.6062-18.1314-26.6719-3.1182-12.0723 15.0132-6.1444 19.2145.6761 26.0285 4.7397 4.7593-5.1925 16.7988-15.5777 27.1905z"/> + <a + href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" + aria-label="Contact Us" + > + <path + d="m212.0806 68.0717c-10.3917 10.3852-22.4311 20.3239-27.1905 15.5646-6.8075-6.8075-11.0088-12.7418-26.0285-.6696-15.0132 12.0657-3.4792 20.1139 3.1182 26.7047 7.6149 7.6149 36.0001.407 64.0571-27.6434 28.0504-28.057 35.2386-56.4422 27.6172-64.0571-6.5974-6.604-14.6062-18.1314-26.6719-3.1182-12.0723 15.0132-6.1444 19.2145.6761 26.0285 4.7397 4.7593-5.1925 16.7988-15.5777 27.1905z" + /> </a> - <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" aria-label="Contact Us"> - <path d="m105 7.5h-90c-8.2576 0-15 6.7497-15 15v52.5c0 8.2498 6.7424 15 15 15h30l30 22.5v-22.5h30c8.2498 0 15-6.7502 15-15v-52.5c0-8.2503-6.7502-15-15-15zm-80.7903 52.5c-6.2132 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0418-11.25 11.255-11.25 6.2128 0 11.245 5.0418 11.245 11.25 0 6.2077-5.0322 11.25-11.245 11.25zm35.7953 0c-6.2128 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0423-11.25 11.255-11.25 6.2132 0 11.245 5.0368 11.245 11.25 0 6.2128-5.0317 11.25-11.245 11.25zm35.7958 0c-6.2132 0-11.2555-5.0372-11.2555-11.25 0-6.2132 5.0423-11.25 11.2555-11.25 6.2128 0 11.2445 5.0368 11.2445 11.25 0 6.2128-5.0318 11.25-11.2445 11.25z"/> + <a + href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" + aria-label="Contact Us" + > + <path + d="m105 7.5h-90c-8.2576 0-15 6.7497-15 15v52.5c0 8.2498 6.7424 15 15 15h30l30 22.5v-22.5h30c8.2498 0 15-6.7502 15-15v-52.5c0-8.2503-6.7502-15-15-15zm-80.7903 52.5c-6.2132 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0418-11.25 11.255-11.25 6.2128 0 11.245 5.0418 11.245 11.25 0 6.2077-5.0322 11.25-11.245 11.25zm35.7953 0c-6.2128 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0423-11.25 11.255-11.25 6.2132 0 11.245 5.0368 11.245 11.25 0 6.2128-5.0317 11.25-11.245 11.25zm35.7958 0c-6.2132 0-11.2555-5.0372-11.2555-11.25 0-6.2132 5.0423-11.25 11.2555-11.25 6.2128 0 11.2445 5.0368 11.2445 11.25 0 6.2128-5.0318 11.25-11.2445 11.25z" + /> </a> </svg> </p> @@ -367,8 +399,8 @@ These two HTML `a` elements with the same [accessible name][] and [context][prog <p> <span style="text-align:center;">Contact us</span> <span style="display:flex; justify-content:space-around;"> - <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;"> - <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;"> + <img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" /> + <img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" /> </span> <span style="display:flex; justify-content:space-around;"> <a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact Us</a> diff --git a/_rules/visible-label-in-accessible-name-2ee8b8.md b/_rules/visible-label-in-accessible-name-2ee8b8.md index 570437a592..88618546b9 100755 --- a/_rules/visible-label-in-accessible-name-2ee8b8.md +++ b/_rules/visible-label-in-accessible-name-2ee8b8.md @@ -145,7 +145,7 @@ This link has [visible][] text with mathematical symbols, that does not match th #### Failed Example 4 -This link has [visible][] text does not match the [accessible name][] because there is a hyphen in the accessible name. +This link has [visible][] text does not match the [accessible name][] because there is a hyphen in the accessible name. ```html <a href="#" aria-label="non-standard">nonstandard</a> @@ -153,7 +153,7 @@ This link has [visible][] text does not match the [accessible name][] because th #### Failed Example 5 -This link has [visible][] text does not match the [accessible name][] because there are extra spaces in the accessible name. +This link has [visible][] text does not match the [accessible name][] because there are extra spaces in the accessible name. ```html <a aria-label="1 2 3. 4 5 6. 7 8 9 0" href="tel:1234567890">123.456.7890</a> diff --git a/pages/design/process.md b/pages/design/process.md index 2aac888eb9..36662e4010 100644 --- a/pages/design/process.md +++ b/pages/design/process.md @@ -28,7 +28,7 @@ The purpose of this stage is to avoid that people spend a huge amount of time on ### Passes this stage and moves on to "To Do" when: -- 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. +- 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. ### Fails this stage and becomes "Rejected" when: diff --git a/pages/glossary/embedded-image.md b/pages/glossary/embedded-image.md index 288fced592..30e97088f3 100755 --- a/pages/glossary/embedded-image.md +++ b/pages/glossary/embedded-image.md @@ -15,7 +15,6 @@ An element presents an _embedded image_ when any of the following is true: - the element is an `svg` element having one or more `image` [descendants][] with a non-empty `href` [attribute value][]; or - 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]. - [attribute value]: #attribute-value 'Definition of Attribute Value' [background-image]: https://drafts.csswg.org/css-backgrounds-3/#background-image [computed]: https://www.w3.org/TR/css-cascade-4/#computed 'CSS Cascading and Inheritance Level 4 (Working draft) - Computed Values' diff --git a/pages/glossary/included-in-the-accessibility-tree.md b/pages/glossary/included-in-the-accessibility-tree.md index 8562eade68..925f759979 100755 --- a/pages/glossary/included-in-the-accessibility-tree.md +++ b/pages/glossary/included-in-the-accessibility-tree.md @@ -13,7 +13,6 @@ The general rules for when elements are included in the accessibility tree are d For more details, see [examples of included in the accessibility tree][]. -[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. +[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. [examples of included in the accessibility tree]: https://act-rules.github.io/pages/examples/included-in-the-accessibility-tree/ - diff --git a/pages/glossary/inert.md b/pages/glossary/inert.md index a3ab819703..b917aff620 100644 --- a/pages/glossary/inert.md +++ b/pages/glossary/inert.md @@ -10,11 +10,12 @@ input_aspects: --- An [HTML or SVG element][] is inert if: + - it has an `inert` [attribute value][] of true; or - one of its ancestor elements in the [flat tree][] has an `inert` [attribute value][] of true; or - it is [blocked by a modal][]. -[HTML or SVG element]: #namespaced-element 'Definition of HTML or SVG element' +[html or svg element]: #namespaced-element 'Definition of HTML or SVG element' [attribute value]: #attribute-value 'Definition of Attribute value' [blocked by a modal]: https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' diff --git a/pages/glossary/rendered-image-resource.md b/pages/glossary/rendered-image-resource.md index d52ff862c6..92bc58b918 100755 --- a/pages/glossary/rendered-image-resource.md +++ b/pages/glossary/rendered-image-resource.md @@ -13,4 +13,4 @@ A _rendered image resource_ in a [web page][] is any resource with [visible pixe [embedded image]: #embedded-image 'Definition of Embedded Image' [image sources]: https://html.spec.whatwg.org/multipage/images.html#image-source [visible pixels]: #visible 'Definition of visible' -[web page]: #web-page-html 'Definition of web page (HTML)' \ No newline at end of file +[web page]: #web-page-html 'Definition of web page (HTML)' diff --git a/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html b/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html index 156807a007..f5c9328b47 100644 --- a/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html +++ b/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html @@ -4,52 +4,66 @@ <meta charset="utf-8" /> <title>About - Chat with us</title> <style> - body {background: #fff; color: #000;} - a {color: #000;} + body { + background: #fff; + color: #000; + } + a { + color: #000; + } .sr-only { - position:absolute; - left:-10000px; - top:auto; - width:1px; - height:1px; - overflow:hidden; - } - .breadcrumb ol {list-style-type: none; padding:0;} - .breadcrumb ol li {display:inline;} + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } + .breadcrumb ol { + list-style-type: none; + padding: 0; + } + .breadcrumb ol li { + display: inline; + } .breadcrumb li + li::before { display: inline-block; margin: 0 0.25em; transform: rotate(15deg); border-right: 0.1em solid currentcolor; height: 0.8em; - content: ""; + content: ''; } .contactus-nav { border: 1px solid #999; padding: 0; } .contactus-nav h2 { - background: #eee; + background: #eee; margin: 0; padding: 10px; } .contactus-nav ul { - list-style-type: none; - margin:0; - padding:0; + list-style-type: none; + margin: 0; + padding: 0; } .contactus-nav ul li { padding: 0 5px; } .contactus-nav ul li a { display: block; - border-bottom:1px solid #ccc; + border-bottom: 1px solid #ccc; padding: 10px; } - .contactus-nav ul li:last-child a { border-bottom:0;} - .contactus-nav, .content {} + .contactus-nav ul li:last-child a { + border-bottom: 0; + } + .contactus-nav, + .content { + } .flex { - display: flex; + display: flex; align-content: flex-start; justify-content: flex-start; gap: 60px; @@ -59,14 +73,13 @@ border-width: 0 3px 3px 0; display: inline-block; padding: 3px; - margin-right:10px; + margin-right: 10px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } - </style> </head> <body> @@ -81,15 +94,24 @@ <h1 id="heading-chat">Chat With Us</h1> <h1 id="heading-call">Call Us</h1> <h2>You call us from inside the EU</h2> <p>From Monday to Friday</p> - <p><span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 CET</p> + <p> + <span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 + CET + </p> <p><a href="tel:0000000000">0000000000</a></p> <h2>You call us from outside the EU</h2> <p>From Monday to Friday</p> - <p><span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 CET</p> + <p> + <span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 + CET + </p> <p><a href="tel:0000000000">0000000000</a></p> <h2>We call you (for free)</h2> <p>From Monday to Friday</p> - <p><span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 CET</p> + <p> + <span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 + CET + </p> <p>Text "call me" plus your country code & number to</p> <p><a href="tel:0000000000">0000000000</a></p> </section> @@ -109,7 +131,9 @@ <h2>We call you (for free)</h2> <nav aria-label="contact us" class="contactus-nav"> <h2>Services</h2> <ul> - <li><a href="?page3" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Chat</a></li> + <li> + <a href="?page3" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Chat</a> + </li> <li><a href="?page4">Call</a></li> <li><a href="#">Email</a></li> </ul> @@ -140,7 +164,9 @@ <h1 id="heading-call">Contact Us</h1> <h2>Services</h2> <ul> <li><a href="?page3">Chat</a></li> - <li><a href="?page4" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Call</a></li> + <li> + <a href="?page4" aria-current="page"><i class="arrow right" aria-hidden="true"></i>Call</a> + </li> <li><a href="#">Email</a></li> </ul> </nav> @@ -148,21 +174,24 @@ <h2>Services</h2> <h1 id="heading-call">Contact Us</h1> <p>We're happy to help you!</p> <p>You can call us from Monday to Friday</p> - <p><span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span><span class="sr-only">to</span> 18:00 CET</p> + <p> + <span class="sr-only">from </span>9:00 <span aria-hidden="true">-</span + ><span class="sr-only">to</span> 18:00 CET + </p> <p><a href="tel:0000000000">0000000000</a></p> </section> </div> </div> </main> <script> - var urlParams = new URLSearchParams(window.location.search); - var page = urlParams.get('page'); - if (page=="60e950cff70bf1ec60a702086748ab4dec361514"){ - page="1" - } else if (page=="c1d4e0f067462f4b28716f028d9213a25eb82f28"){ - page="2" - } - document.getElementById('page'+page).style.display = 'block'; + var urlParams = new URLSearchParams(window.location.search) + var page = urlParams.get('page') + if (page == '60e950cff70bf1ec60a702086748ab4dec361514') { + page = '1' + } else if (page == 'c1d4e0f067462f4b28716f028d9213a25eb82f28') { + page = '2' + } + document.getElementById('page' + page).style.display = 'block' </script> </body> </html>