Accessible Icon Implementation and ARIA Attributes

Under WCAG guidelines, SVGs and icon fonts must communicate their semantic role to screen readers:

Decorative Icons (Paired with Text)

When an icon sits next to a text label (e.g., a home icon next to the word "Home"):

<button>
  <svg aria-hidden="true" focusable="false"><!-- ... --></svg>
  <span>Home</span>
</button>

Standalone Actionable Icons (No Visible Text)

When an icon acts as an independent button (e.g., an 'X' close button):

<button aria-label="Close modal dialog">
  <svg aria-hidden="true"><!-- ... --></svg>
</button>