Bulma Grid Layout & Button Components: Interoperability with Accessible Semantic HTML

Direct answers

1. Keep the DOM source order equal to the intended reading order. Bulma’s grid is CSS-only: .columns is a flex container and .column are flex items. Screen readers and keyboard tab order follow source order, not visual placement. Use semantic sectioning with .columns wrappers and place columns in logical sequence.

2. Use a native with Bulma’s .button class. A native button has an implicit role button, so role="button" is redundant and discouraged. Accessible name comes from visible text. For icon-only buttons add aria-label. For stateful controls add aria-pressed, aria-expanded or aria-controls as appropriate. These ARIA attributes do not change visual design.

3. Do not disable focus outlines globally. Bulma 0.9.x applies focus via :focus with a box-shadow outline on .button. Bulma 1.x shifts toward :focus-visible for keyboard-only focus. Maintain accessibility by keeping a visible focus indicator with sufficient contrast and not overriding it with outline:none.

Confirmed facts

• Bulma is CSS-only and does not add ARIA roles, focus management or reading order.
• Logical reading order for assistive technology and keyboard navigation follows DOM source order, not visual placement created by flex order, offsets or responsive column reordering.
• Native has an implicit role button. Adding role="button" is redundant.

Likely guidance for this case

Grid markup that preserves order

1. Wrap columns in a semantic container, e.g. or , with class="columns".
2. Place .column elements in the order you want them read, not the order you want them displayed.
3. Avoid Bulma order utilities, offset classes, and CSS order property to visually reorder columns. If visual reordering is required for design, prefer a layout that preserves source order or provide a linear alternative for keyboard users.
4. Do not use aria-flowto to repair a broken order; support is not reliable.

Button annotation without visual change

1. Use Label for actions. Do not use for interactive controls.
2. Icon-only: ×.
3. Stateful: add aria-pressed for toggles, aria-expanded and aria-controls for expandable regions.

Focus-visible across 0.9.x and 1.x

1. Do not set outline:none globally. If a reset is needed, provide a comparable :focus-visible style.
2. Inspect computed styles for .button:focus and .button:focus-visible in your build. Ensure a box-shadow or outline remains visible and meets contrast.
3. If site CSS overrides Bulma focus, add a scoped rule that preserves :focus-visible, e.g. .button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Verification steps: test reading order with a screen reader, tab through all .button elements with keyboard only and confirm a visible focus indicator, validate markup for accessible names, and check computed focus styles in both 0.9.x and 1.x builds.

One diagnostic detail that changes the recommendation: are you globally disabling outlines or using Bulma order/offset utilities to reorder columns at specific breakpoints? Confirming this determines whether a source-order rewrite or a custom focus-visible restore is required.