# Metamodel widget

Component documentation for Metamodel widget — Accessibility.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.metamodel-widget.accessibility"
  source="components/dist/registries/dskit.json#metamodel-widget"
  schema={1}
/>

<ComponentTabs component={"metamodel-widget"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"color-contrast","note":"status colors must have a non-color cue (icon, label, pattern)"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"typography-readability"},"section":{"slug":"typography-readability","title":"Typography & Readability","wcag":[],"body_excerpt":"- Default body text size is 14px - Minimum body text size is 12px - 11px is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spac"}},{"ref":{"ref":"layout-responsiveness","note":"tables and graphs must reflow or scroll horizontally; never clip"},"section":{"slug":"layout-responsiveness","title":"Layout & Responsiveness","wcag":["2.5.8"],"body_excerpt":"- Content reflows at 400% zoom - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: 44px ideal / 24px minimum with sufficient spacing (WCAG 2.5.8) -"}},{"ref":{"ref":"aria-guidance","note":"tables use thead/tbody/scope; charts expose data tables for screen readers"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}},{"ref":{"ref":"keyboard-focus"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.