bump
This commit is contained in:
@@ -4,10 +4,10 @@
|
||||
This document provides LLM coding agents with concrete, actionable guidance for using Cremote's accessibility testing tools to conduct ADA/WCAG compliance audits.
|
||||
|
||||
## ⚠️ IMPORTANT: Tool Naming Convention
|
||||
All cremote MCP tools use the **double suffix** naming pattern: `toolname_cremotemcp_cremotemcp`
|
||||
All cremote MCP tools use the **single suffix** naming pattern: `toolname_cremotemcp`
|
||||
|
||||
**Correct:** `web_run_axe_cremotemcp_cremotemcp`
|
||||
**Incorrect:** `web_run_axe_cremotemcp`
|
||||
**Correct:** `web_run_axe_cremotemcp`
|
||||
**Incorrect:** `web_run_axe` (missing suffix) or `web_run_axe_cremotemcp_cremotemcp` (double suffix)
|
||||
|
||||
## Quick Reference
|
||||
|
||||
@@ -19,10 +19,10 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
| Tool | Purpose | Token Usage | Replaces |
|
||||
|------|---------|-------------|----------|
|
||||
| `web_page_accessibility_report_cremotemcp_cremotemcp` | Comprehensive single-page assessment | ~4k | Multiple tools (95% savings) |
|
||||
| `web_contrast_audit_cremotemcp_cremotemcp` | Smart contrast check with patterns | ~4k | `web_contrast_check_cremotemcp_cremotemcp` (85% savings) |
|
||||
| `web_keyboard_audit_cremotemcp_cremotemcp` | Keyboard navigation summary | ~2k | `web_keyboard_test_cremotemcp_cremotemcp` (80% savings) |
|
||||
| `web_form_accessibility_audit_cremotemcp_cremotemcp` | Form accessibility check | ~2k | Manual form analysis (75% savings) |
|
||||
| `web_page_accessibility_report_cremotemcp` | Comprehensive single-page assessment | ~4k | Multiple tools (95% savings) |
|
||||
| `web_contrast_audit_cremotemcp` | Smart contrast check with patterns | ~4k | `web_contrast_check_cremotemcp` (85% savings) |
|
||||
| `web_keyboard_audit_cremotemcp` | Keyboard navigation summary | ~2k | `web_keyboard_test_cremotemcp` (80% savings) |
|
||||
| `web_form_accessibility_audit_cremotemcp` | Form accessibility check | ~2k | Manual form analysis (75% savings) |
|
||||
|
||||
**Use these for:**
|
||||
- Multi-page site assessments (10+ pages possible)
|
||||
@@ -34,25 +34,25 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
| Testing Need | Primary Tool | Secondary Tool | WCAG Criteria |
|
||||
|--------------|--------------|----------------|---------------|
|
||||
| **Comprehensive page audit** | `web_page_accessibility_report_cremotemcp_cremotemcp` ⭐ | - | All automated criteria |
|
||||
| Comprehensive automated audit | `web_run_axe_cremotemcp_cremotemcp` | - | ~57% of WCAG 2.1 AA |
|
||||
| **Smart contrast check** | `web_contrast_audit_cremotemcp_cremotemcp` ⭐ | `web_contrast_check_cremotemcp_cremotemcp` | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| Color contrast issues | `web_contrast_check_cremotemcp_cremotemcp` | `web_gradient_contrast_check_cremotemcp_cremotemcp` | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| Gradient backgrounds | `web_gradient_contrast_check_cremotemcp_cremotemcp` | - | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| **Keyboard navigation** | `web_keyboard_audit_cremotemcp_cremotemcp` ⭐ | `web_keyboard_test_cremotemcp_cremotemcp` | 2.1.1, 2.4.7 |
|
||||
| **Form accessibility** | `web_form_accessibility_audit_cremotemcp_cremotemcp` ⭐ | - | 3.3.2, 4.1.2, 1.3.1 |
|
||||
| Video/audio captions | `web_media_validation_cremotemcp_cremotemcp` | - | 1.2.2, 1.2.5, 1.4.2 |
|
||||
| Hover/focus content | `web_hover_focus_test_cremotemcp_cremotemcp` | - | 1.4.13 |
|
||||
| Text in images | `web_text_in_images_cremotemcp_cremotemcp` | - | 1.4.5, 1.4.9, 1.1.1 |
|
||||
| Cross-page consistency | `web_cross_page_consistency_cremotemcp_cremotemcp` | - | 3.2.3, 3.2.4, 1.3.1 |
|
||||
| Sensory instructions | `web_sensory_characteristics_cremotemcp_cremotemcp` | - | 1.3.3 |
|
||||
| Animations/flashing | `web_animation_flash_cremotemcp_cremotemcp` | - | 2.3.1, 2.2.2, 2.3.2 |
|
||||
| ARIA validation | `web_enhanced_accessibility_cremotemcp_cremotemcp` | `web_run_axe_cremotemcp_cremotemcp` | 1.3.1, 4.1.2, 2.4.6 |
|
||||
| Keyboard accessibility | `web_keyboard_test_cremotemcp_cremotemcp` | `web_run_axe_cremotemcp_cremotemcp` | 2.1.1, 2.4.7 |
|
||||
| Zoom/resize functionality | `web_zoom_test_cremotemcp_cremotemcp` | - | 1.4.4 |
|
||||
| Responsive design | `web_reflow_test_cremotemcp_cremotemcp` | - | 1.4.10 |
|
||||
| Visual documentation | `web_screenshot_cremotemcp_cremotemcp` | - | Evidence capture |
|
||||
| Custom JavaScript testing | `console_command_cremotemcp_cremotemcp` | - | Advanced scenarios |
|
||||
| **Comprehensive page audit** | `web_page_accessibility_report_cremotemcp` ⭐ | - | All automated criteria |
|
||||
| Comprehensive automated audit | `web_run_axe_cremotemcp` | - | ~57% of WCAG 2.1 AA |
|
||||
| **Smart contrast check** | `web_contrast_audit_cremotemcp` ⭐ | `web_contrast_check_cremotemcp` | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| Color contrast issues | `web_contrast_check_cremotemcp` | `web_gradient_contrast_check_cremotemcp` | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| Gradient backgrounds | `web_gradient_contrast_check_cremotemcp` | - | 1.4.3, 1.4.6, 1.4.11 |
|
||||
| **Keyboard navigation** | `web_keyboard_audit_cremotemcp` ⭐ | `web_keyboard_test_cremotemcp` | 2.1.1, 2.4.7 |
|
||||
| **Form accessibility** | `web_form_accessibility_audit_cremotemcp` ⭐ | - | 3.3.2, 4.1.2, 1.3.1 |
|
||||
| Video/audio captions | `web_media_validation_cremotemcp` | - | 1.2.2, 1.2.5, 1.4.2 |
|
||||
| Hover/focus content | `web_hover_focus_test_cremotemcp` | - | 1.4.13 |
|
||||
| Text in images | `web_text_in_images_cremotemcp` | - | 1.4.5, 1.4.9, 1.1.1 |
|
||||
| Cross-page consistency | `web_cross_page_consistency_cremotemcp` | - | 3.2.3, 3.2.4, 1.3.1 |
|
||||
| Sensory instructions | `web_sensory_characteristics_cremotemcp` | - | 1.3.3 |
|
||||
| Animations/flashing | `web_animation_flash_cremotemcp` | - | 2.3.1, 2.2.2, 2.3.2 |
|
||||
| ARIA validation | `web_enhanced_accessibility_cremotemcp` | `web_run_axe_cremotemcp` | 1.3.1, 4.1.2, 2.4.6 |
|
||||
| Keyboard accessibility | `web_keyboard_test_cremotemcp` | `web_run_axe_cremotemcp` | 2.1.1, 2.4.7 |
|
||||
| Zoom/resize functionality | `web_zoom_test_cremotemcp` | - | 1.4.4 |
|
||||
| Responsive design | `web_reflow_test_cremotemcp` | - | 1.4.10 |
|
||||
| Visual documentation | `web_screenshot_cremotemcp` | - | Evidence capture |
|
||||
| Custom JavaScript testing | `console_command_cremotemcp` | - | Advanced scenarios |
|
||||
|
||||
⭐ = Token-efficient summary tool (recommended for site-wide assessments)
|
||||
|
||||
@@ -62,7 +62,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
**Single call per page - ~4k tokens:**
|
||||
```
|
||||
1. web_page_accessibility_report_cremotemcp_cremotemcp # Comprehensive assessment
|
||||
1. web_page_accessibility_report_cremotemcp # Comprehensive assessment
|
||||
- Includes: axe-core, contrast, keyboard, forms
|
||||
- Returns: Structured summary with compliance status
|
||||
- Token usage: ~4k (vs 80k+ with old approach)
|
||||
@@ -74,35 +74,35 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
**Use when you need raw data or specific tool features:**
|
||||
```
|
||||
1. web_inject_axe_cremotemcp_cremotemcp # Inject axe-core library
|
||||
2. web_run_axe_cremotemcp_cremotemcp # Run comprehensive automated tests
|
||||
3. web_contrast_check_cremotemcp_cremotemcp # Detailed contrast analysis
|
||||
4. web_gradient_contrast_check_cremotemcp_cremotemcp # Gradient background contrast
|
||||
5. web_media_validation_cremotemcp_cremotemcp # Video/audio caption validation
|
||||
6. web_hover_focus_test_cremotemcp_cremotemcp # Hover/focus content testing
|
||||
7. web_text_in_images_cremotemcp_cremotemcp # Text-in-images detection
|
||||
8. web_sensory_characteristics_cremotemcp_cremotemcp # Sensory instruction detection
|
||||
9. web_animation_flash_cremotemcp_cremotemcp # Animation/flash detection
|
||||
10. web_enhanced_accessibility_cremotemcp_cremotemcp # Enhanced ARIA validation
|
||||
11. web_keyboard_test_cremotemcp_cremotemcp # Keyboard navigation testing
|
||||
12. web_zoom_test_cremotemcp_cremotemcp # Zoom functionality testing
|
||||
13. web_reflow_test_cremotemcp_cremotemcp # Responsive design testing
|
||||
1. web_inject_axe_cremotemcp # Inject axe-core library
|
||||
2. web_run_axe_cremotemcp # Run comprehensive automated tests
|
||||
3. web_contrast_check_cremotemcp # Detailed contrast analysis
|
||||
4. web_gradient_contrast_check_cremotemcp # Gradient background contrast
|
||||
5. web_media_validation_cremotemcp # Video/audio caption validation
|
||||
6. web_hover_focus_test_cremotemcp # Hover/focus content testing
|
||||
7. web_text_in_images_cremotemcp # Text-in-images detection
|
||||
8. web_sensory_characteristics_cremotemcp # Sensory instruction detection
|
||||
9. web_animation_flash_cremotemcp # Animation/flash detection
|
||||
10. web_enhanced_accessibility_cremotemcp # Enhanced ARIA validation
|
||||
11. web_keyboard_test_cremotemcp # Keyboard navigation testing
|
||||
12. web_zoom_test_cremotemcp # Zoom functionality testing
|
||||
13. web_reflow_test_cremotemcp # Responsive design testing
|
||||
```
|
||||
|
||||
**Note:** For multi-page sites, also run:
|
||||
```
|
||||
14. web_cross_page_consistency_cremotemcp_cremotemcp # Cross-page consistency
|
||||
14. web_cross_page_consistency_cremotemcp # Cross-page consistency
|
||||
```
|
||||
|
||||
#### Option 3: Hybrid Approach (balanced)
|
||||
|
||||
**Use summary tools for initial assessment, detailed tools for specific issues:**
|
||||
```
|
||||
1. web_page_accessibility_report_cremotemcp_cremotemcp # Initial comprehensive assessment
|
||||
1. web_page_accessibility_report_cremotemcp # Initial comprehensive assessment
|
||||
2. If specific issues found:
|
||||
a. web_contrast_audit_cremotemcp_cremotemcp # Deep dive on contrast
|
||||
b. web_keyboard_audit_cremotemcp_cremotemcp # Deep dive on keyboard
|
||||
c. web_form_accessibility_audit_cremotemcp_cremotemcp # Deep dive on forms
|
||||
a. web_contrast_audit_cremotemcp # Deep dive on contrast
|
||||
b. web_keyboard_audit_cremotemcp # Deep dive on keyboard
|
||||
c. web_form_accessibility_audit_cremotemcp # Deep dive on forms
|
||||
```
|
||||
|
||||
## Tool Usage Patterns
|
||||
@@ -112,7 +112,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Single call - comprehensive assessment (~4k tokens)
|
||||
{
|
||||
"tool": "web_page_accessibility_report_cremotemcp_cremotemcp",
|
||||
"tool": "web_page_accessibility_report_cremotemcp",
|
||||
"arguments": {
|
||||
"tests": ["all"], // or ["wcag", "contrast", "keyboard", "forms"]
|
||||
"standard": "WCAG21AA",
|
||||
@@ -134,7 +134,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Step 1: Inject axe-core
|
||||
{
|
||||
"tool": "web_inject_axe_cremotemcp_cremotemcp",
|
||||
"tool": "web_inject_axe_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 30
|
||||
}
|
||||
@@ -142,7 +142,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// Step 2: Run comprehensive tests
|
||||
{
|
||||
"tool": "web_run_axe_cremotemcp_cremotemcp",
|
||||
"tool": "web_run_axe_cremotemcp",
|
||||
"arguments": {
|
||||
"run_only": ["wcag2a", "wcag2aa", "wcag21aa"],
|
||||
"timeout": 30
|
||||
@@ -157,7 +157,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Token-efficient contrast check with prioritized failures (~4k tokens)
|
||||
{
|
||||
"tool": "web_contrast_audit_cremotemcp_cremotemcp",
|
||||
"tool": "web_contrast_audit_cremotemcp",
|
||||
"arguments": {
|
||||
"priority_selectors": ["button", "a", "nav", "footer"],
|
||||
"threshold": "AA",
|
||||
@@ -176,7 +176,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// For pages with known or suspected contrast issues
|
||||
{
|
||||
"tool": "web_contrast_check_cremotemcp_cremotemcp",
|
||||
"tool": "web_contrast_check_cremotemcp",
|
||||
"arguments": {
|
||||
"selector": "body", // Test entire page
|
||||
"timeout": 10
|
||||
@@ -185,7 +185,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// For specific sections
|
||||
{
|
||||
"tool": "web_contrast_check_cremotemcp_cremotemcp",
|
||||
"tool": "web_contrast_check_cremotemcp",
|
||||
"arguments": {
|
||||
"selector": ".main-content", // Test specific area
|
||||
"timeout": 10
|
||||
@@ -198,7 +198,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Token-efficient keyboard assessment (~2k tokens)
|
||||
{
|
||||
"tool": "web_keyboard_audit_cremotemcp_cremotemcp",
|
||||
"tool": "web_keyboard_audit_cremotemcp",
|
||||
"arguments": {
|
||||
"check_focus_indicators": true,
|
||||
"check_tab_order": true,
|
||||
@@ -218,7 +218,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
```json
|
||||
{
|
||||
"tool": "web_keyboard_test_cremotemcp_cremotemcp",
|
||||
"tool": "web_keyboard_test_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -235,7 +235,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Comprehensive form accessibility check (~2k tokens)
|
||||
{
|
||||
"tool": "web_form_accessibility_audit_cremotemcp_cremotemcp",
|
||||
"tool": "web_form_accessibility_audit_cremotemcp",
|
||||
"arguments": {
|
||||
"form_selector": "", // Empty = all forms
|
||||
"timeout": 10
|
||||
@@ -256,7 +256,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Test zoom levels (WCAG 1.4.4)
|
||||
{
|
||||
"tool": "web_zoom_test_cremotemcp_cremotemcp",
|
||||
"tool": "web_zoom_test_cremotemcp",
|
||||
"arguments": {
|
||||
"zoom_levels": [1.0, 2.0, 4.0],
|
||||
"timeout": 10
|
||||
@@ -265,7 +265,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// Test responsive breakpoints (WCAG 1.4.10)
|
||||
{
|
||||
"tool": "web_reflow_test_cremotemcp_cremotemcp",
|
||||
"tool": "web_reflow_test_cremotemcp",
|
||||
"arguments": {
|
||||
"widths": [320, 768, 1280],
|
||||
"timeout": 10
|
||||
@@ -278,7 +278,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Capture baseline
|
||||
{
|
||||
"tool": "web_screenshot_cremotemcp_cremotemcp",
|
||||
"tool": "web_screenshot_cremotemcp",
|
||||
"arguments": {
|
||||
"output": "/tmp/baseline.png",
|
||||
"timeout": 5
|
||||
@@ -287,7 +287,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// Capture at 200% zoom
|
||||
{
|
||||
"tool": "web_screenshot_cremotemcp_cremotemcp",
|
||||
"tool": "web_screenshot_cremotemcp",
|
||||
"arguments": {
|
||||
"output": "/tmp/zoom-200.png",
|
||||
"zoom_level": 2.0,
|
||||
@@ -297,7 +297,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// Capture mobile view
|
||||
{
|
||||
"tool": "web_screenshot_cremotemcp_cremotemcp",
|
||||
"tool": "web_screenshot_cremotemcp",
|
||||
"arguments": {
|
||||
"output": "/tmp/mobile-320.png",
|
||||
"width": 320,
|
||||
@@ -312,7 +312,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Test specific element with gradient background
|
||||
{
|
||||
"tool": "web_gradient_contrast_check_cremotemcp_cremotemcp",
|
||||
"tool": "web_gradient_contrast_check_cremotemcp",
|
||||
"arguments": {
|
||||
"selector": ".hero-section",
|
||||
"timeout": 10
|
||||
@@ -321,7 +321,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
|
||||
// Test all elements with gradient backgrounds
|
||||
{
|
||||
"tool": "web_gradient_contrast_check_cremotemcp_cremotemcp",
|
||||
"tool": "web_gradient_contrast_check_cremotemcp",
|
||||
"arguments": {
|
||||
"selector": "body", // Scans entire page
|
||||
"timeout": 10
|
||||
@@ -340,7 +340,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Validate all video/audio elements on page
|
||||
{
|
||||
"tool": "web_media_validation_cremotemcp_cremotemcp",
|
||||
"tool": "web_media_validation_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -358,7 +358,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Test all hover/focus triggered content
|
||||
{
|
||||
"tool": "web_hover_focus_test_cremotemcp_cremotemcp",
|
||||
"tool": "web_hover_focus_test_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -376,7 +376,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Detect text embedded in images using OCR
|
||||
{
|
||||
"tool": "web_text_in_images_cremotemcp_cremotemcp",
|
||||
"tool": "web_text_in_images_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 30 // OCR is CPU-intensive, allow more time
|
||||
}
|
||||
@@ -394,7 +394,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Check consistency across multiple pages
|
||||
{
|
||||
"tool": "web_cross_page_consistency_cremotemcp_cremotemcp",
|
||||
"tool": "web_cross_page_consistency_cremotemcp",
|
||||
"arguments": {
|
||||
"urls": [
|
||||
"https://example.com/",
|
||||
@@ -418,7 +418,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Detect instructions relying on sensory characteristics
|
||||
{
|
||||
"tool": "web_sensory_characteristics_cremotemcp_cremotemcp",
|
||||
"tool": "web_sensory_characteristics_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -437,7 +437,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Detect animations and flashing content
|
||||
{
|
||||
"tool": "web_animation_flash_cremotemcp_cremotemcp",
|
||||
"tool": "web_animation_flash_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -455,7 +455,7 @@ These tools reduce token usage by 85-95% while providing comprehensive, actionab
|
||||
```json
|
||||
// Perform enhanced accessibility tree analysis
|
||||
{
|
||||
"tool": "web_enhanced_accessibility_cremotemcp_cremotemcp",
|
||||
"tool": "web_enhanced_accessibility_cremotemcp",
|
||||
"arguments": {
|
||||
"timeout": 10
|
||||
}
|
||||
@@ -513,7 +513,7 @@ WCAG AA Violations:
|
||||
**Remediation:**
|
||||
- Darken foreground color or lighten background
|
||||
- Use contrast ratio calculator to find compliant colors
|
||||
- Test with `web_contrast_check_cremotemcp_cremotemcp` after fixes
|
||||
- Test with `web_contrast_check_cremotemcp` after fixes
|
||||
|
||||
### Keyboard Test Results
|
||||
|
||||
@@ -568,17 +568,17 @@ Zoom 400% ✗ FAIL:
|
||||
For each page (10+ pages possible within 200k token limit):
|
||||
|
||||
1. Navigate to page
|
||||
web_navigate_cremotemcp_cremotemcp({ "url": page_url })
|
||||
web_navigate_cremotemcp({ "url": page_url })
|
||||
|
||||
2. Get comprehensive assessment (~4k tokens)
|
||||
web_page_accessibility_report_cremotemcp_cremotemcp({
|
||||
web_page_accessibility_report_cremotemcp({
|
||||
"tests": ["all"],
|
||||
"standard": "WCAG21AA",
|
||||
"timeout": 30
|
||||
})
|
||||
|
||||
3. Capture screenshot for documentation
|
||||
web_screenshot_cremotemcp_cremotemcp({
|
||||
web_screenshot_cremotemcp({
|
||||
"output": "screenshots/page-name.png"
|
||||
})
|
||||
|
||||
@@ -589,9 +589,9 @@ For each page (10+ pages possible within 200k token limit):
|
||||
- estimated_remediation_hours
|
||||
|
||||
5. If deep dive needed on specific issues:
|
||||
a. web_contrast_audit_cremotemcp_cremotemcp for contrast patterns
|
||||
b. web_keyboard_audit_cremotemcp_cremotemcp for keyboard details
|
||||
c. web_form_accessibility_audit_cremotemcp_cremotemcp for form issues
|
||||
a. web_contrast_audit_cremotemcp for contrast patterns
|
||||
b. web_keyboard_audit_cremotemcp for keyboard details
|
||||
c. web_form_accessibility_audit_cremotemcp for form issues
|
||||
|
||||
Total per page: ~4-6k tokens (vs 80k+ with traditional approach)
|
||||
Total for 10 pages: ~50k tokens (vs 800k+ with traditional approach)
|
||||
@@ -603,20 +603,20 @@ Total for 10 pages: ~50k tokens (vs 800k+ with traditional approach)
|
||||
|
||||
```
|
||||
1. Navigate to page
|
||||
2. Run web_inject_axe_cremotemcp_cremotemcp
|
||||
3. Run web_run_axe_cremotemcp_cremotemcp with wcag2aa tags
|
||||
2. Run web_inject_axe_cremotemcp
|
||||
3. Run web_run_axe_cremotemcp with wcag2aa tags
|
||||
4. Run specialized tests based on page content:
|
||||
a. web_contrast_check_cremotemcp_cremotemcp for contrast issues
|
||||
b. web_gradient_contrast_check_cremotemcp_cremotemcp for gradient backgrounds
|
||||
c. web_media_validation_cremotemcp_cremotemcp if page has video/audio
|
||||
d. web_hover_focus_test_cremotemcp_cremotemcp for tooltips/popovers
|
||||
e. web_text_in_images_cremotemcp_cremotemcp for infographics/charts
|
||||
f. web_sensory_characteristics_cremotemcp_cremotemcp for instructional content
|
||||
g. web_animation_flash_cremotemcp_cremotemcp for animated content
|
||||
h. web_enhanced_accessibility_cremotemcp_cremotemcp for ARIA validation
|
||||
i. web_keyboard_test_cremotemcp_cremotemcp for keyboard issues
|
||||
5. Run web_zoom_test_cremotemcp_cremotemcp
|
||||
6. Run web_reflow_test_cremotemcp_cremotemcp
|
||||
a. web_contrast_check_cremotemcp for contrast issues
|
||||
b. web_gradient_contrast_check_cremotemcp for gradient backgrounds
|
||||
c. web_media_validation_cremotemcp if page has video/audio
|
||||
d. web_hover_focus_test_cremotemcp for tooltips/popovers
|
||||
e. web_text_in_images_cremotemcp for infographics/charts
|
||||
f. web_sensory_characteristics_cremotemcp for instructional content
|
||||
g. web_animation_flash_cremotemcp for animated content
|
||||
h. web_enhanced_accessibility_cremotemcp for ARIA validation
|
||||
i. web_keyboard_test_cremotemcp for keyboard issues
|
||||
5. Run web_zoom_test_cremotemcp
|
||||
6. Run web_reflow_test_cremotemcp
|
||||
7. Capture screenshots for documentation
|
||||
8. Generate comprehensive report with all findings
|
||||
|
||||
@@ -627,7 +627,7 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page
|
||||
2. Run web_run_axe_cremotemcp_cremotemcp
|
||||
2. Run web_run_axe_cremotemcp
|
||||
3. Compare results with baseline
|
||||
4. If new violations:
|
||||
a. Run specialized tests for affected areas
|
||||
@@ -639,7 +639,7 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page
|
||||
2. Run web_contrast_audit_cremotemcp_cremotemcp (~4k tokens)
|
||||
2. Run web_contrast_audit_cremotemcp (~4k tokens)
|
||||
3. Analyze:
|
||||
- critical_failures (top 20 with worst ratios)
|
||||
- failure_patterns (grouped similar issues)
|
||||
@@ -647,7 +647,7 @@ Total per page: ~80-100k tokens
|
||||
a. Capture screenshot of example
|
||||
b. Document current and required contrast ratios
|
||||
c. Suggest color adjustments for all instances
|
||||
5. After fixes, re-run web_contrast_audit_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_contrast_audit_cremotemcp
|
||||
6. Verify all violations resolved
|
||||
```
|
||||
|
||||
@@ -655,7 +655,7 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page
|
||||
2. Run web_keyboard_audit_cremotemcp_cremotemcp (~2k tokens)
|
||||
2. Run web_keyboard_audit_cremotemcp (~2k tokens)
|
||||
3. Analyze:
|
||||
- status: PASS, PARTIAL, FAIL
|
||||
- issues categorized by type and severity
|
||||
@@ -663,7 +663,7 @@ Total per page: ~80-100k tokens
|
||||
4. For each issue:
|
||||
a. Document element and issue type
|
||||
b. Suggest remediation (tabindex, semantic HTML, focus styles)
|
||||
5. After fixes, re-run web_keyboard_audit_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_keyboard_audit_cremotemcp
|
||||
6. Manually verify complex interactions
|
||||
```
|
||||
|
||||
@@ -671,14 +671,14 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page with video/audio content
|
||||
2. Run web_media_validation_cremotemcp_cremotemcp
|
||||
2. Run web_media_validation_cremotemcp
|
||||
3. For each media element:
|
||||
a. Check for caption tracks (WCAG 1.2.2 Level A)
|
||||
b. Check for audio description tracks (WCAG 1.2.5 Level AA)
|
||||
c. Verify track files are accessible
|
||||
d. Check for autoplay violations (WCAG 1.4.2 Level A)
|
||||
4. Document missing captions/descriptions
|
||||
5. After fixes, re-run web_media_validation_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_media_validation_cremotemcp
|
||||
6. Manually verify caption accuracy (not automated)
|
||||
```
|
||||
|
||||
@@ -686,14 +686,14 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page with images
|
||||
2. Run web_text_in_images_cremotemcp_cremotemcp (allow 30s timeout for OCR)
|
||||
2. Run web_text_in_images_cremotemcp (allow 30s timeout for OCR)
|
||||
3. For each image with detected text:
|
||||
a. Review detected text vs alt text
|
||||
b. If alt text missing: Add comprehensive alt text
|
||||
c. If alt text insufficient: Expand to include all text
|
||||
d. Consider using real text instead of images
|
||||
4. Capture screenshots of problematic images
|
||||
5. After fixes, re-run web_text_in_images_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_text_in_images_cremotemcp
|
||||
6. Verify all images with text have adequate alt text
|
||||
```
|
||||
|
||||
@@ -701,13 +701,13 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Identify key pages to test (home, about, contact, services, etc.)
|
||||
2. Run web_cross_page_consistency_cremotemcp_cremotemcp with all URLs
|
||||
2. Run web_cross_page_consistency_cremotemcp with all URLs
|
||||
3. Analyze common navigation elements
|
||||
4. For each inconsistent page:
|
||||
a. Document missing navigation links
|
||||
b. Check landmark structure (header, footer, main, nav)
|
||||
c. Verify navigation order consistency
|
||||
5. After fixes, re-run web_cross_page_consistency_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_cross_page_consistency_cremotemcp
|
||||
6. Verify all pages have consistent navigation
|
||||
```
|
||||
|
||||
@@ -715,7 +715,7 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page with animations
|
||||
2. Run web_animation_flash_cremotemcp_cremotemcp
|
||||
2. Run web_animation_flash_cremotemcp
|
||||
3. For each animation:
|
||||
a. Check flash rate (must be ≤ 3 flashes/second)
|
||||
b. Check for pause/stop controls (if > 5 seconds)
|
||||
@@ -724,7 +724,7 @@ Total per page: ~80-100k tokens
|
||||
a. Reduce flash rate or remove flashing
|
||||
b. Add pause/stop controls
|
||||
c. Disable autoplay or add controls
|
||||
5. After fixes, re-run web_animation_flash_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_animation_flash_cremotemcp
|
||||
6. Verify no flashing content exceeds 3 flashes/second
|
||||
```
|
||||
|
||||
@@ -732,14 +732,14 @@ Total per page: ~80-100k tokens
|
||||
|
||||
```
|
||||
1. Navigate to page with interactive elements
|
||||
2. Run web_enhanced_accessibility_cremotemcp_cremotemcp
|
||||
2. Run web_enhanced_accessibility_cremotemcp
|
||||
3. For each element with issues:
|
||||
a. Missing accessible name: Add aria-label or visible text
|
||||
b. aria-hidden on interactive: Remove aria-hidden
|
||||
c. Invalid tabindex: Use 0 or -1
|
||||
d. Multiple landmarks: Add distinguishing labels
|
||||
4. Capture screenshots of problematic elements
|
||||
5. After fixes, re-run web_enhanced_accessibility_cremotemcp_cremotemcp
|
||||
5. After fixes, re-run web_enhanced_accessibility_cremotemcp
|
||||
6. Verify all interactive elements have accessible names
|
||||
```
|
||||
|
||||
@@ -759,7 +759,7 @@ Solution: Increase timeout parameter, test on smaller page sections
|
||||
|
||||
**Error:** "No tab available"
|
||||
```
|
||||
Solution: Navigate to a page first using web_navigate_cremotemcp_cremotemcp
|
||||
Solution: Navigate to a page first using web_navigate_cremotemcp
|
||||
```
|
||||
|
||||
**Error:** "Failed to get page"
|
||||
@@ -771,10 +771,10 @@ Solution: Verify tab ID is valid, check if page is still loaded
|
||||
|
||||
### 1. Use Token-Efficient Tools for Site-Wide Assessments (NEW)
|
||||
For multi-page sites, **always use the summary tools first**:
|
||||
- `web_page_accessibility_report_cremotemcp_cremotemcp` - Comprehensive page assessment (~4k tokens)
|
||||
- `web_contrast_audit_cremotemcp_cremotemcp` - Smart contrast check (~4k tokens)
|
||||
- `web_keyboard_audit_cremotemcp_cremotemcp` - Keyboard summary (~2k tokens)
|
||||
- `web_form_accessibility_audit_cremotemcp_cremotemcp` - Form analysis (~2k tokens)
|
||||
- `web_page_accessibility_report_cremotemcp` - Comprehensive page assessment (~4k tokens)
|
||||
- `web_contrast_audit_cremotemcp` - Smart contrast check (~4k tokens)
|
||||
- `web_keyboard_audit_cremotemcp` - Keyboard summary (~2k tokens)
|
||||
- `web_form_accessibility_audit_cremotemcp` - Form analysis (~2k tokens)
|
||||
|
||||
**Benefits:**
|
||||
- 85-95% token reduction
|
||||
@@ -783,7 +783,7 @@ For multi-page sites, **always use the summary tools first**:
|
||||
- Compliance status and legal risk assessment
|
||||
|
||||
### 2. Start with Comprehensive Assessment
|
||||
Use `web_page_accessibility_report_cremotemcp_cremotemcp` as your foundation. It combines axe-core, contrast, keyboard, and form tests in a single call with intelligent summarization.
|
||||
Use `web_page_accessibility_report_cremotemcp` as your foundation. It combines axe-core, contrast, keyboard, and form tests in a single call with intelligent summarization.
|
||||
|
||||
### 3. Test in Logical Order
|
||||
```
|
||||
@@ -804,7 +804,7 @@ When reporting issues, include:
|
||||
Always capture screenshots when documenting issues:
|
||||
```json
|
||||
{
|
||||
"tool": "web_screenshot_cremotemcp_cremotemcp",
|
||||
"tool": "web_screenshot_cremotemcp",
|
||||
"arguments": {
|
||||
"output": "/tmp/issue-contrast-button.png"
|
||||
}
|
||||
@@ -845,7 +845,7 @@ Always recommend manual testing with assistive technologies for comprehensive au
|
||||
|
||||
### 8. Token Management Strategy
|
||||
**For site-wide assessments (10+ pages):**
|
||||
1. Use summary tools exclusively: `web_page_accessibility_report_cremotemcp_cremotemcp`
|
||||
1. Use summary tools exclusively: `web_page_accessibility_report_cremotemcp`
|
||||
2. Budget ~4-6k tokens per page
|
||||
3. Reserve 20-30k tokens for report generation
|
||||
4. Total: ~70k tokens for 10 pages + report
|
||||
@@ -976,10 +976,10 @@ The cremote platform provides comprehensive automated testing with two approache
|
||||
|
||||
### Token-Efficient Summary Tools (NEW - 2025-10-03)
|
||||
**Best for: Site-wide assessments, multi-page audits**
|
||||
- `web_page_accessibility_report_cremotemcp_cremotemcp` - Comprehensive assessment (~4k tokens)
|
||||
- `web_contrast_audit_cremotemcp_cremotemcp` - Smart contrast check (~4k tokens)
|
||||
- `web_keyboard_audit_cremotemcp_cremotemcp` - Keyboard summary (~2k tokens)
|
||||
- `web_form_accessibility_audit_cremotemcp_cremotemcp` - Form analysis (~2k tokens)
|
||||
- `web_page_accessibility_report_cremotemcp` - Comprehensive assessment (~4k tokens)
|
||||
- `web_contrast_audit_cremotemcp` - Smart contrast check (~4k tokens)
|
||||
- `web_keyboard_audit_cremotemcp` - Keyboard summary (~2k tokens)
|
||||
- `web_form_accessibility_audit_cremotemcp` - Form analysis (~2k tokens)
|
||||
|
||||
**Benefits:**
|
||||
- 85-95% token reduction
|
||||
@@ -1034,7 +1034,7 @@ The cremote platform provides comprehensive automated testing with two approache
|
||||
|
||||
**For LLM Agents:** This guide is designed for programmatic use. Always provide specific, actionable recommendations based on test results. Include WCAG criterion numbers, severity levels, and concrete remediation steps in your reports.
|
||||
|
||||
**⚠️ IMPORTANT:** All cremote MCP tools use the **double suffix** naming pattern: `toolname_cremotemcp_cremotemcp`
|
||||
**⚠️ IMPORTANT:** All cremote MCP tools use the **single suffix** naming pattern: `toolname_cremotemcp`
|
||||
|
||||
**LATEST UPDATE (2025-10-03):** Four new token-efficient summary tools have been added, reducing token usage by 85-95% and enabling comprehensive site-wide assessments. These tools provide structured, actionable results with compliance status, legal risk assessment, and remediation estimates. **Use these tools for all multi-page assessments.**
|
||||
|
||||
|
||||
Reference in New Issue
Block a user