Bulma modal accessibility configuration with CSS-only constraints

Minimal ARIA attribute set

Use role="dialog", aria-modal="true", and aria-labelledby pointing to the ID of the visible heading inside the modal. Add aria-describedby only when a separate description element exists. Bulma 1.0.0 controls visibility with the is-active class; when that class is absent, the modal container must resolve to display: none so it is excluded from the accessibility tree. CSS opacity or visibility alone is insufficient because the element can remain in the tab order.

Focus return with overlay click-to-close

Bulma supplies styles only, so focus management requires a small consumer-owned script even when styling remains CSS-only. Use these steps:

1. Before adding is-active, capture const trigger = document.activeElement.
2. Add is-active, then move focus to the modal title or the first focusable element inside .modal-content.
3. Attach a click listener to .modal-background that removes is-active.
4. In the same close handler, call trigger.focus(). Guard against a detached trigger by falling back to document.body or the last known focusable element.

A true focus trap cannot be enforced with CSS alone. The inert attribute can help where supported, but support is uneven; treat it as progressive enhancement, not a replacement for script-managed focus boundaries.

Nested modal permission boundary

Avoid nested modals where possible. If they are required, apply a single-active-context boundary: only the top-most visible modal receives aria-modal="true" and remains exposed to assistive technology. Underlying modals must be hidden with display: none and aria-hidden="true". Do not expose multiple simultaneous dialogs to the accessibility tree, because that fragments focus and confuses screen-reader users.

Verification

• Open the modal with a screen reader and confirm focus enters the dialog; close it and confirm focus returns to the trigger.
• Navigate by keyboard only; Tab must not leave the active modal boundaries.
• Inspect the DOM to confirm aria-labelledby matches the heading ID and that inactive modals have display: none.

Assumptions and uncertainty: This guidance assumes Bulma v1.0.0 and that the consumer may add minimal JavaScript for behavior while keeping Bulma's CSS for presentation. If the project is strictly zero-JS, reliable focus return and focus trapping are not achievable with CSS alone. Confirm whether a JavaScript shim is permitted before finalizing the implementation.

Missing diagnostic detail: Does your deployment allow a small JavaScript shim for focus and ARIA toggling, or is the implementation strictly zero-JS? This changes the recommendation because a CSS-only modal cannot reliably return focus or trap the keyboard.