3

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.

enter image description here

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.