Accessibility modal on Flutter

A modal overlays the screen with additional content. Modals are usually indicated visually, e.g. by throwing a shadow on the content below it. Users of assistive technologies also need to know when content is part of a modal.

Accessibility modal - Flutter

On Flutter, the ModelBarrier class takes accessibility into account. The barrierDismissable and barrierLabel are used by assistive technologies. When barrierDismissable is set to false, the focus of assistive technologies is trapped inside the modal. The value of barrierLabel is announced upon entering the modal.

Dart

showDialog(
    context: context,
    barrierDismissible: false,
    barrierLabel: 'Label'
    builder: (context) {
        return SimpleDialog(
            title: Text('Appt')
        );
    },
);

Contribute