check_orientation_lock

Test HTML content to detect forced orientation locks and ensure compliance with web accessibility standards. Identify issues that restrict user flexibility in viewing content.

Instructions

Check if content forces a specific orientation

Input Schema

TableJSON Schema

Name	Required	Description	Default
`html`	Yes	HTML content to test for orientation lock issues

Implementation Reference

src/index.ts:675-770 (handler)

The handler function that implements the check_orientation_lock tool. It uses Puppeteer to load the provided HTML, runs Axe accessibility analysis focused on the meta-viewport rule, checks for orientation-specific restrictions in viewport meta tags, and additionally scans CSS for orientation media queries.

async checkOrientationLock(args: any) {
  const { html } = args;

  if (!html) {
    throw new McpError(
      ErrorCode.InvalidParams,
      'Missing required parameter: html'
    );
  }

  let browser;
  try {
    browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const page = await browser.newPage();
    
    await page.setContent(html);
    
    // Run the orientation-lock rule (experimental in Axe)
    const axe = new AxePuppeteer(page)
      .options({
        rules: {
          'meta-viewport': { enabled: true }
        }
      });
    
    const result = await axe.analyze();
    
    // Filter for the meta-viewport rule and orientation-related issues
    const orientationIssues = result.violations.filter(v => 
      v.id === 'meta-viewport' && 
      v.nodes.some(n => 
        n.html.includes('user-scalable=no') || 
        n.html.includes('maximum-scale=1.0') ||
        n.html.includes('orientation=portrait') ||
        n.html.includes('orientation=landscape')
      )
    );
    
    // Also look for CSS orientation locks
    // This requires additional checks since Axe doesn't have a specific rule for this
    const hasCssOrientationLock = await page.evaluate(() => {
      const styleSheets = Array.from(document.styleSheets);
      try {
        for (const sheet of styleSheets) {
          const rules = Array.from(sheet.cssRules || []);
          for (const rule of rules) {
            const ruleText = rule.cssText || '';
            if (
              ruleText.includes('@media screen and (orientation:') ||
              ruleText.includes('orientation:')
            ) {
              return true;
            }
          }
        }
      } catch (e) {
        // CORS issues can occur when accessing CSS rules
        console.error('Error checking CSS:', e);
      }
      return false;
    });
    
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify({
            hasOrientationLock: orientationIssues.length > 0 || hasCssOrientationLock,
            viewportIssues: orientationIssues.map(issue => ({
              id: issue.id,
              impact: issue.impact,
              description: issue.description,
              help: issue.help,
              helpUrl: issue.helpUrl,
              affectedNodes: issue.nodes.map(node => ({
                html: node.html,
                target: node.target,
                failureSummary: node.failureSummary
              }))
            })),
            hasCssOrientationLock,
            wcagCriteria: "WCAG 2.1 SC 1.3.4 (Orientation)",
            helpUrl: "https://www.w3.org/WAI/WCAG21/Understanding/orientation.html"
          }, null, 2),
        },
      ],
    };
  } finally {
    if (browser) {
      await browser.close();
    }
  }
}

src/index.ts:145-154 (schema)

Input schema definition for the check_orientation_lock tool, requiring an 'html' string parameter.

inputSchema: {
  type: 'object',
  properties: {
    html: {
      type: 'string',
      description: 'HTML content to test for orientation lock issues',
    }
  },
  required: ['html'],
},

src/index.ts:142-155 (registration)

Tool registration in the ListToolsRequestSchema response, defining name, description, and input schema.

{
  name: 'check_orientation_lock',
  description: 'Check if content forces a specific orientation',
  inputSchema: {
    type: 'object',
    properties: {
      html: {
        type: 'string',
        description: 'HTML content to test for orientation lock issues',
      }
    },
    required: ['html'],
  },
}

src/index.ts:172-173 (registration)
Dispatch/registration in the CallToolRequestSchema switch statement that routes calls to the checkOrientationLock handler.
```
case 'check_orientation_lock':
  return await this.checkOrientationLock(request.params.arguments);
```

A11y MCP Server