[A11Y] [High] Iframes missing accessible names

[continue]

Accessibility Issue: Iframes Missing Accessible Names

WCAG Level: A
Severity: High
Category: ARIA Usage

Issue Description

The WEAS viewer component uses an <iframe> element that has a title attribute but may need additional accessibility considerations for complex embedded content.

User Impact

• Affected Users: Screen reader users
• Severity: Users cannot understand the purpose of embedded viewers

Violations Found

File: components/calculate/weas-viewer.tsx

Lines: 148-155

<iframe
  ref={iframeRef}
  src={blobUrl}
  onLoad={handleLoad}
  title="WEAS Structure Viewer"
  sandbox="allow-scripts"
  className="h-full w-full border-0"
  style={{ height, minHeight: height, background: "#000" }}
/>

Issue: While title is present, the iframe content is complex 3D viewer that may benefit from additional context

---

Current Implementation (Good)

The current implementation does include a title attribute, which is correct. However, there are some enhancements that could improve accessibility:

Recommended Enhancements

<div role="region" aria-label="3D Molecule Viewer">
  <iframe
    ref={iframeRef}
    src={blobUrl}
    onLoad={handleLoad}
    title="WEAS 3D Structure Viewer - Interactive molecule visualization. Use mouse to rotate and zoom."
    aria-describedby="viewer-instructions"
    sandbox="allow-scripts"
    className="h-full w-full border-0"
    style={{ height, minHeight: height, background: "#000" }}
  />
  <p id="viewer-instructions" className="sr-only">
    This is an interactive 3D viewer. Drag to rotate the structure, 
    scroll to zoom in and out. The viewer displays the molecular structure 
    of the uploaded file.
  </p>
</div>

Changes Made:

1. Wrap iframe in a role="region" with aria-label
2. Provide more descriptive title including interaction hints
3. Add visually hidden instructions via aria-describedby
4. Consider adding a text alternative or summary of the structure

---

Additional Considerations

For 3Dmol.js viewer in molecule-viewer-3d.tsx:

The 3Dmol.js viewer renders directly into a div, not an iframe, but should also have:

<div
  ref={viewerRef}
  role="img"
  aria-label={`3D molecular structure visualization showing ${result.symbols?.length || 0} atoms`}
  className="h-full w-full"
/>

Testing Instructions

1. Navigate to iframe with screen reader
2. Verify title/label is announced
3. Check that purpose of viewer is clear
4. Verify interaction instructions are available

Resources

• WCAG 4.1.2 Name, Role, Value
• MDN: iframe accessibility

Acceptance Criteria

• All iframes have descriptive title attributes
• Complex viewers have interaction instructions
• Screen reader can identify viewer purpose
• Non-interactive content has text alternative

---