General Information

About The Museum of Broken Things

This site is designed to demonstrate a wide range of accessibility failures, for teaching and assessment purposes.

Site Behavior

This site is an example only. Do not enter real information!

The contents are made up
The site is static; no data is retained by a server
No real shipping address or payment processing occurs
Registration and sign-in is not processed by a server, but it does function locally
- i.e., whatever email and password you most recently specified during registration will then work on the Sign In page
No cookies are stored, despite what the home page might suggest
Local storage is used for simulated persistence (e.g., for sign-in and the gift shop cart)

Visit the Museum of Broken Things

(Note: If the site is open in any other tabs, they will need to be reloaded)

Summary of failures

This section provides a breakdown of WCAG failures across the site.

Viewing the Home, About, and Help pages

1.1.1: Non-text Content: /about/#main: Images of text are used for headings, but the image has no accessible name / text equivalent.
1.2.5: Audio Description (Prerecorded): /#coming-soon-our-homes-exhibit: No spoken description is provided for the promotional video at the bottom of the home page.
1.3.1: Info and Relationships: /about/#opening-hours: The table's layout changes at smaller breakpoints, but the relevant ARIA attributes aren't also updated, resulting in incorrect relationships between the data.
Discussion item: Is using the ARIA grid role on a table of static content an issue?; /about/#travel-directions: The Travel Directions heading is marked up as a div with no ARIA role.
1.3.2: Meaningful Sequence: /: The overline text over each title in the carousel uses space characters between each letter.
Discussion item: For WCAG 3, this used to be filed under Unambiguous text, which no longer exists; is there a suitable alternative to fail it under?
1.4.3: Contrast (Minimum): /about/#opening-hours: The text in the table header cells has insufficent contrast.
1.4.4: Resize Text: /about/#main: The mission statement cuts off beyond a set maximum height, noticeable on mobile or when zoom is increased.
1.4.5: Images of Text: /about/#travel-directions: The Travel Directions "heading" is an image of text.
1.4.6: Contrast (Enhanced): /: The semi-transparent backdrop between the carousel text and background image is not always enough to guarantee sufficient contrast.; /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional
1.4.9: Images of Text (No Exception): /about/#travel-directions: The Travel Directions "heading" is an image of text.
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
1.4.12: Text Spacing: /about/#main: Heading text cannot be adjusted.
2.2.2: Pause, Stop, Hide: /: The carousel does not include controls to stop moving and updating.; /: The promotional video at the bottom of the home page loops infinitely and does not have controls to pause.
2.4.9: Link Purpose (Link Only): /about/#travel-directions: The "here" link under the Travel Directions heading is ambiguous.
Discussion item: Does this fail Name, role, value, state for WCAG 3?; /#main: The Read More and Explore link text does not provide enough information to know which links go where.
Discussion item: Do the Read More and Explore links fail Name, role, value, state under WCAG 3?
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
3.1.4: Abbreviations: /help/#main: The page references an acronym without ever including its expanded form.
4.1.2: Name, Role, Value: /about/#main: Images of text are used for headings, but the image has no accessible name / text equivalent.

Performing a search from any page, and viewing the search results

1.3.5: Identify Input Purpose: /: The search field has no label.
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
2.4.2: Page Titled: /search: The search result page title is not accurate.
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
3.2.2: On Input: /: The search box automatically performs the search and changes to the search page on a delay after input stops. No warning or instructions are provided.
3.3.1: Error Identification: /search: Empty search results and misspellings do not throw an error.
Discussion item: Do others agree with this failure?
4.1.2: Name, Role, Value: /: There is no search landmark or label indicating the presence or purpose of the search box.

Browsing the list of collections, the list of exhibits in a collection, and specific exhibit pages

Discussion items for this process:

Should emojis that are used as part of a span of text be hidden from assistive technology or have a suitable accessible name to aid in comprehension?
Is wrapping an animation in a prefers-reduced-motion media query sufficient for automatically animated content?
Is misusing CSS forced colors something that WCAG 3 needs to address?
Do WCAG 3's Adjust Color and/or AT Control have the same coverage as Section 508's and EN 301 549's User Preference requirement?

