Icon buttons is very common in Web applications, yet they often has accessibility problems. Learn. Your icon buttons accessible to keyboard and screens reader users with HTML, CSS, SVG and ARIA.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <title>Button Demo</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/demo.css"></Head><Body> <Main> <Button>help!</Button> <Button> <span class= "Visuallyhidden">help! </ span > <Iclass= "icon Icon-help" aria-hidden= "true" ></I> </Button> <!--Alternate Labeling Technique:aria-label - <Button aria-label= "help!" > <Iclass= "icon Icon-help" aria-hidden= "true" ></I> </Button> <Divclass= "button" role= "button" tabindex= "0" > <svgwidth= "+"Height= "+"ViewBox= "0 0"class= "icon" aria-labelledby= "Svgtitle" > <title ID= "Svgtitle">help! </ title > <PathD= "M14 24h4v-4h-4v4zm16 8c-3 0-6 3-6 6h4c0-1 1-2 2-2s2 1 2 2c0 2-4 2-4 4h4c2-0.688 4-2 4-5s-3-5-6-5zm16 0c-8.844 0-16 7.156-16 16s7.156 16-7.156 16-16-7.156-16-16-16zm16 28c-6.625 0-12-5.375-12-12s5.375-12 12-12 12 5.375 12 12-5.37 5 12-12 12z "></Path> </svg> </Div> </Main></Body></HTML>
{ border: 0; clip: rect (0 0 0 0); height: 1px; margin: -1px; Overflow: hidden; padding: 0; position: absolute; width: 1px;}
[HTML5] Accessible Icon Buttons