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

carousel Example with buttons for slide control: Improve High Contrast Support and implementation of APG Programming Practices #1387

Merged
merged 34 commits into from
Sep 4, 2020
Merged

carousel Example with buttons for slide control: Improve High Contrast Support and implementation of APG Programming Practices #1387

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
886f78f
update previous next carousel example with latest features
jongund Apr 18, 2020
5e60cd9
update previous next carousel example with latest features
jongund Apr 18, 2020
85a8b2a
added test file for carousel-1-prev-next.html example
jongund Apr 18, 2020
3e2f131
added height to control block
jongund Apr 19, 2020
7df9d63
edited some of the documentation
jongund Apr 20, 2020
b5deba4
updated CSS and documentation
jongund Apr 20, 2020
3b9cc55
removed old example files
jongund Apr 20, 2020
17ef611
added link to tablist carousel example
jongund Apr 20, 2020
57f53f2
fixed liniting bug and removed old test file
jongund Apr 20, 2020
01e3635
updated checkbox options
jongund Apr 21, 2020
e661372
harmonized the example with the features of the tablist carousel example
jongund Apr 22, 2020
62cf2da
updated checkbox documentation
jongund Apr 28, 2020
008974a
Merge branch 'master' into update-carousel-previous-next
jongund May 6, 2020
04a839f
merged in changes to master and added use strict
jongund Jul 6, 2020
1b6d807
Merge branch 'master' into update-carousel-previous-next
jongund Jul 14, 2020
dd391bc
Merge branch 'master' into update-carousel-previous-next
jongund Jul 20, 2020
a456137
Merge branch 'master' into update-carousel-previous-next
mcking65 Aug 7, 2020
eec5798
Merge branch 'master' into update-carousel-previous-next
mcking65 Aug 19, 2020
b810067
Minor revision to title for consistency
mcking65 Aug 19, 2020
71ed009
Editorial revision to link and description for tabbed carousel
mcking65 Aug 19, 2020
a678ea6
Editorial revision to description
mcking65 Aug 19, 2020
1d0bac2
Remove q elements that are not used for semantic quote
mcking65 Aug 19, 2020
d2520dc
Minor editorial revisions to accessibility features
mcking65 Aug 19, 2020
b4e45e8
Merge branch 'master' into update-carousel-previous-next
jongund Aug 21, 2020
6332e2f
cleaned up rotation control code
jongund Aug 21, 2020
d206999
Merge branch 'master' into update-carousel-previous-next
jongund Aug 22, 2020
b4d9d11
improved naming of one property and event handler
jongund Aug 22, 2020
9baeb49
Editorial nits fixed in both carousel-1 and carousel-2
carmacleod Aug 25, 2020
8312c64
Merge branch 'master' into update-carousel-previous-next
jongund Aug 26, 2020
85ebb92
Updated documentation for rotation control
jongund Aug 26, 2020
9e68d9c
added an edit to documentation for the tablist carousel
jongund Aug 26, 2020
3413732
updated documentation
jongund Aug 26, 2020
bdfee75
updated documentation
jongund Aug 26, 2020
8a3f9d6
Merge branch 'master' into update-carousel-previous-next
mcking65 Sep 4, 2020
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
87 changes: 53 additions & 34 deletions examples/carousel/carousel-1.html → examples/carousel/carousel-1-prev-next.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Auto-Rotating Image Carousel Example | WAI-ARIA Authoring Practices 1.2</title>
<title>Auto-Rotating Image Carousel Example with Buttons for Slide Control | WAI-ARIA Authoring Practices 1.2</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
Expand All @@ -11,20 +11,9 @@
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<!-- js and css for this example. -->
<script type="text/javascript">
var stylesheet = 'css/carousel-1.css';
if (location.href.indexOf('moreaccessible') > 0) {
console.log('loaded more accessible');
stylesheet = 'css/carousel-1-more-accessible.css';
}
document.write('<link rel="stylesheet" type="text/css" href="' + stylesheet + '">')
</script>

<script src="js/carousel.js" type="text/javascript"></script>
<script src="js/carouselItem.js" type="text/javascript"></script>
<script src="js/carouselButtons.js" type="text/javascript"></script>
<script src="js/pauseButton.js" type="text/javascript"></script>
<!-- CSS and JS for this example -->
<link rel="stylesheet" href="css/carousel-prev-next.css">
<script src="js/carousel-prev-next.js" type="text/javascript"></script>

</head>
<body>
Expand All @@ -37,21 +26,46 @@
</ul>
</nav>
<main>
<h1>Auto-Rotating Image Carousel Example</h1>
<h1>Auto-Rotating Image Carousel Example with Buttons for Slide Control</h1>
<p>
The following example implementation of the
<a href="../../#carousel">carousel design pattern</a>
demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
For instance, rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content.
For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
The accessibility features section that follows the example describes these features in detail.
</p>

<p>Similar examples include:</p>
<ul>
<li><a href="carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control:</a> An image carousel that demonstrates accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with a set of tabs.</li>
</ul>

<section>
<h2>Example View Options</h2>
<ul>
<li><a href="carousel-1.html">Carousel controls and captions displayed on image</a>: This option is less accessible than the other option because the controls are harder to perceive and captions are more difficult to read with rotating images behind them.</li>
<li><a href="carousel-1.html?moreaccessible">Carousel controls and captions displayed above and below the image</a>: This option is preferable because controls and captions are easier to perceive.</li>
</ul>
<h2>Example Options</h2>

