View on GitLab

Accessibility

Larastrap provides to automatically generate many WAI-ARIA attributes, in particular those suggested by the Bootstrap's documentation for each component.

It is possible to overwrite all of them by just assigning an explicit value into the attributes array passed to each component.


<x-larastrap::text label="Without explicit aria-label" squeeze />
<br>
<x-larastrap::text label="With explicit aria-label" :attributes="['aria-label' => 'This is the label']" squeeze />
<input id="input-c1512a42df99922d21b194387c3a3ef5" type="text" class="form-control" name="X6VT2D2x9O" value="" aria-label="Without explicit aria-label"><br>
<input id="input-f71904e48b0dbc99477dcaaaa1d4d1b9" type="text" class="form-control" name="RL5Mak1UTd" value="" aria-label="This is the label">

Inputs

In most situations, when Input elements have not a visible label (e.g. when squeeze is applied), an aria-label attribute is added with the content of the label or placeholder parameters.

When using the help parameter, the input box is labelled with aria-describedby .

Tabs

Both aria-labelledby and aria-current attributes are automatically added to each tab.

Accordions

Both aria-labelledby and aria-expanded attributes are automatically added to each panel.

Buttons have a proper aria-controls attribute, referring the related panel.