shortcut/cremote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
ccd8c77a3e84025a3bcd359105d52103b30ad744
cremote/Technical_Findings_AMFElectric.md
Josh at WLTechBlog ccd8c77a3e remove sensory tools
2025-10-07 11:47:47 -05:00

15 KiB
Raw Blame History

Technical Findings - AMF Electric Accessibility Assessment

Detailed Test Results and Raw Data

Assessment Date: October 7, 2025
URL Tested: https://amfelectric.com/

HOMEPAGE ASSESSMENT - RAW DATA

Axe-Core Automated Test Results

Test Configuration:

  • Library: axe-core v4.8.0
  • Standard: WCAG 2.1 Level AA
  • Rules: wcag2a, wcag2aa, wcag21aa

Summary:

  • ✅ Passes: Multiple (see detailed output)
  • ❌ Violations: 2 serious issues
  • ⚠️ Incomplete: Requires manual review
  • ℹ️ Inapplicable: Tests not relevant to this page

Violation 1: Color Contrast

Rule ID: color-contrast
Impact: Serious
WCAG: 1.4.3 Contrast (Minimum) - Level AA
Count: 5 elements

Affected Elements:

  1. .da11y-screen-reader-text - Skip link
  2. #menu-main > .pay-now.et_pb_menu_page_id-8276.menu-item-8276 > a[role="link"] - Pay Invoice button
  3. .et_pb_cta_1 > .et_pb_button_wrapper > .et_pb_button.et_pb_promo_button[role="button"] - CTA button

Remediation: https://dequeuniversity.com/rules/axe/4.8/color-contrast

Violation 2: Link Name

Rule ID: link-name
Impact: Serious
WCAG: 2.4.4 Link Purpose, 4.1.2 Name, Role, Value - Level A
Count: 1 element

Affected Element:

  • .icon - Facebook social media link

Remediation: https://dequeuniversity.com/rules/axe/4.8/link-name

Contrast Check - Comprehensive Results

Test Parameters:

  • Selector: All text elements
  • Standard: WCAG 2.1 Level AA
  • Threshold: 4.5:1 (normal text), 3:1 (large text)

Summary Statistics:

  • Total Elements Checked: 217
  • WCAG AA Pass: 146 (67.3%)
  • WCAG AA Fail: 71 (32.7%)
  • WCAG AAA Pass: 82 (37.8%)
  • WCAG AAA Fail: 135 (62.2%)

Top 20 Critical Contrast Failures

# Selector Text Sample Ratio Required Foreground Background
1 :nth-of-type(1) "Skip to content" 2.55:1 4.5:1 rgb(0,84,122) rgb(0,0,0)
2 :nth-of-type(26) "Electrical Contractors..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
3 :nth-of-type(27) "Electrical Contractors..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
4 :nth-of-type(28) "Electrical Contractors..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
5 :nth-of-type(29) "Electrical Contractors..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
6 :nth-of-type(30) "Electrical Contractors..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
7 :nth-of-type(32) "Residential" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
8 :nth-of-type(34) "Commercial" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
9 :nth-of-type(36) "Industrial" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
10 :nth-of-type(38) "Blog" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
11 :nth-of-type(40) "Projects..." 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
12 :nth-of-type(42) "Conveyors" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
13 :nth-of-type(44) "Café Design" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
14 :nth-of-type(46) "Contact Us" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
15 :nth-of-type(48) "Pay Your Invoice" 4.00:1 4.5:1 rgb(255,255,255) rgb(255,0,0)
16 :nth-of-type(49) "Pay Your Invoice" 4.00:1 4.5:1 rgb(255,255,255) rgb(255,0,0)
17 :nth-of-type(50) "Employment Application" 3.66:1 4.5:1 rgb(102,102,102) rgb(0,0,0)
18 :nth-of-type(85) "Commercial Electrical..." 1.00:1 4.5:1 rgb(255,255,255) rgb(255,255,255)
19 :nth-of-type(86) "Commercial Electrical..." 1.00:1 4.5:1 rgb(255,255,255) rgb(255,255,255)
20 :nth-of-type(87) "Commercial Electrical..." 1.00:1 3.0:1 rgb(255,255,255) rgb(255,255,255)

