Skip to main content
Logo Appt Light

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.

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.

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

Feedback?

Let us know!