1.1.1: Non-text Content: /collections/dishes.md/#main: The exhibit images do not have alt text.; /collections/technology.md/#main: Some of the exhibit images lack alt text.; /early-home-computers-event/#bbc-microcomputer: The alternative text for the BBC Microcomputer image, "Wikipedia photo of a computer", doesn't specify what kind of computer it is.; /collections/sports/#main: The alt text on each entry's image repeats the entry's title, rather than describing the image.
1.3.1: Info and Relationships: /early-home-computers-event/#main: The second-level heading is a p element styled to look like a heading.
1.3.2: Meaningful Sequence: /early-home-computers-event/#zx81: The "About The Event" section and "ZX81" card display more content before the toggle controls, but don't manage the user's focus.
1.3.6: Identify Purpose: /collections/dishes/blue-dish/#main: The favorite toggle does not programmatically indicate that it accepts input.
1.4.4: Resize Text: /early-home-computers-event/#main: At 200% browser zoom, the page's h1 element doesn't double in size.
Discussion item: Should sticky content (e.g., headers and footers) take up a maximum amount of space when a user agent is zoomed in?
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional
1.4.8: Visual Presentation: /early-home-computers-event/#zx81: The text in the cards is justified.
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
1.4.11: Non-text Contrast: /collections/dishes/blue-dish/#main: The favorite icon uses a color that does not always maintain sufficient contrast with the background (see old clay jug).; /early-home-computers-event/#zx81: The links in the small text in the cards are the same color as non-link text and have underlines that have a contrast of less than 3:1 with the page background.
Discussion item: Does this fail WCAG 3 Control contrast? If not, what requirement does it fail?; /early-home-computers-event/#zx81: Scrollbar color contrast is less than 3:1 in browsers that support styling scrollbars.
Discussion item: Does this fail WCAG 3 Control contrast? If not, what requirement does it fail?
1.4.13: Content on Hover or Focus: /collections/#main: The text displayed over collection images upon hover can't be dismissed without moving the pointer.
2.1.1: Keyboard: /collections/dishes/blue-dish/#main: The favorites marker is not accessible via keyboard.; /collections/#main: The text label on each collection's link only becomes visible on hover (not focus).
2.2.2: Pause, Stop, Hide: /collections/#main: The scrolling banner for the PC event lasts for eight seconds.
Discussion item: The scrolling content is only visible for four seconds, so does this fail or not?
2.2.3: No Timing: /collections/dishes/blue-dish/#main: The toast displayed when the favorite state is toggled contains an undo button, but the toast disappears in a few seconds, giving the user limited time to interact.
2.3.1: Three Flashes or Below Threshold (Photosensitivity warning): /collections/home/#main: The image thumbnails in the exhibit list on this page flash 4 times within a one-second period.
2.3.2: Three Flashes (Photosensitivity warning): /collections/home/#main: The image thumbnails in the exhibit list on this page flash 4 times within a one-second period.
2.3.3: Animation from Interactions: /collections/home/#main: Each individual exhibit page under the Home collection includes a parallax effect on the background image.
Discussion item: Does this fail WCAG 3 No visual motion or not? It only lasts for more than 5 seconds if the user scrolls continuously for that long...
2.4.3: Focus Order: /collections/#main: The collection links have explicit tabindex attributes, causing them to come before anything else in the page.; /collections/#main: The links in the "See More" section are not included in the explicit order, meaning focus tabs to each collection link, then header items, then the "See More" links, then the footer.; /collections/#main: The explicit tab order is optimized specifically for the widest layout, making it incorrect even within the collections list on narrower viewports.
2.4.4: Link Purpose (In Context): /collections/music/#main: The purpose of each entry's link is unclear because its image (with alt text) is also included within the link, preceding its title.
2.4.7: Focus Visible: /early-home-computers-event/#main: Focus indicators are made with box-shadow, which isn't supported in Windows High-Contrast / Contrast Themes mode, so there are no focus indicators for users who use that feature.; /early-home-computers-event/#zx-spectrum: The ZX Spectrum, BBC, and VIC-20 cards don't show a focus indicator when the focus moves to the revealed content.; /early-home-computers-event/#commodore-64: The Commodore 64 card shows a focus indicator for the whole card, even when only a specific child element is focused.
Discussion item: Does this fail any WCAG 3 requirement? (Focus is visible but placed incorrectly); /collections/sports/#main: There is no visible focus outline when a collection's image is focused.
2.4.9: Link Purpose (Link Only): /collections/music/#main: The purpose of each entry's link is unclear because its image (with alt text) is also included within the link, preceding its title.
2.4.10: Section Headings: /early-home-computers-event/#main: Headings jump from h1 to h4.; /collections/#main: The page doesn't have an H1.
Discussion item: For WCAG 3, is it more appropriate to fail this under Heading structure available or Sections labeled (or both)?; /collections/technology/#main: The page doesn't have an H1.
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
3.1.2: Language of Parts: /collections//#mainhome/narrow-room.md: The Narrow Room exhibit has non-English words that are not part of the vernacular marked up with an incorrect language code. It also includes non-English words that are part of the vernacular marked up as being in a foreign language.
3.1.5: Reading Level: /collections/dishes.md/#main: The Dishes collection has a reading level of upper secondary education with no alternative version.; /collections/glass.md/#main: The Glass collection has a reading level of advanced education with no alternative version.
3.2.3: Consistent Navigation: /collections/#main: The links that appear within the "See More" section within the main content are removed from the header navigation where they otherwise typically appear.
4.1.2: Name, Role, Value: /early-home-computers-event/#zx-spectrum: The ZX Spectrum additional content is in a focusable element with a role="group" attribute, but has no accessible name.