<fieldset class="carousel-options">
<legend>Carousel View and Behavior Options</legend>

<label for="accessible-controls">
<input type="checkbox" id="accessible-controls" value="moreaccessible" aria-describedby="accessible-controls-desc">
Display controls and captions outside of image
</label>
<p id="accessible-controls-desc">This option is more accessible than rendering controls and captions within the image, because controls are easier to perceive and captions are easier to read without rotating images behind them.</p>

<label for="rotation-paused">
<input type="checkbox" id="rotation-paused" value="paused" aria-describedby="rotation-paused-desc">
Pause auto-rotation on load (<a href="javascript:history.go(0)"><img class="reload" src="images/reload-icon.png" alt="">reload needed</a>)
</label>
<p id="rotation-paused-desc">This option controls whether the carousel is paused or playing on page load. The paused option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation, but allows users to start auto-rotation using the start/stop button.</p>
<p>Note: If the user has chosen reduced motion in system settings, auto-rotation will always be paused on load.</p>

<label for="rotation-disabled">
<input type="checkbox" id="rotation-disabled" value="norotate" aria-describedby="rotation-disabled-desc">
Disable auto-rotation
</label>
<p id="rotation-disabled-desc">This option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation by disabling the auto-rotation feature and removing the start/stop button from the user interface. Users can use the previous and next buttons to manually navigate through the slides.</p>
</fieldset>

</section>

<section>
Expand Down Expand Up @@ -196,7 +210,9 @@ <h3>
<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="5 of 6">

<div class="carousel-image">
<a href="#">
<img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel."/>
</a>
</div>

<div class="carousel-caption">
Expand Down Expand Up @@ -259,6 +275,9 @@ <h3>Controlling Automatic Slide Rotation</h3>
</p>
<p>This example includes the following features for giving users control over slide rotation:</p>
<ul>
<li>
If operating system preferences have been set for reduced motion or disabling animations, the auto-rotation is initially paused.
</li>
<li>
Hovering the mouse over any carousel content pauses automatic rotation.
Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus, that prevents rotation has been triggered.
Expand All @@ -271,25 +290,28 @@ <h3>Controlling Automatic Slide Rotation</h3>
<ul>
<li>The rotation control button is the first element in the screen reader reading order.</li>
<li>The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.</li>
<li>If the carousel is rotating, its accessible name is <q>Stop Automatic Slide Show</q>, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
<li>If the carousel is not rotating, the accessible name of the button is <q>Start Automatic Slide Show</q>.</li>
<li>If the carousel is rotating, its accessible name is &quot;Stop Automatic Slide Show&quot;, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
<li>If the carousel is not rotating, the accessible name of the button is &quot;Start Automatic Slide Show&quot;.</li>
<li>If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.</li>
<li>If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.</li>
</ul>
</li>
</ul>
<h3>Color Contrast of Text and Rotation Controls</h3>
<p>
In the view of this carousel where the controls and captions are displayed on top of the image, the background images can cause color contrast for the controls and text to become insufficient.
This view includes the following features to meet WCAG 2.1 color contrast requirements:
In the view of this carousel where the controls and captions are displayed inside the image, background images could cause color contrast for the controls and text to become insufficient.
However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements:
</p>
<ul>
<li>
When the rotation control, next slide, and previous slide buttons are rendered on top of the carousel images, the buttons have foreground and background colors that meet WCAG 2.1 color contrast requirements.
When the rotation control, next slide, and previous slide buttons are rendered within the image, the buttons have foreground and background colors that meet WCAG 2.1 color contrast requirements.
In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus.
</li>
<li>The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.</li>
</ul>

<p>One way to avoid the color contrast issues caused by displaying controls and text within the images is to position the controls outside the image. Displaying the controls and text on a solid background makes it easier to control color contrast. One of the view options provides an example of this technique.</p>

<h3>Screen Reader Announcement of Slide Changes</h3>
<p>
When automatic rotation is turned off, the carousel slide content is included in a live region.
Expand Down Expand Up @@ -405,7 +427,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<tr data-test-id="carousel-aria-live">
<td></td>
<th scope="row">
<code>aria-live=<q>off</q></code>
<code>aria-live="off"</code>
</th>
<td>
<code>div.carousel-items</code>
Expand All @@ -421,7 +443,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<tr data-test-id="carousel-aria-live">
<td></td>
<th scope="row">
<code>aria-live=<q>polite</q></code>
<code>aria-live="polite"</code>
</th>
<td>
<code>div.carousel-items</code>
Expand Down Expand Up @@ -511,11 +533,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>CSS: <a href="css/carousel-1.css" type="text/css">carousel-1.css</a></li>
<li>Javascript: <a href="js/carousel.js" type="text/javascript">carousel.js</a></li>
<li>Javascript: <a href="js/carouselItem.js" type="text/javascript">carouselItem.js</a></li>
<li>Javascript: <a href="js/carouselButtons.js" type="text/javascript">carouselButtons.js</a></li>
<li>Javascript: <a href="js/pauseButton.js" type="text/javascript">pauseButton.js</a></li>
<li>CSS: <a href="css/carousel-prev-next.css" type="text/css">carousel-prev-next.css</a></li>
<li>Javascript: <a href="js/carousel-prev-next.js" type="text/javascript">carousel-prev-next.js</a></li>
</ul>
</section>

Expand Down
185 changes: 0 additions & 185 deletions examples/carousel/css/carousel-1-more-accessible.css
View file
Open in desktop

This file was deleted.

Loading