WCAG Edition
(Based on VPAT® Version 2.5Rev)
The accessibility of store.acoustica.com was evaluated using a combination of automated scanning tools, manual inspection, and assistive technology testing.
This report covers the degree of conformance for the following accessibility standard/guidelines:
| Standard/Guideline | Included In Report |
|---|---|
| Web Content Accessibility Guidelines 2.0 | Level A (Yes) Level AA (Yes) Level AAA (No) |
| Web Content Accessibility Guidelines 2.1 | Level A (Yes) Level AA (Yes) Level AAA (No) |
| Web Content Accessibility Guidelines 2.2 | Level A (Yes) Level AA (Yes) Level AAA (No) |
The terms used in the Conformance Level information are defined as follows:
Note: When reporting on conformance with the WCAG 2.x Success Criteria, they are scoped for full pages, complete processes, and accessibility-supported ways of using technology as documented in the WCAG 2.2 Conformance Requirements.
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.1.1 Non-text Content (Level A) | Partially Supports | Product listing images have meaningful alt text. Hero card images now have specific alt text per product edition. Cart icon, logo, and wishlist buttons all have accessible names. Star ratings have role="img" with descriptive aria-label. Decorative SVGs have aria-hidden="true". Remaining issue: Product gallery images on detail pages still use filenames as alt text (e.g., "mixcraft-10-ps-ui.jpg") — this requires a content/CMS update. |
| 1.2.1 Audio-only and Video-only (Prerecorded) (Level A) | Not Applicable | No prerecorded audio-only or video-only content is present on the site. |
| 1.2.2 Captions (Prerecorded) (Level A) | Not Applicable | No prerecorded video content with audio is present on the site. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A) | Not Applicable | No prerecorded video content is present on the site. |
| 1.3.1 Info and Relationships (Level A) | Partially Supports | Fixed: (1) Footer section titles are now proper <h2> heading elements. (2) Orphan <li> elements in the Acoustica footer are now wrapped in <ul>. (3) All <nav> elements now have aria-label attributes. (4) Search labels correctly match their input IDs. (5) Tab interface uses proper ARIA roles. (6) Username help text is now linked to its input via aria-describedby. Remaining issues: (1) Homepage has two <h1> elements. (2) No <h2>-<h6> subheadings within page content areas. (3) Sale pricing relationship not programmatically conveyed. |
| 1.3.2 Meaningful Sequence (Level A) | Partially Supports | DOM order generally follows a logical reading sequence (header, main, footer). However, the homepage main element uses a large negative margin (-mt-32) that shifts content visually, and hero product divs create redundant interactive structures where both the div and links within navigate to the same URL. |
| 1.3.3 Sensory Characteristics (Level A) | Supports | No instructions rely solely on shape, size, visual location, orientation, or sound. |
| 1.4.1 Use of Color (Level A) | Partially Supports | (1) Active tab state in product sections is distinguished only by color change (yellow vs gray text) with no additional non-color indicator. (2) Sale pricing uses strikethrough styling and lighter color on original price, but screen readers may not announce the strikethrough. (3) Star ratings use yellow fill color as the sole indicator of rating value. |
| 1.4.2 Audio Control (Level A) | Not Applicable | No audio plays automatically on any page. |
| 2.1.1 Keyboard (Level A) | Supports | All interactive elements are operable via keyboard. Navigation dropdowns open with Enter/Space and close with Escape. All links, buttons, form fields, product cards, tabs, and search are reachable and activatable via Tab, Enter, Space, and Escape. Verified through a complete keyboard walkthrough of the homepage, product pages, login, and search. |
| 2.1.2 No Keyboard Trap (Level A) | Supports | Dropdown menus use Alpine.js with Escape key handlers to allow closing. No keyboard traps were identified. |
| 2.1.4 Character Key Shortcuts (Level A 2.1 and 2.2) | Not Applicable | No character key shortcuts are implemented. |
| 2.2.1 Timing Adjustable (Level A) | Not Applicable | No time limits are imposed on any page content or user interactions. |
| 2.2.2 Pause, Stop, Hide (Level A) | Not Applicable | No auto-updating, moving, blinking, or scrolling content is present. The NProgress loading bar is brief and triggered only during page navigation. |
| 2.3.1 Three Flashes or Below Threshold (Level A) | Supports | No flashing content was detected on any page. |
| 2.4.1 Bypass Blocks (Level A) | Supports | A "Skip to main content" link is now present at the top of every page. It is visually hidden until focused, then appears prominently. The main content area has a corresponding id="main-content" target. Additionally, landmark elements (nav, main, header, footer) with aria-labels provide further bypass capability. |
| 2.4.2 Page Titled (Level A) | Supports | All pages have descriptive, unique <title> elements that identify both the page purpose and the site name (e.g., "Discover | Acoustica Store", "Login | Acoustica Store", "Mixcraft 10.6 Pro Studio | Acoustica Store"). |
| 2.4.3 Focus Order (Level A) | Supports | Focus order follows a logical sequence consistent with the visual layout (top to bottom, left to right). Navigation, main content, and footer are reached in the expected order. Verified via keyboard walkthrough of the homepage, product pages, and login page. |
| 2.4.4 Link Purpose (In Context) (Level A) | Partially Supports | Fixed: (1) The cart link has an aria-label with dynamic item count. (2) The logo link has aria-label. (3) Hero card Buy Now, Rent to Own, and Learn More links now include the product name via aria-label. Remaining issues: (1) Multiple "Add to Cart" buttons on product listing pages lack aria-labels to distinguish which product is being added. |
| 2.5.1 Pointer Gestures (Level A 2.1 and 2.2) | Supports | No multipoint or path-based gestures are required for any functionality. |
| 2.5.2 Pointer Cancellation (Level A 2.1 and 2.2) | Supports | All interactive elements now use semantic <a> and <button> elements with native click behavior and proper up-event cancellation. The hero product cards were changed from <div onclick> to <a href> elements. |
| 2.5.3 Label in Name (Level A 2.1 and 2.2) | Supports | Buttons have visible text matching their accessible names. The search input labels now correctly reference their associated inputs via matching for/id attributes (desktop-search and mobile-search). |
| 2.5.4 Motion Actuation (Level A 2.1 and 2.2) | Not Applicable | No motion-based interactions are implemented. |
| 3.1.1 Language of Page (Level A) | Supports | All pages correctly declare lang="en" on the <html> element. |
| 3.2.1 On Focus (Level A) | Supports | No elements trigger a change of context on focus alone. |
| 3.2.2 On Input (Level A) | Partially Supports | The homepage product category <select> element uses wire:model.live which triggers an automatic content change when the selection changes, updating the product grid immediately without advance notice to the user. |
| 3.2.6 Consistent Help (Level A 2.2 only) | Supports | The "Support" link appears consistently in both the navigation and footer across all pages. |
| 3.3.1 Error Identification (Level A) | Partially Supports | Form fields use HTML5 required and type attributes for browser-native validation. The redeem page warning message now has role="alert" for screen reader announcement. However, no custom error messaging using aria-describedby, aria-errormessage, or aria-invalid is implemented for form validation errors. Error messages are rendered adjacent to fields but not programmatically associated. |
| 3.3.2 Labels or Instructions (Level A) | Partially Supports | Fixed: (1) Search labels correctly match their input IDs. (2) Tab select dropdown has an associated label. (3) Username help text is now programmatically associated via aria-describedby. Remaining issue: No visible required field indicators on login/registration forms (the HTML required attribute is used but no visual asterisk or instruction). |
| 3.3.7 Redundant Entry (Level A 2.2 only) | Not Applicable | No multi-step processes requiring re-entry of previously provided information were identified. |
| 4.1.1 Parsing (Level A) WCAG 2.0 and 2.1 – Always answer ‘Supports’ WCAG 2.2 (obsolete and removed) - Does not apply | Supports | For WCAG 2.0 and 2.1, the September 2023 errata update indicates this criterion is always supported. See the WCAG 2.0 Editorial Errata and the WCAG 2.1 Editorial Errata. |
| 4.1.2 Name, Role, Value (Level A) | Partially Supports | Fixed: (1) Search inputs now have unique IDs (desktop-search, mobile-search) eliminating duplicate IDs. (2) Hero cards are now semantic <a> elements with proper role and keyboard access. (3) Wishlist buttons have aria-labels. (4) Cart icon link has aria-label with dynamic count. (5) Hamburger menu buttons have aria-label="Menu" and aria-expanded state. (6) Dropdown toggle buttons have aria-expanded and aria-haspopup. (7) Tab widget uses role="tablist", role="tab", aria-selected, and aria-controls with matching IDs. (8) Tab select dropdown has an associated label. Remaining issues: (1) Image carousel dot indicators on product pages still lack accessible names. (2) The Mixcraft dropdown in the secondary nav (x-dropdown component) may need aria-expanded review. |
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.2.4 Captions (Live) (Level AA) | Not Applicable | No live audio or video content is present on the site. |
| 1.2.5 Audio Description (Prerecorded) (Level AA) | Not Applicable | No prerecorded video content is present on the site. |
| 1.3.4 Orientation (Level AA 2.1 and 2.2) | Supports | No CSS or scripts restrict the page to a single display orientation. |
| 1.3.5 Identify Input Purpose (Level AA 2.1 and 2.2) | Supports | All form inputs now have appropriate autocomplete attributes: login email has autocomplete="email", login password has autocomplete="current-password", registration fields have autocomplete="name", "email", "username", "new-password". The newsletter email input has autocomplete="email". |
| 1.4.3 Contrast (Minimum) (Level AA) | Supports | All text and images of text meet the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. Verified using the TPGi Color Contrast Analyzer across the homepage, product pages, navigation, footer, and form pages. Inactive tab filter buttons pass at the large text threshold. |
| 1.4.4 Resize text (Level AA) | Supports | All text can be resized up to 200% without loss of content or functionality. Verified by zooming to 200% in the browser across the homepage, product pages, and login page. No text clipping, content overlap, or horizontal scrollbars were observed. All functionality remains usable. |
| 1.4.5 Images of Text (Level AA) | Supports | Product images are photographs and box art rather than text rendered as images. Logo marks are SVGs. All text content is rendered as HTML text. |
| 1.4.10 Reflow (Level AA 2.1 and 2.2) | Supports | Content reflows to a single column at 400% zoom (320px CSS width equivalent) without horizontal scrolling, content loss, or overlapping elements. Verified across the homepage, product pages, and login page. The responsive Tailwind grid layouts adapt correctly at all zoom levels. |
| 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2) | Supports | UI components and graphical objects meet the 3:1 contrast ratio against adjacent colors. Verified using the TPGi Color Contrast Analyzer. Form input borders, focus indicators, and button boundaries meet the minimum contrast requirements. |
| 1.4.12 Text Spacing (Level AA 2.1 and 2.2) | Supports | Content remains visible and functional when WCAG text spacing overrides are applied (line height 1.5, letter spacing 0.12em, word spacing 0.16em, paragraph spacing 2em). Some navigation buttons reflow to a stacked layout but remain fully visible and operable. No text is clipped, hidden, or overlapping. Verified using a text spacing override bookmarklet across the homepage, product pages, and login/registration pages. |
| 1.4.13 Content on Hover or Focus (Level AA 2.1 and 2.2) | Partially Supports | Dropdown menus appear on click rather than hover (good). Hover states only affect text styling. However, dropdown content uses Alpine.js transitions and the Escape key handler is on the window level rather than scoped to the dropdown, which could cause issues with dismissibility. |
| 2.4.5 Multiple Ways (Level AA) | Supports | The site provides multiple ways to reach pages: navigation menus, a search form, and product links from various listing pages. No sitemap is present but the combination of navigation and search satisfies this criterion. |
| 2.4.6 Headings and Labels (Level AA) | Partially Supports | Fixed: (1) Footer section titles are now <h2> elements providing proper heading hierarchy. (2) Search labels now correctly match their input IDs. (3) Tab select dropdown now has an associated label. Remaining issues: (1) Homepage has two <h1> elements. (2) No subheadings (<h2>-<h6>) within main page content areas (product listings, product detail sections). |
| 2.4.7 Focus Visible (Level AA) | Supports | All focused elements display a clearly visible focus indicator. A global :focus-visible CSS rule applies a 2px yellow outline to most elements. Primary buttons (yellow background) use a dark ring (ring-gray-900) for contrast, while accent and secondary buttons use a yellow ring (ring-yellow-400). All focus indicators were verified as clearly visible during keyboard walkthrough testing. |
| 2.4.11 Focus Not Obscured (Minimum) (Level AA 2.2 only) | Supports | No focused element is fully obscured by the fixed navigation bar or other page content. Verified by tabbing through all focusable elements on the homepage, product pages, and login page. The browser scrolls focused elements into view clear of the fixed header. |
| 2.5.7 Dragging Movements (Level AA 2.2 only) | Not Applicable | No drag-and-drop functionality is exposed to users on the public storefront. |
| 2.5.8 Target Size (Minimum) (Level AA 2.2 only) | Partially Supports | Most buttons have adequate sizing due to padding classes. However: (1) Image carousel dot indicator buttons on product pages are w-4 h-2 (16x8px), well below the 24x24px minimum. (2) Some inline footer links may not meet the 24x24px minimum target size. Requires manual measurement on rendered pages. |
| 3.1.2 Language of Parts (Level AA) | Supports | All content is in English, consistent with the lang="en" declaration. No foreign-language content segments were identified. |
| 3.2.3 Consistent Navigation (Level AA) | Supports | Navigation elements appear in the same relative order across all pages tested. The header navigation, search, and footer are consistent. |
| 3.2.4 Consistent Identification (Level AA) | Supports | Components with the same functionality (navigation links, search, cart, Add to Cart buttons, newsletter signup) are identified consistently across pages. |
| 3.3.3 Error Suggestion (Level AA) | Partially Supports | Form fields with type="email" provide browser-native error suggestions for format validation. However, no custom error suggestion mechanism was found for any form fields. No aria-describedby or custom error messages are implemented. |
| 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA) | Partially Supports | The Add to Cart action is reversible. However, the checkout flow could not be tested (requires authentication). For financial transactions, this criterion requires that submissions are reversible, data is checked, or the user can review/confirm before finalizing. Requires authenticated testing of the checkout process. |
| 3.3.8 Accessible Authentication (Minimum) (Level AA 2.2 only) | Partially Supports | The login page does not require a cognitive function test (good). However, the registration page uses a visible reCAPTCHA v2 checkbox challenge, which may present image-based cognitive tests. While reCAPTCHA v2 provides an audio alternative, complex image challenges can still pose accessibility barriers. The reCAPTCHA iframe also has role="presentation" which incorrectly tells assistive technology to ignore the interactive content. |
| 4.1.3 Status Messages (Level AA 2.1 and 2.2) | Supports | The Livewire notification container has role="status" and aria-live="polite" for screen reader announcements of cart and wishlist updates. The redeem page warning message now has role="alert" to announce the login requirement to screen reader users. |
This document is provided for informational purposes only. Acoustica LLC makes no warranties, express or implied, regarding the accuracy or completeness of the information contained herein. The accessibility conformance levels reported are based on evaluation methods described in this document and may change as the product is updated. For questions or to report accessibility issues, contact webmaster@acoustica.com.