Viewing the list of blog posts, and reading individual blog entries

Discussion items for this process:

In the post titled 'Announcing the Addition of a New Wing', there is a pull quote from the subsequent paragraph, which appears two sentences later in the article. Should the pull quote be hidden from screen readers?

1.2.4: Captions (Live): /blog/live-event.md/#main: The topmost blog post contains a video element representing a live broadcast, which does not include any captions.
1.4.3: Contrast (Minimum): /blog/#main: The "Blog" heading is superimposed over an image with no overlay to guarantee minimum contrast.
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional; /blog/#main: The "Blog" heading is superimposed over an image with no overlay to guarantee minimum contrast.
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
1.4.13: Content on Hover or Focus: /blog/: In the top navigation bar, nested items open on keyboard focus and can only be dismissed by moving focus.
Discussion item: What does this fail under WCAG 3?
2.3.3: Animation from Interactions: /blog/#main: Images zoom in on hover and do not respect prefers-reduced-motion.
Discussion item: This does not fail No visual motion in WCAG 3 because of the "lasting longer than 5 seconds" condition
2.4.1: Bypass Blocks: /blog/: The "Skip to content" link does not work properly on the blog listing page.
Discussion item: What does this fail under WCAG 3?
2.4.4: Link Purpose (In Context): /blog/#main: Each post image, as well as the arrow on the topmost post, links to its post, but has no content to describe the link.
Discussion item: Does this fail Name, role, value, state under WCAG 3?
2.4.9: Link Purpose (Link Only): /blog/#main: Each post image, as well as the arrow on the topmost post, links to its post, but has no content to describe the link.
Discussion item: Does this fail Name, role, value, state under WCAG 3?
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.13: Focus Appearance: /blog/: In the top nav, links within submenus indicate focus by only a single border located equidistant from the text above and below it, making it ambiguous which item is focused. When the last item in a submenu is focused, the indicator has low contrast against the page background.
2.5.5: Target Size (Enhanced): /blog/#main: The link after the excerpt from the topmost post is smaller than 44 by 44 pixels.
Discussion item: Is there no target size requirement in WCAG 3 anymore?
3.3.1: Error Identification: /blog/exhibit-donation.md/#main: The first post under "In the News" leads to a 404 page with no clear description of what went wrong.
Discussion item: This doesn't seem quite right for WCAG 3's Error notifications available since it's not a user error?
4.1.2: Name, Role, Value: /blog/: In the top navigation bar, there is no programmatic indication of expandable items.

