WCAG 2.1 Implementations

From WCAG WG


The WCAG CR Evaluator tool is available now, please add implementations there, this page is now only useful as an archive.

Exit Criteria:

https://www.w3.org/TR/WCAG21/#exit-criteria

Full Site Conformance

Sites demonstrating conformance to WCAG 2.1:

At AA (8 needed):

  1. Knowbilty wants to make their knowability.org WCAG 2.1 compliant. Glenda spoke to Sharron, Eric Eggert & Robert Jolly. So, assuming their redesign stays on schedule and they don't hit any major glitches with WCAG 2.1 compliance...knowbility.org will be a WCAG 2.1 A/AA implementation example!
  2. Nomensa.com (excluding /blog). After an intial assessment there are three fairly easy issues to fix which should be done soon. The blog will be updated to meet WCAG 2.1, but it's on a different system and may not be done in time.
  3. Athena-ICT (hopefuly)
  4. Possible consider a previous year's OpenAIR winner, like this Austin German Shepherd Dog Rescue site. Currently living at http://gqh.edg.mybluehost.me/sitemap (and it is likely moving to a real URL soon). I assume we will need volunteers to make changes to get this site fully WCAG 2.1 compliant. I was just thinking small sites.

At AAA (2 needed):

  1. lflegal.com (Added to implementation page)
  2. http://accessibility.athena-ict.com/ (backup)

Individual SC Implementations

Level A

2.4.11 Character Key Shortcuts

Sites demonstrating successful implementation of this SC:

  • Gmail (character-key shortcuts are not alternate controls, but can be changed by the user) [@added to WCAG implementations by Josh]
  • WordPress (character-key shortcuts for comments are alternate controls that can be switched off by the user)[@added to WCAG implementations by Josh]

Examples of problem

Techniques proposed:

2.4.12 Label in Name

Sites demonstrating successful implementation of this SC:

  • Jake will find 2-3 example sites - Mike Gower can confirm [@Pinged by Josh looking for same 1/3/2018]
  • David MacDonald says Google home page is excellent passing example [@added to WCAG implementations by Josh]

PASS

Accessible matches Visible. The visible and accessible name of a label match

  • www.Google.com search field. Visible label is the button "Google Search" and ACCNAME is aria-label="Search"
  • Gov.UK passes this. There is a visible placeholder with the text 'Search Gov.Uk". The accessible label is provided by
<label for="search-main-fa033226" class="search-label">
    Search GOV.UK
  </label>

NOTE: The placeholder does disappear on focus so this placeholder label is not always visible but essentially this search control does pass this SC.

TEXT

  • http://www.bbc.com/ => all links in top menu and in doormat match [@added to WCAG implementations by Josh]
  • https://www.nytimes.com/ => all links in top menu and in doormat match [@added to WCAG implementations by Josh]

IMAGES OF TEXT

  • https://www.microsoft.com/en-us => Logo top left has name "Microsoft" [@added to WCAG implementations by Josh]
  • https://www.netflix.com/ => Logo top left has name "Netflix" [@added to WCAG implementations by Josh]
  • https://www.uber.com/en-NL/ => Below doormat the 3 app stores logo's have a title attribute with same text (except the Apple one, it has one word different) [@added to WCAG implementations by Josh]

Accessible starts with Visible. The accessible name begins with the visible label.

TEXT

  • https://www.google.com => when opening top right menu (3x3 squares), on bottom is "More" link and name is "More Google apps" [@added to WCAG implementations by Josh]

IMAGES OF TEXT

  • https://www.deque.com/ => The 'banner links' with "More information here" and "Get the free Download" start with visible text supplemented with additional info [@added to WCAG implementations by Josh]

FAIL

Accessible matches Visible. The visible and accessible name of a label match

TEXT

  • https://www.wikipedia.org => Search field has language dropdown with text "EN" but has name "English" (or other language when selected)


IMAGES OF TEXT

Techniques proposed:

2.5.1 Pointer Gestures

