Skip to content
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

Change <ol> to <ul> when no order is intended (non-normative) #3518

Merged
merged 7 commits into from
May 14, 2024
Merged

Change <ol> to <ul> when no order is intended (non-normative) #3518

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
52b808d
Change `<ol>` to `<ul>` when no order is intended
patrickhlauke Oct 24, 2023
c4ed66c
Merge branch 'main' into patrickhlauke-techniques-lists
patrickhlauke Mar 12, 2024
44277aa
Merge branch 'main' into patrickhlauke-techniques-lists
patrickhlauke Mar 23, 2024
c87ea1f
Remove changes to normative documents
patrickhlauke Mar 23, 2024
3a11fbd
Clean up some indentation
patrickhlauke Mar 23, 2024
f889e56
Merge branch 'main' into patrickhlauke-techniques-lists
patrickhlauke Apr 5, 2024
dec6977
Merge branch 'main' into patrickhlauke-techniques-lists
mbgower May 14, 2024
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
177 changes: 75 additions & 102 deletions conformance-challenges/index.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions understanding/20/headings-and-labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,14 +117,14 @@ <h2>Techniques for Headings and Labels</h2>
<section id="sufficient">
<h3>Sufficient Techniques for Headings and Labels</h3>

<ol>
<ul>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G130" class="general">Providing descriptive headings</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G131" class="general">Providing descriptive labels</a>
</li>
</ol>
</ul>


<div class="note">
Expand Down
4 changes: 2 additions & 2 deletions understanding/20/use-of-color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ <h2>Intent of Use of Color</h2>

<p>Most user agents provide users with a color-only cue that a link has been previously activated by them ("visited"). However, several technical constraints result in authors having very limited control over these color-only indications of visited links. The technical constraints are as follows:</p>

<ol>
<ul>
<li>
User agents constrain the exposure of a link's visited state due to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector">privacy concerns</a>. Author queries to user agents will indicate all links have not been visited.
</li>
Expand All @@ -119,7 +119,7 @@ <h2>Intent of Use of Color</h2>
Authors also cannot set the visited state of links. The anchor element does not include a "visited" attribute; therefore the author has no ability to alter the state through an attribute setting. As such, authors cannot achieve <a href="info-and-relationships">1.3.1 Info and Relationships</a> or
<a href="name-role-value">4.1.2 Name, Role, Value</a> in regard to visited links.
</li>
</ol>
</ul>

<p>For these reasons, setting or conveying a link's visited status is not an author responsibility. Where color alone distinguishes between visited and unvisited links, it does not result in a failure of this Success Criterion, even where the contrast between the two link colors is below 3:1. Note that authors must continue to ensure that all text links meet contrast minimums against the page background (SC 1.4.3).</p>
</div>
Expand Down
49 changes: 24 additions & 25 deletions understanding/21/content-on-hover-or-focus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,16 @@ <h2>In brief</h2>
<dt>What to do</dt><dd>If hover or focus causes content changes, ensure interaction is predictable.</dd>
<dt>Why it's important</dt><dd>Unpredictable temporary content can be hard for some to consume and may disrupt others.</dd>
</dl>

</section>

<section id="intent">
<h2>Intent</h2>
<p>Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include:</p>
<ol>
<li>the user may not have intended to trigger the interaction</li>
<li>the user may not know new content has appeared</li>
<li>the new content may intefere with a user's ability to do a task</li>
</ol>
<ul>
<li>the user may not have intended to trigger the interaction</li>
<li>the user may not know new content has appeared</li>
<li>the new content may intefere with a user's ability to do a task</li>
</ul>