Browsing products in the Gift shop, adding products to cart, viewing/editing the cart, and completing the checkout process

1.4.3: Contrast (Minimum): /gift-shop/: The navigation bar content overflows its background on mobile viewports, making the cart link nearly invisible.; /gift-shop/#main: On the category listing page, text is superimposed over images with no overlay to guarantee minimum contrast.
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional; /gift-shop/: The navigation bar content overflows its background on mobile viewports, making the cart link nearly invisible.; /gift-shop/#main: On the category listing page, text is superimposed over images with no overlay to guarantee minimum contrast.
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
1.4.13: Content on Hover or Focus: /gift-shop/: In the top navigation bar, nested items open on hover and can only be dismissed by moving the pointer.
2.1.1: Keyboard: /gift-shop/: In the top navigation bar, parent items are not focusable (and therefore cannot be opened) via keyboard.
2.2.3: No Timing: /gift-shop/checkout/shipping/#main: Forms in the checkout process time out after an undisclosed period of time.
2.2.6: Timeouts: /gift-shop/checkout/payment/#main: There is a timeout on each checkout step that may be too short to enter required information.
2.4.4: Link Purpose (In Context): /gift-shop/: The cart link contains only an icon, with no text label explaining its purpose.
Discussion item: Does this fail Name, role, value, state under WCAG 3?
2.4.7: Focus Visible: /gift-shop/apparel/tshirt/#main: On product pages, the focus is not visible on the increment/decrement buttons that adjust the number of items.
2.4.9: Link Purpose (Link Only): /gift-shop/: The cart link contains only an icon, with no text label explaining its purpose.
Discussion item: Does this fail Name, role, value, state under WCAG 3?
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
3.2.3: Consistent Navigation: /gift-shop/: The Gift Shop link appears in the header on mobile viewports within gift shop pages, but does not appear there outside of the gift shop. It also does not appear in the footer on mobile.
3.2.6: Consistent Help: /gift-shop/#main: The help contact number is located above the site footer, as opposed to all other pages where it is inside the footer at the end.
3.3.1: Error Identification: /gift-shop/checkout/payment/#main: Errors in the payment form are not programmatically associated with the field that caused the failure.; /gift-shop/checkout/payment/#main: Errors in the payment form do not specifically describe what requirement was not met.
3.3.2: Labels or Instructions: /gift-shop/checkout/payment/#main: Fields in the payment form have no labels.; /gift-shop/checkout/payment/#main: The payment form does not provide any indication of accepted input formats.
Discussion item: Is there an equivalent under WCAG 3 that this would fail?
3.3.3: Error Suggestion: /gift-shop/checkout/payment/#main: The payment form does not suggest corrections for formatting errors.
3.3.4: Error Prevention (Legal, Financial, Data): /gift-shop/checkout/payment/#main: There is no confirmation step after entering payment information.
3.3.5: Help: /gift-shop/checkout/#main: No contextual help is available during the checkout process.
3.3.6: Error Prevention (All): /gift-shop/apparel/tshirt/#main: The quantity field uses type="tel", which allows non-numeric input, rather than the more appropriate type="number".; /gift-shop/checkout/payment/#main: There is no confirmation step after entering payment information.
4.1.2: Name, Role, Value: /gift-shop/: In the top navigation bar, there is no programmatic indication of expandable items.
4.1.3: Status Messages: /gift-shop/checkout/payment/#main: When the payment form becomes disabled, the toast that appears does not grab focus and is not announced.

Learning how to visit the museum by browsing the Museum Map and Take a Tour pages

