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)
Summary of failures
This section provides a breakdown of WCAG 2 and WCAG 3 failures, organized by sections of the site.
Home & Search
This section includes the home page and the search results page.
This section demonstrates content that has a moderate number of accessibility failures. The failures present a mix of those that can be found through automated testing and those that require manual testing.
WCAG 2
- 1.2.5: Audio Description (Prerecorded)
- No spoken description is provided for the promotional video at the bottom of the home page.
- 1.3.2: Meaningful Sequence
- The overline text over each title in the carousel uses space characters between each letter.
- 1.3.5: Identify Input Purpose
- The search field has no label.
- 1.4.6: Contrast (Enhanced)
- The semi-transparent backdrop between the carousel text and background image is not always enough to guarantee sufficient 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.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.2: Page Titled
- The search result page title is not accurate.
- 2.4.9: Link Purpose (Link Only)
- The Read More and Explore link text does not provide enough information to know which links go where.
- 2.4.11 and 2.4.12: Focus not Obscured
- 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
- Empty search results and misspellings do not throw an error.(**Do others agree?)
- 4.1.2: Name, Role, Value
- There is no search landmark or label indicating the presence or purpose of the search box.
WCAG 3
- Order of content
- The overline text over each title in the carousel uses space characters between each letter.
- Title
- The search result page title is not accurate
- Input labels
- The search field has no label
- Notification of change
- No programmatic notification occurs when the content changes
- Name, role, value, state
- There is no search landmark indicating the presence or purpose of the search box and no label on the search field.
- Control labels
- Name, role, value, state (needs discussion)
- The Read More and Explore link text does not provide enough information to know which links go where.
- Error identification
- Empty search results and misspellings do not throw an error.(**Do others agree?)
- Text minimum
- The text in the footer is lower contrast and smaller size.
- Maximum text contrast
- The title in the header is 21:1 - is this above the contrast maximum?
- Minimum text contrast
- The semi-transparent backdrop between the carousel text and background image is not always enough to guarantee sufficient contrast.
- Motion
- The carousel does not include controls to stop moving and updating.
- The promotional video at the bottom of the page loops infinitely and does not have controls to pause.
- Audio descriptions
- No spoken description is provided for the promotional video at the bottom of the home page.
- Keyboard focus location
- 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.
- Pointer location
- The carousel uses a custom cursor graphic which can be very hard to see.
- 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.
Collections Page
This section includes only the collection page.
This section demonstrates content that has a moderate-to-high number of accessibility failures, some of which would be very difficult to work around. The failures present a mix of those that can be found through automated testing and those that require manual testing.
Discussion items:
- Should emojis that are used as part of a span o 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?
WCAG 2
- 1.4.13: Content on Hover or Focus
- The text displayed over collection images upon hover can't be dismissed without moving the pointer.
- 2.1.1: Keyboard
- The text label on each collection's link only becomes visible on hover (not focus).
- 2.2.2: Pause, Stop, Hide
- The scrolling banner for the PC event lasts for eight seconds. Note: the scrolling content is only visible for four seconds, so does this fail or not?
- 2.4.3: Focus Order
- The collection links have explicit tabindex attributes, causing them to come before anything else in the page.
- 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.
- The explicit tab order is optimized specifically for the widest layout, making it incorrect even within the collections list on narrower viewports.
- 2.4.10: Section Headings
- The page doesn't have an H1.
- 3.2.3: Consistent Navigation
- The links that appear within the "See More" section within the main content are removed from the header navigation where they otherwise typically appear.
WCAG 3
- Hover information
- The text displayed over collection images upon hover can't be dismissed without moving the pointer.
- Keyboard only
- The text label on each collection's link only becomes visible on hover (not focus).
- Order of content
- The collection links have explicit tabindex attributes, causing them to come before anything else in the page.
- 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.
- The explicit tab order is optimized specifically for the widest layout, making it incorrect even within the collections list on narrower viewports.
- Consistent navigation
- The links that appear within the "See More" section within the main content are removed from the header navigation where they otherwise typically appear.
- Section headings
- The page doesn't have an H1.
Dishes Collection
This section includes the dishes collection page and related item subpages.
This section demonstrates content that has very few accessibility failures and the failures that exist can be worked around or are in less important features. The failures present a mix of those that can be found through automated testing and those that require manual testing.
WCAG 2
- 1.1.1: Non-text Content
- The exhibit images do not have alt text.
- 2.1.1: Keyboard
- The favorites marker is not accessible via keyboard.
- 2.2.3: No Timing
- 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.
- 3.1.5: Reading Level
- The Dishes collection has a reading level of upper secondary education with no alternative version.
WCAG 3
- Adequate time
- 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.
- Image alternatives
- The exhibit images do not have alt text.
- Keyboard only
- The favorites marker is not accessible via keyboard.
- Control interruptions
- The confirmation toasts in response to toggling favorites cannot be customized or disabled.
Glass Collection
This section includes the glass collection page and related item subpages.
WCAG 2
- 3.1.5: Reading Level
- The Glass collection has a reading level of advanced education with no alternative version.
Home Collection
Photosensitivity Warning! Do not visit this section if you experience reactions to flashing lights or motion.
This section includes the home collection page and related item subpages.
This section demonstrates content that has few accessibility failures, BUT the failures that exist could cause individuals with disabilities physical or psychological harm.
WCAG 2
- 2.3.1 or 2.3.2: Three Flashes
- The image thumbnails in the exhibit list on this page flash 4 times within a one-second period.
- 2.3.3: Animation from Interactions
- Each individual exhibit page under the Home collection includes a parallax effect on the background image.
- 3.1.2: Language Of Parts
- 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.
WCAG 3
- Appropriate Tone
- The language and tone of the Wide Bedroom page is disrespectful to the past owners of the property and the reader.
- Figurative Language
- The Porch Chair page makes use of idioms, synonyms, and metaphors.
- Flashing and strobing
- The image thumbnails in the exhibit list on this page flash 4 times within a one-second period.
- Motion
- Each individual exhibit page under the Home collection includes a parallax effect on the background image.
Music Collection
WCAG 2
- 2.4.4 and 2.4.9: Link Purpose
- The purpose of each entry's link is unclear because its image (with alt text) is also included within the link, preceding its title.
WCAG 3
- Control labels
- Interface verbosity
- The link for each entry is overly verbose, due to the inclusion of each entry's image (with alt text).
Sports Collection
WCAG 2
- 1.1.1: Non-text Content
- The alt text on each entry's image repeats the entry's title, rather than describing the image.
- 2.4.7: Focus Visible
- There is no visible focus outline when a collection's image is focused.
WCAG 3
- Relevant focus
- Each collection's image and title are independently linked, requiring focus to be advanced twice to reach the next unique link.
- Keyboard focus location
- There is no visible focus outline when a collection's image is focused.
Technology Collection
This section includes the technology collection page and related item subpages.
This section demonstrates content that has very few accessibility failures in the programmatic portion of the page but has a number of failures in the content.
WCAG 2
- 1.1.1: Non-text Content
- Some of the exhibit images lack alt text.
- 2.4.10: Section Headings
- The page doesn't have an H1.
WCAG 3
- Image alternatives
- Some of the exhibit images lack alt text.
- Section headings
- The page doesn't have an H1.
Early Home Computers Event
This section includes the Early Home Computers event page.
This section demonstrates issues with focus management, accessible names, incompletely implement controls for user interface components with ARIA roles, reading order, and Windows high-contrast mode. Discussion items include:
- 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?
- Should sticky content (e.g., headers and footers) take up a maximum amount of space when a user agent is zoomed in?
- Should text in cards, where the entire card is clickable, be selectable? Is this an accessibility issue or general UX?
WCAG 2
- 1.1.1: Non-Text Content
- The alternative text for the BBC Microcomputer image, "Wikipedia photo of a computer", doesn't specify what kind of computer it is.
- 1.3.1: Info And Relationships
- The
h2
element is ap
tag styled to look like a heading. - 1.3.2: Meaningful Sequence
- The "About The Event" section and "ZX81" card display more content before the toggle controls but don't manage the user's focus.
- 1.4.4: Resize Text
- The page's
h1
element, at 200% browser zoom, doesn't double in size. - 1.4.8: Visual Presentation
- The text in the cards is justified.
- 1.4.11: Non-Text Contrast
- 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.
- Scrollbar color contrast, in supporting browsers, is less than 3:1.
- 2.4.10: Section Headings
- Headings jump from
h1
toh4
. - 4.1.2: Name, Role, Value
- The ZX Spectrum additional content is in a focusable element with a
role="group"
attribute, but no accessible name.
WCAG 3
- Maximum Text Contrast
- Body text is white against a pure-black background.
- 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. - Section headers
- Headings jump from
h1
toh4
. - Behavior of controls
- The Read More / Less controls are links marked up with
role="button"
, but no JavaScript has been added to make the spacebar active them. - Keyboard focus location
- ZX Spectrum, BBC, and VIC-20 cards don't show a focus indicator when the focus moves to the revealed content.
- Commodore 64 card shows a focus indicator for the whole card and not the focused-area.
- Name, role, value, state
- The ZX Spectrum additional content is in a focusable element with a
role="group"
attribute, but no accessible name. - Non-text contrast (and Interaction indicators contrast?)
- 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.
Containers
This section includes the containers collection page and related item subpages.
This section demonstrates content that a number of small accessibility failures.
WCAG 2
- 1.3.6: Identify Purpose
- The favorite toggle does not programmatically indicate that it accepts input.
- 1.4.11: Non-text Contrast
- The favorite icon uses a color that does not always maintain sufficient contrast with the background (see old clay jug).
- 2.1.1 and 2.1.3: Keyboard
- The Favorite toggle is not accessible via keyboard.
WCAG 3
- Name, role, value, state
- The favorite toggle does not programmatically indicate that it accepts input.
- Non-text contrast
- The favorite icon uses a color that does not always maintain sufficient contrast with the background (see old clay jug).
- Keyboard only
- The Favorite toggle is not accessible via keyboard.
Take a Tour
This section includes the Take a Tour page and related subpages.
This section demonstrates task completion and multimedia failures.
WCAG 2
- 1.2.3 and 1.2.5: Audio Description (Prerecorded)
- 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)
- No sign language interpretation is provided for the prerecorded audio content in the video at the top of the page.
- 2.2.4: Interruptions
- The time to next departure is called out every 15 seconds and cannot be turned off.
- 3.2.3: Consistent Navigation
- The "Take a Tour" item is missing from the top nav on this page.
WCAG 3
- Audio descriptions
- No audio description is provided to explain the non-narrated contents of the video at the top of the page.
- Finding media alternatives
- No media alternative is provided to explain the contents of the video at the top of the page.
- Consistent navigation
- The "Take a Tour" item is missing from the top nav on this page.
- Control interruptions
- The time to next departure is called out every 15 seconds and cannot be turned off.
Blog
This section includes the Blog page and related article subpages.
This section demonstrates a moderate level of content, interaction and multimedia failures.
Point for discussion: 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?
WCAG 2
- 1.2.4: Captions (Live)
- The topmost blog post contains a video element representing a live broadcast, which does not include any captions.
- 1.4.3 and 1.4.6: Contrast
- The "Blog" heading is superimposed over an image with no overlay to guarantee minimum contrast.
- 1.4.13: Content on Hover or Focus
- In the top navigation bar, nested items open on keyboard focus and can only be dismissed by moving focus.
- 2.3.3: Animation from Interactions
- Images zoom in on hover and do not respect prefers-reduced-motion.
- 2.4.1: Bypass Blocks
- The "Skip to content" link does not work properly on the blog listing page.
- 2.4.4 and 2.4.9: Link Purpose
- Each post image, as well as the arrow on the topmost post, links to its post, but has no content to describe the link.
- 2.4.13: Focus Appearance
- 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)
- The link after the excerpt from the topmost post is smaller than 44 by 44 pixels.
- 3.1.1: Error Identification
- The first post under "In the News" leads to a 404 page with no clear description of what went wrong.
- 4.1.2: Name, Role, Value
- In the top navigation bar, there is no programmatic indication of expandable items.
WCAG 3
- Motion
- Images zoom in on hover and do not respect prefers-reduced-motion.
- ???
- The "Skip to content" link does not work properly on the blog listing page.
- Error identification
- The first post under "In the News" leads to a 404 page with no clear description of what went wrong.
- Captions
- The topmost blog post contains a video element representing a live broadcast, which does not include any captions.
- Hover information
- In the top navigation bar, nested items open on keyboard focus and can only be dismissed by moving focus.
- Name, role, value, state
- In the top navigation bar, there is no programmatic indication of expandable items.
- Control labels
- Name, role, value, state (needs discussion)
- Each post image, as well as the arrow on the topmost post, links to its post, but has no content to describe the link.
- Target size
- The link after the excerpt from the topmost post is smaller than 44 by 44 pixels.
- Keyboard focus location
- 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.
- Minimum text contrast
- The "Blog" heading is superimposed over an image with no overlay to guarantee minimum contrast.
Gift Shop
This section includes the Gift shop, product subpages and checkout process.
This section demonstrates task completion and form based failures.
Note: One or more items must be in the cart to continue the checkout process.
WCAG 2
- 1.4.3 and 1.4.6: Contrast
- On the category listing page, text is superimposed over images with no overlay to guarantee minimum contrast.
- The navigation bar content overflows its background on mobile viewports, making the cart link nearly invisible.
- 1.4.13: Content on Hover or Focus
- In the top navigation bar, nested items open on hover and can only be dismissed by moving the pointer.
- 2.1.1: Keyboard
- In the top navigation bar, parent items are not focusable (and therefore cannot be opened) via keyboard.
- 2.2.3: No Timing
- Forms in the checkout process time out after an undisclosed period of time.
- 2.4.6 and 2.4.9: Link Purpose
- The cart link contains only an icon, with no text label explaining its purpose.
- 2.4.7: Focus Visible
- The focus is not visible on the increment/decrement buttons that adjust the number of items.
- 3.2.3: Consistent Navigation
- 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
- 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
- Errors do not specifically describe what expectation was failed for each field.
- 3.3.2: Labels or Instructions
- Fields have no labels, and no indication is given on accepted input formats.
- 3.3.3: Error Suggestion
- Errors do not provide suggested corrections.
- 3.3.4 and 3.3.6: Error Prevention
- There is no confirmation step after entering payment information, failing 3.3.4 for financial information in addition to 3.3.6.
- 3.3.5: Help
- No context-sensitive help is available.
- 3.3.6: Error Prevention (All)
-
The quantity field uses
type="tel"
, which allows non-numeric input, rather than the more appropriatetype="number"
. - 4.1.2: Name, Role, Value
- In the top navigation bar, there is no programmatic indication of expandable items.
- 4.1.3: Status Messages
- When the payment form becomes disabled, the toast that appears does not grab focus and is not announced.
WCAG 3
- Contrast minimum
- On the category listing page, text is superimposed over images with no overlay to guarantee minimum contrast.
- The navigation bar content overflows its background on mobile viewports, making the cart link nearly invisible.
- Allow automated entry
- The input fields on the payment step disallow paste.
- Error association
- There is no error message programmatically associated with each input.
- Error identification
- The only indication of error is a border color change.
- Error notification
- Errors do not specifically describe what expectation was failed for each field.
- Input instructions
- No indication of input formats is provided.
- Input labels
- No input labels are present.
- Persistent error notification
- There is no way to dismiss errors until the entire form is resubmitted.
- Visible error
- There is only one generic error message, at the top of the entire form.
- Adequate time
- There is a timeout on each step that may be too short to enter required information.
- Action required
- There is no visible indication of fields being required, until the user attempts to submit.
- Go back in process
- There is no mechanism within the page for stepping back through the process, or indicating position within the process.
- Inform at start
- Nothing is disclosed up-front about the information that will be required to complete checkout.
- Behavior of controls
- The toasts displayed for form timeouts on the shipping and payment steps are inconsistent with each other (one has role="alert", the other does not).
- Name, role, value, state
- In the top navigation bar, there is no programmatic indication of expandable items.
- Control labels
- Name, role, value, state (needs discussion)
- The cart link contains only an icon, with no text label explaining its purpose.
- Hover information
- In the top navigation bar, nested items open on hover and can only be dismissed by moving the pointer.
- Restore focus
- Upon entering an invalid quantity (e.g. 0), pressing add to cart, then dismissing the modal, focus is not restored to the add to cart button.
- Keyboard focus location
- The focus is not visible on the increment/decrement buttons that adjust the number of items.
- Keyboard only
- In the top navigation bar, parent items are not focusable (and therefore cannot be opened) via keyboard.
- Focus retention
- Upon entering an invalid quantity (e.g. 0), the modal that appears does not grab, trap, and restore focus.
- Multistep process
- No context is given with regard to progress through the checkout process.
- Notification of change
- When the payment form becomes disabled, the toast that appears does not grab focus and is not announced.
- Consistent Navigation
- 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.
- Ambiguous numerical formatting
- In the footer, the year of the site's creation is expressed in Roman numerals.
- Numbered steps
- Checkout steps are not numbered; progress through the process is not indicated at all.
- Consistent help
- 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.
- Contextual help
- No contextual help is available.
Museum Map
WCAG 2
- 1.1.1: Non-text Content
- The arrow buttons over the map do not contain text labels.
- 1.3.3: Sensory Characteristics
- Instructions allude only to color when describing visible map controls, which is insufficient to disambiguate for colorblind users, as some controls feature the same icons distinguished only by color.
- 1.4.1: Use of Color
- The map controls for zooming and panning vertically are distinguished only by color, and the instructions are dependent on this distinction.
- 1.4.10: Reflow
- The controls disappear when magnified.
- 1.4.11: Non-text Contrast
- The pin on the map uses a color that has extremely poor contrast against the map's colors.
- 2.1.4: Character Key Shortcuts
- Single-character key bindings are implemented across the entire page for map movement, and cannot be turned off or customized.
- 2.4.13: Focus Appearance
- 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
- On mobile viewports, the only way to zoom the map is via a pinch gesture.
WCAG 3
- Image alternatives
- The arrow buttons over the map do not contain text labels.
- Use of color
- Instructions allude only to color when describing visible map controls, which is insufficient to disambiguate for colorblind users, as some controls feature the same icons distinguished only by color.
- Reflow
- The controls disappear when magnified.
- Non-text contrast
- The pin on the map uses a color that has extremely poor contrast against the map's colors.
- Comparable keyboard effort
- Panning the map can require many more keypresses compared to dragging a pointer device.
- Gestures & dragging
- On mobile viewports, the only way to control the map is via dragging and pinch-to-zoom.
- Keyboard commands
- Single-character key bindings are implemented across the entire page for map movement, and cannot be turned off or customized.
- Keyboard focus location
- The map controls use a dotted focus outline with a color that falls well below 3:1 contrast against the underlying map.
- Sensory characteristics
- Instructions allude only to color when describing visible map controls, which is insufficient to disambiguate for colorblind users, as some controls feature the same icons distinguished only by color.
Register & Sign In
This section includes the registration and sign in processes.
This section demonstrates task completion, form based and authentication failures.
WCAG 2
- 1.1.1: Non-text Content
- A CAPTCHA is required and no alternative is provided.
- 1.4.1: Use of Color
- 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)
- Placeholder text does not meet the minimum contrast ratio.
- 2.4.13: Focus Appearance
- 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
- Form inputs have no labels.
- 3.3.8 and 3.3.9: Accessible Authentication
- The input fields disallow paste. Cognitive test is present on Register page.
WCAG 3
- Minimum text contrast
- Placeholder text does not meet the minimum contrast ratio.
- Allow automated entry
- The input fields disallow paste.
- Input labels
- Form inputs have no labels.
- No cognitive tests
- Cognitive test is present on Register page.
- Interaction indicators contrast
- The CAPTCHA field has an invisible text cursor/caret.
- Non-text contrast
- The CAPTCHA field is initially empty and indicated only by a low-contrast underline, making its hit area ambiguous.
- Keyboard focus location
- The focused state of the CAPTCHA field only affects a 1px-thick border, and does not have sufficient contrast against the unfocused state.
Volunteer
This section includes the volunteer sign up process pages.
This section includes task completion and form based failures. This includes a small number of errors.
WCAG 2
- 2.2.3: No Timing
- The volunteer form becomes unsubmittable after a short time, and the toast informing of this change disappears after a few seconds.
- 2.2.6: Timeouts
- The form becomes unsubmittable after a short time period which is not disclosed in advance.
- 4.1.3: Status Messages
- When the form becomes disabled, the toast that appears does not grab focus and is not announced.
WCAG 3
- Persistent error notification
- The timeout notification toast dismisses itself automatically without waiting for the user.
- Adequate time
- There is a timeout that may be too short to enter required information, which the user is not notified about. The toast that appears when the timeout lapses disappears after a few seconds.
- Notification of change
- When the form becomes disabled, the toast that appears does not grab focus and is not announced.
About
This section includes only the about page.
Discussion items:
- Is the hard-to-read text that's used in the mission statement and table headers just bad usability or an accessibility issue?
- Is using the ARIA grid role on a table of static content an issue?
WCAG 2
- 1.1.1: Non-text Content
- An image of text is used for headings, but the image has no accessible name.
- 1.3.1: Info and Relationships
- The Travel Directions heading is marked up as a
div
with no ARIA roles to programmatically make it a heading. - The table's layout changes at smaller breakpoints, but the relevant ARIA attributes aren't also updated, resulting in incorrect relationships between the data.
- 1.4.3: Contrast (Minimum)
- The text in the table header cells has insufficent contrast.
- 1.4.4: Resize Text
- The mission statement cuts off beyond a set maximum height, noticeable on mobile or when zoom is increased.
- 1.4.5: Images of Text
- 1.4.9: Images of Text (No Exception)
- Travel Directions "heading" is an image of text
- 1.4.12: Text Spacing
- About The Museum and Opening Hours heading text can't be adjusted.
- 2.4.9: Link Purpose (Link Only)
- The "here" link under the Travel Directions heading is ambiguous.
- 4.1.2: Name, Role, Value
- The About The Museum and Opening Hours headings don't have accessible names.
WCAG 3
- Control labels
- Name, role, value, state
- The "here" link under the Travel Directions heading is ambiguous.
- Distinct Relationships
- The table's layout changes at smaller breakpoints, but the relevant ARIA attributes aren't also updated, resulting in incorrect relationships between the data.
- Images-of-text alternatives
- Images with text are used for emphasis, but their alt text is empty and there is no text equivalent.
- Image Role
- The Travel Directions heading has no programmatic role.
- Section headers
- One of the images with text could be interpreted as a level-2 heading, but it is not coded as such.
- White spacing
- There is no margin between paragraphs.
- Clear relationships
- The headings and other structural elements are not reflected in code.
- Text style
- The mission statement and the days of the week in the schedule are rendered in a cursive handwriting font.
- Name, Role, Value, State
- The About The Museum and Opening Hours headings don't have accessible names.
Help
WCAG 3
- Acronyms and abbreviations
- The page references an acronym without ever including its expanded form.
- Figurative language
- No explanations are included for idioms and metaphors used on the page.
- Lists
- Three steps are enumerated in a paragraph rather than a list.
- Numbered steps
- Three steps are enumerated in a paragraph with wording that suggests numerical order, but they are not explicitly numbered.
- Uncommon words
- No definitions are provided for uncommon words found in the page.
- Verb tense
- There are instances where the chosen verb tense is not the easiest to understand.
- Unnecessary words or phrases
- Some sentences could be made clearer by removing filler words or embellishments.
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.