DEV Community

Discussion on: 🚀 Svelte Quick Tip: Creating a toast notification system

Collapse
geoffrich profile image
Geoff Rich

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.

<button class="close" on:click={() => dispatch("dismiss")}>
    <!-- 
        This provides a name that will be read out by screen readers, 
        but not shown visually 
    -->
    <span class="visually-hidden">Close</span>
    <CloseIcon width="0.8em" />
</button>

<style>
    button:focus {
        outline: 1px solid black;
        outline-offset: 2px;
    }
    /* from https://piccalil.li/quick-tip/visually-hidden */
    .visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
danawoodman profile image
Dana Woodman Author

Haha thanks Geoff! Will update the article, good feedback 💯

Collapse
justingolden21 profile image
Justin Golden

What about simply giving the button a title of "close?" That would be accessible for screen readers and assistive tech right?

Collapse
geoffrich profile image
Geoff Rich

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.

Thread Thread
justingolden21 profile image
Justin Golden

Got it, thank you.