<p>Examples of such interactions can include custom tooltips, sub-menus and other nonmodal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:</p>
<ul>
Expand All @@ -45,10 +44,10 @@ <h2>Intent</h2>
<h3>Dismissable</h3>
<p>The intent of this condition is to ensure that the additional content does not interfere with viewing or operating the page's original content. When magnified, the portion of the page visible in the viewport can be significantly reduced. Mouse users frequently move the pointer to pan the magnified viewport and display another portion of the screen. However, almost the entire portion of the page visible in this restricted viewport may trigger the additional content, making it difficult for a user to pan without re-triggering the content. A keyboard means of dismissing the additional content provides a workaround.</p>
<p>Alternatively, low vision users who can only navigate via the keyboard do not want the small area of their magnified viewport cluttered with hover text. They need a keyboard method of dismissing something that is obscuring the current focal area.</p>
<p>Two methods may be used to satisfy this condition and prevent such interference:</p>
<p>Two methods may be used to satisfy this condition and prevent such interference:</p>
<ol>
<li>Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.</li>
<li>Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.</li>
<li>Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.</li>
<li>Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.</li>
</ol>
<p>For most triggers of relatively small size, it is desirable for both methods to be implemented. If the trigger is large, noticing the additional content may be of concern if it appears away from the trigger. In those cases, only the second method may be appropriate.</p>
<p>The success criterion allows for input error messages to persist as there are cases that require attention, explicit confirmation or remedial action.</p>
Expand All @@ -62,34 +61,34 @@ <h3>Hoverable</h3>
<h3>Persistent</h3>
<p>The intent of this condition is to ensure users have adequate time to perceive the additional content after it becomes visible. Users with disabilities may require more time for many reasons, such as to change magnification, move the pointer, or simply to bring the new content into their visual field. Once it appears, the content should remain visible until:</p>
<ul>
<li>The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;</li>
<li>The user dismisses the additional content via the mechanism provided to satisfy the Dismissable condition; or</li>
<li>The information conveyed by the additional content becomes invalid, such as a 'busy' message that is no longer valid.</li>
<li>The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;</li>
<li>The user dismisses the additional content via the mechanism provided to satisfy the Dismissable condition; or</li>
<li>The information conveyed by the additional content becomes invalid, such as a 'busy' message that is no longer valid.</li>
</ul>
</section>
<section>
<h3>Additional Notes</h3>
<ul>
<li>This criterion does not attempt to solve such issues when the appearance of the additional content is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the <code>title</code>  attribute in HTML as a small tooltip.</li>
<li>Modal dialogs are out of scope for this criterion because they must take keyboard focus and thus should not appear on hover or focus. Refer to <a href="https://www.w3.org/TR/WCAG21/#on-focus">Success Criterion 3.2.1, On Focus</a>.</li>
<li>Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus. Refer to <a href="https://www.w3.org/TR/WCAG21/#keyboard">Success Criterion 2.1.1, Keyboard</a>.</li>
<li>This criterion does not attempt to solve such issues when the appearance of the additional content is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the <code>title</code>  attribute in HTML as a small tooltip.</li>
<li>Modal dialogs are out of scope for this criterion because they must take keyboard focus and thus should not appear on hover or focus. Refer to <a href="https://www.w3.org/TR/WCAG21/#on-focus">Success Criterion 3.2.1, On Focus</a>.</li>
<li>Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus. Refer to <a href="https://www.w3.org/TR/WCAG21/#keyboard">Success Criterion 2.1.1, Keyboard</a>.</li>
</ul>
</section>
</section>
<section id="benefits">

<section id="benefits">
<h2>Benefits</h2>
<ul>
<li>Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification.</li>
<li>Users who increase the size of mouse cursors via platform settings or assistive technology will be able to employ a technique to view obscured content on hover.</li>
<li>Users with low vision or cognitive disabilities will have adequate time to perceive additional content appearing on hover or focus and to view the trigger content with less distraction.</li>
<li>users with low pointer accuracy will be able to more easily dismiss unintentionally-triggered additional content</li>
<li>Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification.</li>
<li>Users who increase the size of mouse cursors via platform settings or assistive technology will be able to employ a technique to view obscured content on hover.</li>
<li>Users with low vision or cognitive disabilities will have adequate time to perceive additional content appearing on hover or focus and to view the trigger content with less distraction.</li>
<li>users with low pointer accuracy will be able to more easily dismiss unintentionally-triggered additional content</li>
</ul>
</section>

<section id="examples">
<h2>Examples</h2>

<section class="example">
<h3>Example 1: Dismissable Tooltip</h3>
<figure id="figure-mouse-tooltip-below">
Expand All @@ -102,7 +101,7 @@ <h3>Example 1: Dismissable Tooltip</h3>
<figcaption>The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.</figcaption>
</figure>
</section>

<section class="example">
<h3>Example 2: Hoverable Tooltip</h3>
<figure id="figure-large-pointer-tooltip">
Expand All @@ -119,7 +118,7 @@ <h2>Resources</h2>
<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/">Tooltip design described in WAI-ARIA Authoring Practices</a></li>
</ul>
</section>

<section id="techniques">
<h2>Techniques</h2>
<section id="sufficient">
Expand Down
4 changes: 2 additions & 2 deletions understanding/21/interruptions-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ <h1>Understanding Interruptions (Minimum)</h1>
<h2>Intent</h2>
<p>The intent of this Success Criterion is to avoid interrupting users during their interaction with a Web page. When users are distracted, especially users with impaired attention or memory, they may forget what they were doing and abandon the task. This can happen even when the original task is extremely important.</p>
<p>Where a site may generate interruptions, the user must be able to postpone or suppress them, such that: </p>
<ol>
<ul>
<li>Popups and other interruptions can be easily delayed or turned off [Editor: do we need a definition for popup?]</li>
<li>Media events can be easily delayed or turned off [Editor: how is this different from Pause, Hide, Stop?]</li>
<li>Chat functions can be easily turned off and on again </li>
<li>Non-critical messages can easily be turned off and on again </li>
</ol>
</ul>
<p>Changes in content that are not initiated by the user must be avoided. Secondary content (such as special offers or complementary material) should be easily identified, controlled and turned off.</p>
<p>Other potential distractions are covered by existing WCAG Success Criteria <a href="pause-stop-hide" class="sc">Pause, Stop, Hide</a>, <a href="audio-control" class="sc">Audio Control</a>, <a href="three-flashes-or-below-threshold" class="sc">Three Flashes or Below Threshold</a>, <a href="low-or-no-background-audio" class="sc">Low or No Background Audio</a>, <a href="timing-adjustable" class="sc">Timing Adjustable</a>. These success criteria are aimed at specific considerations which can have repercussions on certain user groups, but also have a broader effect of reducing distractions for all users.</p>

Expand Down
Loading