Sites demonstrating successful implementation of this SC:

  1. indiatimes.com (video of interaction on iPhone). The India times.com start page (8. February 2018) has a horizontal slider which can be moved with a one-finger swipe gesture. There are arrow buttons to the left and right of the slider which allow advancing the content with a single finger tap. So this would pass SC 2.5.1 Pointer Gestures. [@added to WCAG implementations by Josh]
  2. Ebay.com Start Page (video of interaction on Android smartphone). The Ebay start page (8. February 2018) has a content slider which can be moved with a one finger swipe gesture. There is alternative in one arrow button on top of the slider which leads to another page which has the same content as a slider. Arguably, this would pass SC 2.5.1 Pointer Gestures since a single finger tap accesses an equivalent alternative. [@added to WCAG implementations by Josh]
  3. Walmart.com start page (video of interaction on Android Smartphone). The Walmart homepage (8.February 2018) has a horizontal slider which can be moved with a one finger gesture. There are dots below the slider which allow setting the position of the slider through a single finger tap, So the would pass SC 2.5.1 Pointer Gestures. [@added to WCAG implementations by Josh]
  4. bol.com price slider (video of interacton on iPhone) The bol.com shopping site (7 March 2018) has a price filter implemented as slider with lower and upper price bracket boundary thumbs. The video shows an interaction where a drag gesture changes the position of the lower slider thumb, and the filter results are updated accordingly. Immediately after, it shows that the setting can be made by single point activation gestures, tapping the field for the lower price boundary, then typing '0' via the on-screen keyboard, and finally "fertig" (done). This will update the slider and accordingly, the filter results.

Sites demonstrating a failure of meeting this SC:

  1. Guardian.co.uk start page (video of trackpad interaction on MacBook pro). The Guardian homepage (8. February 2018) has a slider element with videos which can be moved with a two-finger swipe gesture on the trackpad (MacBook pro OS X 10.11.6) (one-finger swipe on iPhone with iOS 11 ) There is no alternative to move the slider content so this would fail SC 2.5.1 Pointer Gestures.
  2. Drag-and-Drop example (video of interaction on iPhone). The Drag-and-drop example by Marco Jacob (recorded 8. February 2018) shows how file icons are dragged to a waste basket to delete the files. There is no single tap alternative for deletion, so this would fail SC 2.5.1 Pointer Gestures.
  3. North2.net Drag-and-drop (video of interaction) In the section "About us", the design agency north2.net (9. February 2018) uses drag-and-drop to select members of staff (video shows desktop interaction in Windows / Firefox - the drag-and-drop functionality is not presented on a smartphone). On the desktop, there seems to be no other way to select staff so this would fail SC 2.5.1 Pointer Gestures.

Techniques proposed:

2.5.2 Pointer Cancellation

Sites demonstrating successful implementation of this SC:

(David MacDonald)

(Detlev)

  • react-beautiful-dnd.netlify.com. Drag-and-drop implementation (desktop). Releasing the (pseudo)-list item picked on mouseDown outside the drop target - the (pseudo)-list - makes it jump back to the old position. Note that while this would meet 2.5.2 it seems to fail 2.1.1 Keyboard as items in the example apparently cannot be moved with keys and there is no alternative sorting mechanism. [@added to WCAG implementations by Josh]

Techniques proposed:

  • Using standard HTML buttons and links (all standard interactive elements in HTML are on the up event)
  • Activating a control using the up-Event
  • Ensuring that drag-and-drop gestures can be cancelled
  • Using JavaScript "onkeyup" and "onmouseup" attributes to activate controls.

2.6.1 Motion Actuation

Sites demonstrating successful implementation of this SC:

  1. Web form pasting, Shake-to-undo (video of interaction on iPhone). After pasting an account number into the text input field of a library web app (buecherhallen.de, 9. February 2018), shaking the iPhone brings up a dialog to confirm or cancel the undo action. ‘Shake to undo’ input can be disabled in the OS settings, so this would meet SC 2.6.1 Motion Actuation. [@added to WCAG implementations by Josh]

Sites demonstrating failure of conforming to this SC:

  1. Regnskogfondet move-device-to-pan (video of interaction). The site rainforest.arkivert.no (9. February 2018) pans an interactive panorama when the user moves the device in a 360 degrees circle. There is no other way to pan the panorama to reach the embedded circular image links, so this would fail SC 2.6.1 Motion Actuation. [@added to WCAG implementations by Josh]
  • Kathy will check notes

Techniques proposed:

Level AA

1.3.4 Identify Common Purpose

Sites demonstrating successful implementation of this SC:

  • Athena ICT will conform as well [@@Josh has requested suitable URI]

Techniques proposed:

1.4.10 Reflow

Sites demonstrating successful implementation of this SC:

Techniques proposed:

1.4.11 Non-Text Contrast

