Accessible blocking loading overlay
23:05 20 Sep 2026

As far as I've understood, what I am calling "blocking loading overlay" is not just a "backdrop". The "backdrop" is a part of other components (e. g. modal dialogs) but "blocking loading overlay" is the compound one includes:

  • Backdrop
  • Loading indicator
  • Visually hidden message

Here is the implementation example from MUI:

enter image description here

 ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
  open={open}
  onClick={handleClose}
>
  

I suppose, the output HTML is not enough accessible:

It is best what I can output with my current accessibility skills (please check the comments also):



Something that may be improved? (Please keep minimal number of tags and avoid redundant wrappers.)

best-practices html accessibility