Accessible successful status message

Question

I'm working on a screen where it is like an order form and has a functionality to allow user to save the details they input as a draft. Upon saving the details, I want to display the message that the save was successful.

Looking through many examples, toast message is usually used in such case. However, due to some accessibility concern with using toast message, we are looking for any other possible accessible design to display the message.

I'm thinking of maybe having the text near the button but not sure about this approach or if there is any better option.

Answer 1

Toasts are a problem for people using a screen magnifier (as the notification appears a long way from where they are currently zoomed in and will be missed) so you are correct to consider other options.

The best option is as you suggest (notification near the button) or to update the button itself to show saving and saved (or failed) states if your design allows.

Two things to bear in mind:

1. Make sure space is pre-allocated for the message if you have it above or below the buttons to stop lots of layout shifts happening as that is a horrible experience.
2. You will need to implement an aria-live region to announce the states for people using a screen reader or similar Assistive Tech.

The second point is important. Just adding text below the button is not sufficient as a screen reader will not be notified of that by default.

The second point may also apply if you update the button itself depending on how you implement it, so test with a screen reader just to check.

The final consideration is whether the message auto dismisses or whether it persists until dismissed.

The second option is the accessibility ideal (persist until dismissed), but I understand that adds a lot of work for little benefit. I would suggest persisting the message longer than you think is necessary though, about 7 or 8 seconds for "Successfully Saved Orders" to allow plenty of time for reading.