Sites demonstrating successful implementation of this SC: Glenda volunteered to find examples

  1. State Farm https://www.statefarm.com/ [@@ added to evaluations tool by Josh]
    1. Graphical Objects - icons
    2. Visual Focus Indicators
  2. Accessibility at Penn State | Charts & Accessibility - http://accessibility.psu.edu/images/charts/ [@@ added to evaluations tool by Josh]
    1. Graphical Objects - charts/graphs
  3. GitHub Contributions Chart | Adrian Roselli - http://adrianroselli.com/2018/02/github-contributions-chart.html [@@ added to evaluations tool by Josh]
    1. Graphical Objects - charts/graphs (in codepen section on this page, select the "change fill" checkbox and watch the color contrast change from inaccessible to accessible!
  4. Deque University https://dequeuniversity.com [@@ added to evaluations tool by Josh]
    1. Graphical Objects - icons
    2. Visual Focus Indicators
    3. User Interface Components
  5. MicroAssist Complex Charts/Graphs
    1. Viral Load Results - https://www.microassist.com/project/viral-load-changes-hiv/ [@@ added to evaluations tool by Josh]
    2. CD4 and CD8 Cell Counts - https://www.microassist.com/project/cd4-and-cd8-cell-counts/ [@@ added to evaluations tool by Josh]

Techniques proposed:

1.4.12 Text Spacing

  1. Google / 1.4.12 Text Spacing - (Google added to WCAG implementations by Laura)
  2. Adobe Mega Menu / 1.4.12 Text Spacing - (Adobe Mega Menu added to WCAG implementations by Laura)
  3. Wikipedia Main Page / 1.4.12 Text Spacing - (Wikipedia added to WCAG implementations by Laura)

Technique used for 1-3 above:

Results of 67 pages were tested between July 25 and August 3, 2017:

Techniques proposed:

1.4.13 Content on Hover or Focus

Sites demonstrating successful implementation of this SC:

Techniques proposed:

  • ARIA: Using role="tooltip"
  • CSS: Using hover and focus pseudo classes

2.6.2 Orientation

Sites demonstrating successful implementation of this SC:

Marc Johlic

Techniques proposed:

  • Failure: Locking the viewport via CSS / JS

3.2.6 Status Changes

Sites demonstrating successful implementation of this SC:

Shopping Bag status message is a number beside the shopping bag. JAWS announces the number of items as it changes.

Search input on the home page (top right) Type in a keyword and press Enter. Screen reader announces "Searched for [term]. Your search returned x results."

Techniques proposed:

  • Using aria-live regions to announce status messages to screen readers.
  • Using aria-live region roles to announce status messages to screen readers.

Level AAA

1.3.5 Identify Purpose

Sites demonstrating successful implementation of this SC:

Techniques proposed:

2.2.6 Timeouts

Sites demonstrating successful implementation of this SC:

  • Need to review how we tested this in 2.0

Mike Gower - Began by testing airlines without logging in. To date, findings are that warnings about timeouts are not surfaced at all on some sites, and on others only when they are essentially just meeting 2.2.1 Timing Adjustable. Because the SC removed the language to warn the user 'at or before' the initiation of a timer, the requirement to warn users does not seem to add any concrete additional requirement beyond 2.2.1, and so may be met by it automatically.

Typical process

search for dates, choose flights, confirm selection/add to cart, proceed to check out, continue as Guest. Look for notification of time limit. Enter passenger information, stop at payment screen. Look for notification of time limit and wait for system to time out.

Airlines Tested:

Air Canada: no notice at start of activity, no notice until session timeout. (When signed in, after 15 minutes of inactivity, a 2 minute prompt to Extend your session appears. It is only necessary to 'keep working' to reset the timeout.) There is no requirement for me to acknowledge before timing out, or an ability to save the data. Possible 2.2.1 and 2.2.6 failure

Alaska Airlines: same findings. Possible 2.2.1 and 2.2.6 failure

West Jet: no apparent timeout, even after reaching the payment choice. (Last checked after 18 hours inactive.)

All FAIL Conclusion: May get different results by signing in? Could request others to test with their airline accounts.

Non-Airlines tested

Ticket Rocket (ticketrocket.co)

[@@ added to evaluations tool by Josh]

After selecting event tickets, I was prompted to sign in. A 10-minute countdown timer labelled "min left to purchase" was displayed immediately after signing in. Once the countdown reached zero, it remained on the page for about 30 seconds, then a notice appeared "You have no tickets reserved or your tickets time out."

PASS ** I believe ticketrocket.co can be used as a demonstration of passing 2.2.6. Note that it fails to meet 2.2.1 Timing Adjustable, but it may qualify as an Exception involving either Real-time or Essential language.

Ticketmaster (ticketmaster.com)

[@@ added to evaluations tool by Josh]

Ticket master has a series of Timeout notices that are sequential, discrete and task-based. Process is as follows:

  1. Without logging in, search for events and select one of interest.
  2. Dialog for event appears with default values of 2 tickets and set budget range per ticket. Press See tickets button
  3. Set selection screen appears. Choosing seat populates Your Tickets information, along with a Get Tickets button.
  4. Initiating Get Tickets button begins "securing your Verified Tickets" process, announced with overlay.
  5. Add to Order screen appears with 4 minute countdown in upper right corner, with text and visual display of remaining time. (Note: no ability to extend this time, given it is a 'real-time' transcation. Meets 2.2.1 exception.)
    1. If time runs out, dialog appears with title "Sorry...time's up" with message "The time limit gives all fans a fair shot at tickets" and a Try Again Now button.
    2. Pressing Try Again Now button returns to a ticket search for same production. So only thing not retained is time-based ticket selection.
  6. If Next button is chosen, a Delivery screen appears with a 5 minute timer.
    1. Same behaviour and return point as previous step if times out.
  7. If Next button is chosen, a dialog to "Login to Continue" appears. Countdown from prior screen is still visible and continues.
  8. After logging in, a Payment screen appears with a 7 minute timer to complete.
    1. Same behaviour with time out as previous.
  9. If payment is submitted but fails, user's information is retained and they are taken to a screen where they are given the option to attempt a purchase of the same seats again (with the proviso that the seats may not be still available).

PASS: Ticketmaster appears sufficient to pass 2.2.6. User data that is not time-based is retained. A failed payment transaction provides a fallback attempt to pay for same tickets again (although there is a proviso about the tickets potentially not being available.) Ticketmaster meets 2.2.1 through a real-time/essential exception.

Federal Student Aid (fafsa.ed.gov)

[@@ added to evaluations tool by Josh]

The FAFSA application process involves a session timer which is triggered as soon as the Start a New FAFSA button is selected. The user is taken to the login screen. Without entering any data, after 10 minutes, the following appears.

"You've left the session idle for 10 minutes. The current time is 08:14:05 AM. The session will expire at 08:19:05 AM. If you want to refresh the session for an additional 15 minutes, click "OK." If not, click "Cancel."

PASS:The user is given 5 minutes to respond to this message before the timeout takes place. Responding extends the timer for 15 minutes. Assuming the user encounters this timer consistently, the implementation effectively provides a means of increasing the timeout clock to 10 minutes between warnings after the first warning, and the mechanism appears to work indefinitely. Unable to confirm data retention, since I do not have the credentials to complete a login process. Like all examples found, it fails to notify users at the _start_ of the timing process, which should be a best practice, but is not required by SC language.

Amazon

[@@ added to evaluations tool by Josh]

After user browses a product, Amazon requires user to Add to Cart to proceed to Buying/Checkout processes. Data added to cart selections saved beyond 20 hours. User personal data (address, etc) saved to preferences is retained beyond 20 hours.

'PASS' Amazon is architected so that it does not appear to have any reliance on timeouts less than 20 hours. This may be a good technique to capture; however, it is not a good candidate to use as an implementation test site, since it meets through an 'exception'.

Techniques proposed:

2.2.7 Animation from Interactions

Definitely failing examples:

Sites demonstrating successful implementation of this SC:

1. On the iPhone photography how-to page, it changes if you have the reduced-motion preference set (Safari on OSX/iOS).

  • Video does not play automatically.
  • The changes on mouse-over take place (an image appears), but the background image does not zoom in gradually.

2. On the Apple Environment page the tilting solar panels animation (triggered by scrolling) does not take place with the reduce-motion preference turned on. NB: The green sun is still animated, but that is an in-place animation, not triggered by interaction. Several other animations are also stopped, including the packaging and materials panels.

Techniques proposed:

  • Using the reduced motion preference to prevent animation triggered by scrolling or other interactions.
  • Button to turn off animations triggered by scrolling.

2.5.3 Target Size

Sites demonstrating successful implementation of this SC:

Techniques proposed:

2.5.4 Concurrent Input Mechanisms

Sites demonstrating successful implementation of this SC:

  • http://earth.google.com, input methods can be changed seamlessly. User is able to switch from/to mouse, touch screen and keyboard.

Sites demonstrating passive implementation of this SC:

  • http://www.apple.com
  • Any web based Microsoft Sway presentation: The user has an option to engage an "Accessibility View" of the presentation. This stacks the presentation vertically, allowing the user to view the presentation by scrolling up and down the web page.

Techniques proposed:

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=WCAG_2.1_Implementations&oldid=9638"