iframe 可访问性指南

键盘访问示例:

// 焦点管理器实现
class IframeFocusManager {
  constructor(iframe) {
    this.iframe = iframe;
    this.focusableElements = [];
    this.currentFocusIndex = -1;
    
    this.init();
  }

  init() {
    // 设置 iframe 可聚焦
    this.iframe.setAttribute('tabindex', '0');
    
    // 监听键盘事件
    this.iframe.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'Tab':
          e.preventDefault();
          this.handleTabKey(e.shiftKey);
          break;
        case 'Escape':
          this.exitIframe();
          break;
      }
    });

    // 监听焦点变化
    this.iframe.addEventListener('focus', () => {
      this.updateFocusableElements();
    });
  }

  updateFocusableElements() {
    const doc = this.iframe.contentDocument;
    this.focusableElements = Array.from(
      doc.querySelectorAll(
        'a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
      )
    );
  }

  handleTabKey(isShiftKey) {
    if (this.focusableElements.length === 0) return;
    
    this.currentFocusIndex = isShiftKey ? 
      (this.currentFocusIndex - 1 + this.focusableElements.length) % 
        this.focusableElements.length :
      (this.currentFocusIndex + 1) % this.focusableElements.length;
    
    this.focusableElements[this.currentFocusIndex].focus();
  }

  exitIframe() {
    this.iframe.blur();
    window.focus();
  }
}

视觉优化示例:

:root {
  --focus-ring-color: #2563eb;
  --focus-ring-width: 3px;
}

/* 高对比度模式适配 */
@media (forced-colors: active) {
  :root {
    --focus-ring-color: CanvasText;
  }
}

.iframe-container {
  /* 确保边框可见 */
  border: 1px solid currentColor;
  
  /* 焦点状态样式 */
  &:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .iframe-container {
    background-color: #1a1a1a;
    border-color: #404040;
  }
}

/* 支持文字缩放 */
.iframe-content {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  
  @media (max-width: 768px) {
    font-size: calc(14px + 0.5vw);
  }
}

ARIA 属性示例:

<div 
  role="region"
  aria-label="嵌入内容区域"
  class="iframe-container"
>
  <iframe
    title="产品演示视频"
    src="https://example.com/video"
    aria-describedby="iframe-description"
  ></iframe>
  
  <div id="iframe-description" class="sr-only">
    这是一个展示产品主要功能的演示视频，
    时长3分钟，包含字幕
  </div>
  
  <!-- 加载状态提示 -->
  <div 
    role="status"
    aria-live="polite"
    class="loading-indicator"
  >
    正在加载内容...
  </div>
  
  <!-- 错误提示 -->
  <div
    role="alert"
    aria-atomic="true"
    class="error-message hidden"
  >
    内容加载失败，请稍后重试
  </div>
</div>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>

移动适配示例:

.iframe-container {
  /* 确保触摸目标大小合适 */
  min-height: 44px;
  min-width: 44px;
  
  /* 触摸反馈 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  
  /* 防止双击缩放 */
  touch-action: pan-x pan-y;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .iframe-container {
    margin: 1rem 0;
    border-radius: 8px;
    
    /* 适应不同设备方向 */
    @media (orientation: landscape) {
      max-height: 80vh;
    }
  }
  
  /* 增大按钮点击区域 */
  .control-button {
    padding: 12px;
    margin: 4px;
    
    &::before {
      content: '';
      position: absolute;
      top: -8px;
      right: -8px;
      bottom: -8px;
      left: -8px;
    }
  }
}