Contrast Failure Patterns

Pattern 1: Navigation Menu (rgb(102,102,102) on rgb(0,0,0))

  • Ratio: 3.66:1 (needs 4.5:1)
  • Affected: 25+ menu items
  • Fix: Change to rgb(153,153,153) or lighter

Pattern 2: Hero Section White-on-White

  • Ratio: 1.00:1 (needs 4.5:1)
  • Affected: Main heading and subheading
  • Fix: Add proper background or change text color to black

Pattern 3: Industrial Section (rgb(102,102,102) on rgb(224,153,0))

  • Ratio: 2.39:1 (needs 4.5:1)
  • Affected: Multiple paragraphs
  • Fix: Use darker text or lighter background

Pattern 4: "Learn More" Buttons (rgb(242,91,58) on rgb(255,255,255))

  • Ratio: 3.32:1 (needs 4.5:1)
  • Affected: 6+ buttons across page
  • Fix: Darken to rgb(200,67,31) or darker

Pattern 5: Testimonials (rgb(51,51,51) on rgb(0,0,0))

  • Ratio: 1.66:1 (needs 4.5:1)
  • Affected: Section headings
  • Fix: Lighten text significantly

Keyboard Navigation Test Results

Test Configuration:

  • Method: Automated tab order analysis
  • Focus indicator detection: CSS computed styles
  • Keyboard trap detection: Focus management analysis

Summary:

  • Total Interactive Elements: 36
  • Keyboard Focusable: 20
  • Not Focusable: 0 (all elements are focusable)
  • Missing Focus Indicator: 20 (100% of focusable elements)
  • Keyboard Traps: 0 (no traps detected)
  • Tab Order Issues: 0 (logical order maintained)

Tab Order Sequence

Index Element Role Text Focusable Focus Indicator
1 a.skip-link.da11y-screen-reader-text link "Skip to content" ✅ ❌
2 a.skip-link.sr-only link "Skip to main content" ✅ ❌
3 a link "" (logo) ✅ ❌
4 a.et_pb_button.et_pb_promo_button button "Contact Us" ✅ ❌
5 a.da11y-submenu link "Electrical Contractors" ✅ ❌
6 a link "Blog" ✅ ❌
7 a.da11y-submenu link "Projects" ✅ ❌
8 a link "Contact Us" ✅ ❌
9 a link "Pay Your Invoice" ✅ ❌
10 a link "Employment Application" ✅ ❌
11 a.et_pb_button.et_pb_promo_button button "Learn More" ✅ ❌
12 a.et_pb_button.et_pb_promo_button button "Learn More" ✅ ❌
13 a.et_pb_button.et_pb_promo_button button "Learn More" ✅ ❌
14 a.icon button "Facebook" ✅ ❌
15 a link "Shortcut Solutions" ✅ ❌

Issue Details:

  • Type: no_focus_indicator
  • Severity: HIGH
  • Count: 20 elements
  • Description: Interactive elements lack visible focus indicators
  • Fix: Add CSS :focus styles with visible outline or box-shadow

Accessibility Tree Analysis

Test Configuration:

  • Method: Chrome DevTools Accessibility API
  • Include Contrast Data: Yes
  • Depth: Full tree

Key Findings:

Landmarks Detected:

  • ✅ Banner (header)
  • ✅ Main content area
  • ✅ Contentinfo (footer)
  • ✅ Navigation

