Modals are dialog overlays that prevent the user from interacting with rest of the website until an action is taken or the dialog is dismissed. They are purposefully disruptive, so should be used thoughtfully and sparingly.
Supply the modal’s summary copy id. Assistive technologies (such as screen readers) use this to attribute to associate static text with a widget, element groups, headings, definitions, etc. (Source)
Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source)
Labels the element for assistive technologies (such as screen readers). (Source)
Supply the modal’s title id here. Assistive technologies (such as screen readers) use this to attribute to catalog the document objects correctly. (Source)
Identifies dialog elements for assistive technologies (Source)
Helps assistive technologies to switch their reading mode from the larger document to a focused dialog window. (Source)
Not every modal is sunshine and rainbows. Sometimes there are potentially drastic things that could happen by hitting a confirm button in a modal—such as deleting an account. In moments like this, add the .has-danger class to .s-modal. Additionally, you should switch the buttons to .s-btn__danger.s-btn__filled, since the main call to action will be destructive.