Detailed explanation
An accessible, CSS-stylable SVG icon needs two separate decisions: how it receives its visual styling and whether it conveys information to assistive technology. Inline SVG is part of the HTML document, so CSS can target its elements and control properties such as fill, stroke, and stroke-width. Unlike an SVG loaded through an <img> element, its internal shapes are available to the page’s CSS. Keep a viewBox so the artwork scales correctly when CSS or attributes change its dimensions.
For a filled icon, use .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }. The currentColor keyword uses the element’s computed color, allowing the icon to follow surrounding text or a parent button’s colour. For an outline icon, use fill: none; stroke: currentColor instead. Avoid hard-coded colours on child paths when you want them to inherit styling. With <use href="#icon-search">, reusable symbol content can inherit fill and stroke, but do not assume ordinary descendant selectors can directly target the referenced shapes: they render through a shadow tree.
If the SVG itself conveys information, expose it as an image with an accessible name, for example <svg role="img" aria-label="Search" viewBox="0 0 24 24">…</svg>. Alternatively, include <title id="search-title">Search</title> and reference it using aria-labelledby="search-title"; keep IDs unique across instances. If the icon merely accompanies visible text that already communicates its meaning, set aria-hidden="true" to prevent redundant announcements. An SVG loaded with <img> instead uses the image’s alt attribute for its text alternative.
For an icon-only action, put the SVG inside a native button, give the button an accessible name such as aria-label="Search", and hide the SVG from assistive technology. The button supplies keyboard interaction and focus behaviour; the SVG should not become a separate focus stop. Style the icon through the button’s hover and focus-visible states, and preserve visible focus. Interviewers look for this distinction between graphic semantics and control semantics. Icon fonts are font-based glyphs, not raster images; their drawbacks include fragile character semantics and font-loading failures, whereas SVG offers explicit graphical structure and naming options.
Key points to remember
- Use inline SVG for direct CSS access; retain viewBox for scalable artwork.
- Use fill: currentColor for filled icons or fill: none and stroke: currentColor for outlines.
- Give informative SVGs role="img" and an accessible name through aria-label or aria-labelledby.
- Hide redundant decorative SVGs with aria-hidden="true"; name the containing button when it is icon-only.
- Reusable <use> icons support inherited styling, but referenced shapes are not ordinary selectable descendants.
Common mistakes candidates make
- Adding an alt attribute to inline <svg> instead of providing an accessible name with ARIA.
- Making an SVG clickable without a native button, keyboard support, or visible focus.
- Expecting parent fill rules to override hard-coded fills on child paths, or expecting page CSS to reach inside an <img>-loaded SVG.
Likely follow-up questions
Should an icon beside visible button text have its own accessible name?
Usually not, if it repeats the text’s meaning. Set aria-hidden="true" on the SVG and let the visible text name the button.
Can I recolour an SVG loaded through an <img> element using fill?
Not directly: page CSS cannot target shapes inside that separate image document. Use inline SVG for fill and stroke control, or consider a CSS mask for a single-colour decorative icon.
Is an SVG <title> enough for an icon-only button?
Do not rely on the SVG’s title to name the containing button consistently. Give the button an explicit accessible name using aria-label or visually hidden text, and hide the decorative SVG.
Interview tip: Explain informative versus decorative icons first, then show currentColor styling and an accessible icon-only button.