It's good to see role="alert" on the toast for accessibility!
It would also be good to make sure the close button has an accessible name and focus styles for keyboard and assistive tech users. Otherwise the button will receive focus, but not indicate its purpose.
<buttonclass="close"on:click={()=> dispatch("dismiss")}>
<!--
This provides a name that will be read out by screen readers,
but not shown visually
--><spanclass="visually-hidden">Close</span><CloseIconwidth="0.8em"/></button><style>button:focus{outline:1pxsolidblack;outline-offset:2px;}/* from https://piccalil.li/quick-tip/visually-hidden */.visually-hidden{border:0;clip:rect(0000);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;}</style>
Software hacker working in the industry since 2003. Currently loves: #Typescript and #Svelte. Founder of Chimera, the first makerspace in northern California.
If you want to do it using an attribute, aria-label="Close" would be preferable to title, since title is inconsistently announced by screen readers. However, visually hidden text (the technique above) is more likely to be translated.
Wow you get these out fast 😅
It's good to see
role="alert"on the toast for accessibility!It would also be good to make sure the close button has an accessible name and focus styles for keyboard and assistive tech users. Otherwise the button will receive focus, but not indicate its purpose.
Haha thanks Geoff! Will update the article, good feedback 💯
What about simply giving the button a title of "close?" That would be accessible for screen readers and assistive tech right?
If you want to do it using an attribute,
aria-label="Close"would be preferable totitle, since title is inconsistently announced by screen readers. However, visually hidden text (the technique above) is more likely to be translated.Got it, thank you.