Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
One thing I would point out - the SVG in button with aria-label, although perfectly valid does cause issues with some screen readers (albeit more obscure / older ones).
For maximum compatibility (getting that last 2% that matters) using visually hidden text is better. It has the added benefit that if someone is using a text only browser (very rare but still used by some braille keyboard / braille screen users....) the text will be accessible.
As such the following would be the best way to handle your buttons....
HTML
<button><svgaria-hidden="true"focusable="false"></svg><spanclass="visually-hidden">Edit John Doe</span></button>
CSS
.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px1px1px1px);/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */clip:rect(1px,1px,1px,1px);/*maybe deprecated but we need to support legacy browsers */clip-path:inset(50%);/*modern browsers, clip-path works inwards from each corner*/white-space:nowrap;/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */}
Notice as well that I add aria-hidden="true" and focusable="false" to the SVG. This is to correct an issue in Internet explorer where SVGs are focusable (it can cause some real confusion if you ever disable the button!)
Great article have a ❤🦄 and a follow!
One thing I would point out - the SVG in button with
aria-label, although perfectly valid does cause issues with some screen readers (albeit more obscure / older ones).powermapper.com/tests/screen-reade...
For maximum compatibility (getting that last 2% that matters) using visually hidden text is better. It has the added benefit that if someone is using a text only browser (very rare but still used by some braille keyboard / braille screen users....) the text will be accessible.
As such the following would be the best way to handle your buttons....
HTML
CSS
Notice as well that I add
aria-hidden="true"andfocusable="false"to the SVG. This is to correct an issue in Internet explorer where SVGs are focusable (it can cause some real confusion if you ever disable the button!)Hi @inhuofficial , Thank you for the clarification on this point :)