Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Web Icons) expand_more
Icon Fundamentals
Inline SVG icon SVG sprite symbol Accessible icon button Decorative icon aria-hidden Icon with text label currentColor icon Icon sizing with em Icon alignment
CSS Icon Techniques
CSS mask icon Background-image icon Data URI icon Pseudo-element icon Icon hover state Disabled icon state High-contrast icon Dark-mode icon
Icon Systems
Reusable SVG symbol Icon component contract Icon naming conventions Icon size scale Stroke versus fill icons RTL directional icons Status icons Loading spinner icon
Performance & Accessibility
Sprite caching Avoid icon-font ligatures Hidden accessible label Focus-visible icon button Touch target sizing Motion-safe spinner Fallback icon SVG title versus aria-label
Web Icons / Performance & Accessibility

Hidden accessible label

Learn Hidden accessible label in Web Icons with a focused explanation, a topic-specific example, and a mastery check.

12 min read • Intermediate
web-icons-027.html
html 
<style>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}</style><button><svg aria-hidden="true" width="18" height="18"><path d="M3 9h12" stroke="currentColor"/></svg><span class="sr-only">Collapse section</span></button>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Hidden accessible label Mastery Check →
← PREVIOUS
Avoid icon-font ligatures
NEXT →
Focus-visible icon button