juniperbakery.com 1 page

Fix first grouped by rule, most serious on top

• Elements must meet minimum color contrast ratio thresholdsBlocks people

  Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

  1.4.3 Contrast (Minimum) AAeMAG 4.121 elements on /

  

  

  

  How to fixElement has insufficient color contrast of 3.93 (foreground color: #ffffff, background color: #c8643b, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1 Details
• Focus is not visibleBlocks people

  When a keyboard user tabs to these elements, nothing on screen shows where they are.

  2.4.7 Focus Visible AAeMAG 4.411 elements on /

  

  

  

  How to fixAdd a :focus-visible style (outline or ring) with at least 3:1 contrast against the background.
• Buttons must have discernible textBlocks people

  Ensure buttons have discernible text

  4.1.2 Name, Role, Value AeMAG 2.21 element on /

  

  How to fixElement does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty Details
• Images must have alternative textBlocks people

  Ensure <img> elements have alternative text or a role of none or presentation

  1.1.1 Non-text Content AeMAG 3.61 element on /

  

  How to fixElement does not have an alt attribute aria-label attribute does not exist or is empty Details
• Content does not reflow at 320pxBlocks people

  At 320 CSS pixels wide (400% zoom on a laptop) the page scrolls sideways.

  1.4.10 Reflow AAeMAG 4.31 element on /

  

  How to fixLet the element wrap or shrink: max-width: 100%, flexible grids, overflow-x: auto on tables and code.
• All page content should be contained by landmarksTo fix

  Ensure all page content is contained by landmarks

  eMAG 1.8best practice10 elements on /

  

  

  

  How to fixSome page content is not contained by landmarks Details
• Heading levels should only increase by oneTo fix

  Ensure the order of headings is semantically correct

  eMAG 1.3best practice1 element on /

  

  How to fixHeading order invalid Details
• Document should have one main landmarkTo fix

  Ensure the document has a main landmark

  eMAG 1.8best practice1 element on /

  

  How to fixDocument does not have a main landmark Details
• No skip linkWorth a look

  The first Tab stop is not a link to the main content, so keyboard users go through the whole menu on every page.

  2.4.1 Bypass Blocks AeMAG 1.51 element on /
  a ./ “Juniper Bakery”
  How to fixAdd “Skip to content” as the first focusable element, pointing to <main id="content">. eMAG 1.5 asks for it.
• Animation ignores reduced motionWorth a look

  With “reduce motion” on in the system, these animations still run. They can cause nausea for people with vestibular disorders.

  2.3.3 Animation from Interactions AAA2.2.2 Pause, Stop, Hide AeMAG 5.5eMAG 2.71 element on /
  span.badge
  How to fixWrap the animation in @media (prefers-reduced-motion: no-preference), or stop it under reduce.

Keyboard

Still to check by hand

• Read the page with a screen reader (NVDA, VoiceOver, TalkBack): does the order make sense?
• Alt text says what the image means here, not what it looks like.
• Videos have captions; audio has a transcript.
• Form errors say what went wrong and how to fix it, next to the field.
• Zoom to 200%: nothing is cut, nothing overlaps.
• Every action that works with a mouse also works with the keyboard.

Automated checks find part of the problems. The rest needs the manual pass above.

Every page