响应式内容（小屏模态/大屏内嵌）的无障碍访问实现咨询

Great question—responsive components often have tricky accessibility edge cases, so let’s unpack your concerns one by one:

1. Is hiding the button on large screens problematic? #

Nope, this is totally reasonable! Here’s why:

• When the panel is always visible as inline content on large screens, the trigger button serves no functional purpose. Using a media query to set display: none on the button (or a proper visually-hidden class if you need to keep it in the DOM but hidden) is the right approach.
• Key note: Avoid using visibility: hidden or opacity: 0 alone for hiding the button on large screens—these keep the element in the accessibility tree, which could confuse screen reader users who might still encounter an unused button. Stick to display: none or a visually-hidden utility that sets position: absolute with off-screen positioning only if you need to retain the button in the DOM for some reason (but display: none is cleaner here).

2. Do we need role="dialog"? And should we remove it on large screens? #

This depends entirely on the panel’s behavior per screen size:

• Small screens (modal/fullscreen panel): Yes, you should add role="dialog" along with aria-modal="true" here. A fullscreen panel triggered by a button that blocks interaction with the rest of the page fits the definition of a dialog. You’ll also need to:
  • Move keyboard focus into the dialog when it opens (e.g., focus the first interactive element inside the panel, or a hidden close button if there’s none).
  • Trap focus inside the dialog so users can’t tab into background content.
  • Allow closing via the Escape key, and return focus to the trigger button when closed.
• Large screens (inline content): Absolutely remove role="dialog" and aria-modal="true" here. A dialog signals a modal, interruptive experience—if the panel is just part of the page flow on large screens, marking it as a dialog would mislead screen reader users and break expected navigation patterns.

3. How to avoid duplicate content? #

You don’t need two copies of the panel content! Instead, dynamically adjust the panel’s attributes and behavior based on screen size using JavaScript:

• Use window.matchMedia() to listen for changes in your media query breakpoint.
• When switching to small-screen mode:
  • Show the trigger button.
  • Add role="dialog", aria-modal="true" to the panel.
  • Hide the panel by default (via CSS or JS), and toggle its visibility with the button while updating aria-expanded on the button.
• When switching to large-screen mode:
  • Hide the trigger button.
  • Remove role="dialog" and aria-modal="true" from the panel.
  • Ensure the panel is always visible as inline content.

Example code snippet for media query listening: #

const filterButton = document.querySelector('button[aria-controls="filter-panel"]');
const filterPanel = document.getElementById('filter-panel');
const largeScreenQuery = window.matchMedia('(min-width: 1024px)'); // Adjust to your breakpoint

function handleScreenSizeChange(e) {
  if (e.matches) {
    // Large screen: disable dialog behavior
    filterButton.style.display = 'none';
    filterPanel.removeAttribute('role');
    filterPanel.removeAttribute('aria-modal');
    filterPanel.classList.remove('active'); // Ensure panel stays visible
  } else {
    // Small screen: enable dialog behavior
    filterButton.style.display = 'block';
    filterPanel.setAttribute('role', 'dialog');
    filterPanel.setAttribute('aria-modal', 'true');
    filterPanel.classList.remove('active'); // Reset to hidden state
    filterButton.setAttribute('aria-expanded', 'false');
  }
}

// Initial check on page load
handleScreenSizeChange(largeScreenQuery);
// Listen for screen size changes
largeScreenQuery.addEventListener('change', handleScreenSizeChange);

4. Additional accessibility tweaks for your implementation #

• Add a visible close button inside the panel for small screens (screen reader users expect explicit close controls, not just relying on the trigger button).
• Ensure the panel has a clear label (use aria-label="Filter options" or aria-labelledby pointing to a hidden heading inside the panel) so screen reader users understand what the dialog is for.
• When the dialog is open, use the inert attribute on background content (or manage focus manually) to prevent interaction with non-dialog elements.

内容的提问来源于stack exchange，提问作者Bregt