1.1.1: Non-text Content: /map/#main: The arrow buttons over the map do not contain text labels.
1.2.3: Audio Description or Media Alternative (Prerecorded): /tour/#main: No audio description, nor media alternative, is provided to explain the non-narrated contents of the video at the top of the page.
1.2.5: Audio Description (Prerecorded): /tour/#main: No audio description, nor media alternative, is provided to explain the non-narrated contents of the video at the top of the page.
1.2.6: Sign Language (Prerecorded): /tour/#main: No sign language interpretation is provided for the prerecorded audio content in the video at the top of the page.
1.3.3: Sensory Characteristics: /map/#main: Instructions allude only to color when describing visible map controls, which is insufficient to disambiguate for colorblind users.
1.4.1: Use of Color: /map/#main: The map controls for zooming and panning vertically use the same icons, and are distinguished only by color.
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.; /map/#main: The controls disappear when magnified.
1.4.11: Non-text Contrast: /map/#main: The pin on the map uses a color that has extremely poor contrast against the map's colors.
Discussion item: Would this fail any WCAG 3 guideline? It is neither text nor a control.
2.1.4: Character Key Shortcuts: /map/#main: Single-character key bindings are implemented across the entire page for map movement, and cannot be turned off or customized.
2.2.4: Interruptions: /tour/#main: The time to next departure is called out every 15 seconds and cannot be turned off.
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.13: Focus Appearance: /map/#main: The map controls use a dotted focus outline with a color that falls well below 3:1 contrast against the underlying map.
2.5.1: Pointer Gestures: /map/#main: On mobile devices, the only way to zoom the map is via a pinch gesture.
3.2.3: Consistent Navigation: /tour/: The "Take a Tour" item is missing from the top nav on this page.

Filling out the volunteer form

1.1.1: Non-text Content: /register/#prove-youre-a-human: A CAPTCHA image is required and no text alternative is provided.
1.4.1: Use of Color: /register/#prove-youre-a-human: The focused state of the CAPTCHA field only affects its existing border, and does not have sufficient contrast against the unfocused state.
1.4.3: Contrast (Minimum): /volunteer/#main: The "did you mean" email prompt has insufficient contrast.
1.4.6: Contrast (Enhanced): /#footer: The text in the footer is lower contrast and smaller size.
Discussion item: This break is actually site-wide and maybe not intentional; /volunteer/#main: The "did you mean" email prompt has insufficient contrast.
1.4.10: Reflow: /: When zoomed, the header text moves off the background.; /: At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
2.2.3: No Timing: /volunteer/#main: The toast that appears when the timeout lapses disappears after a few seconds, and this cannot be prevented.
2.2.6: Timeouts: /volunteer/#main: The form becomes unsubmittable after a short time period, which is not disclosed in advance and cannot be adjusted or disabled.
2.4.11: Focus Not Obscured (Minimum): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.12: Focus Not Obscured (Enhanced): /#footer: The cookie notice at the bottom-left of the page fully obscures some of the footer links, which occur before it in the document's focus order.
2.4.13: Focus Appearance: /register/#prove-youre-a-human: The focused state of the CAPTCHA field only affects a 1px-thick border, and does not have sufficient contrast against the unfocused state.
3.3.2: Labels or Instructions: /login/#main: The sign-in form's inputs have no labels.
3.3.8: Accessible Authentication (Minimum): /register/#prove-youre-a-human: A cognitive test is present on the Register page.; /login/#main: The sign-in form's input fields disallow paste.
3.3.9: Accessible Authentication (Enhanced): /register/#prove-youre-a-human: A cognitive test is present on the Register page.; /login/#main: The sign-in form's input fields disallow paste.
4.1.3: Status Messages: /volunteer/#main: The "did you mean" email prompt doesn't grab focus and isn't announced.; /volunteer/#main: When the form times out, the toast that appears does not grab focus and is not announced.

Acknowledgment

The Museum of Broken Things was created by the W3C Accessibility Guidelines Working Group and Accessible Community.

Individual Contributors

Ken Franqueiro
Francis Storr
Rachael Bradley Montgomery
Alastair Campbell
Asher Kolieboi
Ellen Liebert
Brian Montgomery
Matt Russell
Kevin White

License

This repository is licensed under the Apache License, version 2.0.