Skip Links:

  • ✅ "Skip to content" (href: #main-content)
  • ✅ "Skip to main content" (href: #main-content)
  • ⚠️ Both have contrast issues

ARIA Usage:

  • Live regions detected: 2 (polite and assertive)
  • Role overrides: Multiple (buttons styled as links)
  • Hidden elements: Properly implemented

Semantic Structure:

  • Proper use of semantic HTML elements
  • Heading hierarchy: Requires manual verification
  • List structures: Properly marked up
  • Form elements: None on homepage

Page Information

Document Properties:

  • Title: "Commercial and Industrial Electrical Contractors | AMF Electric"
  • URL: https://amfelectric.com/
  • Language: Not verified (requires HTML inspection)
  • Charset: UTF-8
  • Content Type: text/html
  • Loading State: Complete
  • Ready State: Complete

Meta Information:

  • Last Modified: 10/07/2025 15:11:31
  • Domain: amfelectric.com
  • Protocol: HTTPS ✅
  • Cookies Enabled: Yes
  • Online Status: Yes

Links Extracted (35 total)

Navigation Links:

  1. Skip to content (#main-content)
  2. Skip to main content (#main-content)
  3. Home (/)
  4. Contact Us (/contact-us/)
  5. Electrical Contractors (#electrical-contractors-services)
  6. Residential (residential-electric-services/)
  7. Commercial (commercial-electric-services/)
  8. Industrial (industrial-design-services/)
  9. Blog (/blog/)
  10. Projects (#projects-menu)
  11. Conveyors (projects/industrial-conveyor-project/)
  12. Café Design (projects/st-louis-cafe-design-for-reckitt/)
  13. Contact Us (contact-amf/)
  14. Pay Your Invoice (external PayTrace link)
  15. Employment Application (employment-application-a-m-f-electrical-contractors/)

Social Media:

  1. Facebook (https://www.facebook.com/AMF-Electrical-Contractors-Inc-177452688932824/)

Footer:

  1. Shortcut Solutions (https://shortcut.solutions) - Web design credit

Link Analysis:

  • Total: 35 links
  • Internal: 33
  • External: 2
  • Anchor links: 2
  • Missing text: 1 (Facebook icon)

Site Performance Issues

Critical Finding: Multiple pages failed to load during assessment

Failed Navigation Attempts:

URL Timeout (seconds) Error Attempts
/electrical-contractors/residential-electric-services/ 10 Loading timeout 1
/electrical-contractors/commercial-electric-services/ 10 Loading timeout 1
/electrical-contractors/industrial-design-services/ 10 Loading timeout 1
/contact-amf/ 20 Partial load, blank content 1
/blog/ 20 Blank page 1
/ (return navigation) 20 ERR_CONNECTION_TIMED_OUT 1

Performance Metrics:

  • Homepage initial load: ~10 seconds
  • Subsequent navigation: Consistently fails
  • Contact page: Loads but displays no content
  • Blog page: Loads but completely blank

Impact:

  • Prevents comprehensive accessibility assessment
  • Violates basic usability requirements
  • Creates accessibility barrier for all users
  • Particularly impacts users with:
    • Slow internet connections
    • Assistive technologies (which may be slower)
    • Cognitive disabilities (timeout causes confusion)
    • Mobile devices (limited bandwidth)

Recommended Actions:

  1. Server performance audit
  2. Database query optimization
  3. CDN implementation
  4. Image optimization
  5. Code minification
  6. Caching strategy
  7. Load testing under various conditions

TESTING TOOLS USED

Primary Tools:

  1. web_page_accessibility_report_cremotemcp

    • Comprehensive automated assessment
    • Combines axe-core, contrast, keyboard, and form tests
    • Token-efficient summary format
    • ~4k tokens per page

  2. web_screenshot_cremotemcp

    • Full-page screenshot capture
    • Visual documentation
    • Evidence for violations

  3. web_contrast_check_cremotemcp

    • Detailed color contrast analysis
    • Tests all text elements
    • WCAG AA and AAA compliance

  4. web_keyboard_test_cremotemcp

    • Keyboard navigation testing
    • Focus indicator detection
    • Tab order analysis
    • Keyboard trap detection

  5. get_accessibility_tree_cremotemcp

    • Chrome Accessibility API
    • ARIA validation
    • Semantic structure analysis
    • Contrast data annotation

  6. web_extract_links_cremotemcp

    • Link inventory
    • Text analysis
    • Broken link detection

  7. web_page_info_cremotemcp

    • Document metadata
    • Loading state
    • Performance indicators

Tool Configuration:

  • Browser: Chromium (container-based)
  • Axe-core Version: 4.8.0
  • WCAG Standard: 2.1 Level AA
  • Timeout: 5-30 seconds (varied by tool)
  • Viewport: Desktop default

ACCESSIBILITY TREE SAMPLE

RootWebArea: "Commercial and Industrial Electrical Contractors | AMF Electric"
├── generic (body)
│   ├── link: "Skip to content" [contrast available]
│   ├── link: "Skip to main content" [contrast available]
│   ├── generic (page wrapper)
│   │   ├── banner (header)
│   │   │   ├── generic (top bar)
│   │   │   │   ├── link: Logo [no text]
│   │   │   │   ├── button: "Contact Us"
│   │   │   │   └── navigation
│   │   │   │       ├── list
│   │   │   │       │   ├── listitem: link "Electrical Contractors"
│   │   │   │       │   ├── listitem: link "Blog"
│   │   │   │       │   ├── listitem: link "Projects"
│   │   │   │       │   ├── listitem: link "Contact Us"
│   │   │   │       │   ├── listitem: link "Pay Your Invoice"
│   │   │   │       │   └── listitem: link "Employment Application"
│   │   ├── main
│   │   │   ├── article
│   │   │   │   ├── main (duplicate - potential issue)
│   │   │   │   │   ├── heading: "Commercial Electrical Contractors..."
│   │   │   │   │   ├── paragraph: "Well Beyond Business As Usual..."
│   │   │   │   │   ├── section: Residential Electric
│   │   │   │   │   ├── section: Industrial Design
│   │   │   │   │   ├── section: Commercial Electric
│   │   │   │   │   └── section: Client Testimonials
│   │   └── contentinfo (footer)
│   │       ├── list: Social media
│   │       │   └── listitem: button "Facebook" [missing text]
│   │       └── paragraph: Copyright
│   ├── generic: aria-live="polite"
│   └── generic: aria-live="assertive"

WCAG SUCCESS CRITERIA MAPPING

Tested and Failed:

  • 1.1.1 Non-text Content - PARTIAL (icon link)
  • 1.4.3 Contrast (Minimum) - FAIL (71 violations)
  • 2.4.4 Link Purpose (In Context) - PARTIAL (icon link)
  • 2.4.7 Focus Visible - FAIL (20 violations)
  • 4.1.2 Name, Role, Value - PARTIAL (icon link)

Tested and Passed:

  • 2.1.1 Keyboard - PASS
  • 2.4.1 Bypass Blocks - PARTIAL (present but contrast issues)
  • 2.4.2 Page Titled - PASS
  • 2.4.3 Focus Order - PASS
  • 3.2.1 On Focus - PASS

Not Tested (Requires Additional Tools/Pages):

  • 1.2.x (Media - no video on homepage)
  • 1.3.x (Structure - requires manual review)
  • 1.4.4 (Resize Text - requires zoom testing)
  • 1.4.5 (Images of Text - requires OCR)
  • 1.4.10 (Reflow - requires responsive testing)
  • 1.4.11 (Non-text Contrast - requires UI component testing)
  • 1.4.12 (Text Spacing - requires CSS override testing)
  • 1.4.13 (Content on Hover/Focus - requires interaction testing)
  • 2.2.x (Timing - no timed content observed)
  • 2.3.x (Seizures - requires animation analysis)
  • 2.5.x (Input Modalities - requires interaction testing)
  • 3.1.x (Language - requires HTML inspection)
  • 3.2.3-3.2.4 (Consistency - requires multi-page testing)
  • 3.3.x (Forms - no forms on homepage)
  • 4.1.3 (Status Messages - no dynamic content observed)

NEXT STEPS FOR COMPLETE ASSESSMENT

  1. Resolve Site Performance Issues

    • Enable access to all pages
    • Optimize load times
    • Fix navigation failures

  2. Test Remaining Pages:

    • Residential services
    • Commercial services
    • Industrial services
    • Contact page (with form testing)
    • Blog
    • Project pages

  3. Additional Testing:

    • Zoom/resize (1.4.4, 1.4.10)
    • Responsive design
    • Media accessibility (if videos exist)
    • Cross-page consistency
    • Form validation and error handling
    • Dynamic content and status messages

  4. Manual Testing:

    • Screen reader testing (JAWS, NVDA, VoiceOver)
    • Keyboard-only navigation (full user journey)
    • Heading structure review
    • Content readability
    • Cognitive load assessment

Document Prepared: October 7, 2025
Assessment Tool: Cremote MCP Accessibility Suite
Data Format: Raw technical findings for development team