Before & After Demo

Joyful Bees Honey Demo Site

Joyful Bees Honey (JBH) is a fictitious website designed to demonstrate a variety of common web design problems – specifically Web Content Accessibility Guidelines (WCAG) 2.1 Level AA failures – that result in visitors with disabilities being unable to access content or features. Use the JBH site to:

• Demonstrate common web accessibility principles at training, presentations, and workshops on accessible web design.
• Learn solutions for common web accessibility problems in an easy-to-understand way.

Index of Web Pages

• Inaccessible Website – This JBH website demonstrates common web accessibility issues – See how many web accessibility problems you can identify. Since the purpose of this website is to demonstrate inaccessible web design, certain features are inherently inaccessible to some groups of users.
  • Before Home – Caution: This page contains a flashing animated graphic and scrolling text for the purpose of demonstrating WCAG violations and how to address them.
  • Before Our Story
  • Before Say Hello
  • Before The Buzz
• Accessible Website – This JBH website is a modified version of the “Before” website, where all accessibility issues have been fixed.
  • After Home
  • After Our Story
  • After Say Hello
  • After The Buzz

Global Accessibility Issues

An explanation of and details on how to resolve each issue is available at Global Accessibility Issues.

1. Dialog not a true modal
2. Focus not visible for keyboard-only users
3. Font selection issues
4. Horizontal overflow not available at 400%
5. Insufficient color contrast – text
6. Missing alternative text for image buttons & links
7. Missing alt attribute for decorative image
8. Missing DOCTYPE
9. Missing document title
10. Missing lang attribute

Home Page Accessibility Issues

An explanation of and details on how to resolve each issue is available at Home Page Accessibility Issues.

1. Animation cannot be paused
2. Focus Not Visible for Buttons
3. Insufficient color contrast – non-text
4. Insufficient color contrast – text
5. Invalid alternative text for decorative image
6. Layout table using table headers
7. Link text using color alone
8. Missing alt attribute for decorative images
9. Missing <iframe> Title
10. Relationships of items undefined
11. Simple text styled to look like headings
12. Unable to bypass blocks of content
13. Unlabeled buttons
14. Users not made aware of changes in content

“Our Story” Accessibility Issues

An explanation of and details on how to resolve each issue is available at Our Story Accessibility Issues.

1. Decorative image missing alt attribute
2. Invalid heading structure
3. Link not accessible via keyboard
4. Link opens in new window/tab without warning
5. Link text – insufficient color contrast
6. Link text – use of color alone
7. List items not nested in list

“Say Hello” Accessibility Issues

An explanation of and details on how to resolve each issue is available at Say Hello Accessibility Issues.

1. Insufficient color contrast – button text
2. Missing alt attribute for decorative image
3. No way to bypass blocks of content
4. Unlabeled form fields
5. Form field errors not identified

“The Buzz” Accessibility Issues

An explanation of and details on how to resolve each issue is available at The Buzz Accessibility Issues.

1. Data table missing table headers
2. Inaccessible Expand/Collapse Elements
3. Insufficient color contrast – table rows
4. Invalid heading structure
5. Invalid use of structural markup – fieldset & legend