Creates an aria-required attribute.

Indicate whether user input is or is not required on a field for valid form submission.

Supported by comboBox, gridCell, listBox, radioGroup, spinButton, textBox, tree

Creates an aria-label attribute.

Supported for all elements.

Creates an aria-invalid attribute.

Learn more about Using Aria-Invalid to Indicate an Error Field.

You may want to use Accessibility.Styled.Aria.errorMessage or Accessibility.Styled.Aria.describedBy to indicate what's invalid about the user's submission.

For invalid grammar or spelling specifically, use invalidGrammar and invalidSpelling respectively.

Supported for all elements.

Creates an aria-invalid="grammar" attribute.

Supported for all elements.

Creates an aria-invalid="spelling" attribute.

Supported for all elements.

Creates an aria-pressed attribute.

Use pressed when describing a toggle button--a button that can be "toggled" between an on state and an off state (or an on state, an indeterminate state, and an off state).

Please check out these examples as well.

button
    [ pressed <| Just True ]
    [ text "This button should be styled for site viewers such that it's clear it's pressed!" ]

Supported on button.

Creates an aria-multiline attribute.

Indicate whether the textbox is for multi-line inputs or single-line inputs.

Be careful of default keyboard behavior when coupling this property with text inputs, which by default submit their form group on enter.

Supported for textbox only.

Creates an aria-checked attribute.

Check boxes can be checked (Just True), unchecked (Just False), or indeterminate (Nothing).

Available on checkbox, option, radio, switch

Creates an aria-selected attribute.

Indicate whether an element (in a single- or multi-selectable widget) is or is not selected.

Supported by gridCell, option, row, tab.

Creates an aria-indeterminate attribute.

Sets the indeterminate value to be true.

Creates an aria-autocomplete="inline" attribute.

Use when there's a suggestion for completing the field that shows up in the line that the user is completing. Be sure to indicate that the auto-completed text is selected.

Available on comboBox or textbox.

Creates an aria-autocomplete="list" attribute.

Use when there's a suggestion for completing the field that shows up as a list of options from which the user can pick.

Be sure to indicate that the auto-completed text is selected.

Available on comboBox or textbox.

Creates an aria-autocomplete="both" attribute.

Use when there's a suggestion for completing the field when there's both inline autocomplete and list autocomplete occurring at once.

Be sure to indicate that the auto-completed text is selected.

Available on comboBox or textbox.

Creates an aria-expanded attribute.

This attribute can be applied to either an element that is itself expanded/collapsed, OR to an elment it controls that is either expanded/collapsed. In the latter case, use a controls attribute as well to clarify the relationship.

Available on button, comboBox, document, link, section, sectionHead, and window.

Creates an aria-hidden attribute.

Creates an aria-readonly attribute.

Indicates read-only status of a widget, although normal navigation rules and copying behavior should apply. (Read: readOnly elements are navigable but unchangeable, and disabled elements are neither navigable nor unchangebale).

Supported on checkBox, comboBox, grid, gridCell, listBox, radioGroup, slider, spinButton, and textBox.

Creates an aria-disabled attribute.

In deciding whether to use Accessibility.Styled.Widget.disabled or Html.Styled.Attributes.disabled, it may be helpful to read through the Focusablity of disabled controls section of the WAI-ARIA Practices recommendations.

In essence, you may want to use Accessibility.Styled.Widget.disabled instead of Html.Styled.Attributes.disabled if you want users to be aware of disabled elements, and you don't mind that users will need to navigate through these disabled elements.

Supported for all elements. Elements are not disabled (they are enabled) by default.

Creates an aria-modal attribute.

Indicate that a modal is showing and the rest of the page contents are not interactable.

import Accessibility exposing (div, h2, p, text)
import Accessibility.Aria exposing (labelledBy)
import Accessibility.Role exposing (dialog)
import Accessibility.Widget exposing (modal)
import Html.Attributes exposing (id)


modal : Html msg
modal =
    div [ dialog, modal, labelledBy "header-id" ]
        [ h2 [ id "header-id" ] [ text "Modal Header" ]
        , p [] [ text "Wow, such modal contents!" ]
        ]

Creates an aria-haspopup="menu" attribute.

Indicate that interaction with this element can trigger a menu pop-up.

Be careful while managing focus and triggering.

Creates an aria-haspopup="listbox" attribute.

Indicate that interaction with this element can trigger a listBox pop-up.

Be careful while managing focus and triggering.

Creates an aria-haspopup="tree" attribute.

Indicate that interaction with this element can trigger a tree pop-up.

Be careful while managing focus and triggering.

Creates an aria-haspopup="grid" attribute.

Indicate that interaction with this element can trigger a grid pop-up.

Be careful while managing focus and triggering.

Creates an aria-haspopup="dialog" attribute.

Indicate that interaction with this element can trigger a dialog pop-up.

Be careful while managing focus and triggering.

Creates an aria-orientation="horizontal attribute.

Supported on roles with some sense of inherent orientation: progressBar, scrollbar, select, separator, slider, tabList, toolBar

Careful: default behavior is inconsistent across those roles.

Creates an aria-orientation="vertical" attribute.

Supported on roles with some sense of inherent orientation: progressBar, scrollbar, select, separator, slider, tabList, toolBar

Careful: default behavior is inconsistent across those roles.

Creates an aria-valuemin attribute.

Set the min allowed value for a range widget.

Supported by progressBar, scrollbar, separator, slider, and spinButton.

Creates an aria-valuemax attribute.

Set the max allowed value for a range widget.

Supported by progressBar, scrollbar, separator, slider, and spinButton.

Creates an aria-valuenow attribute.

Set the current value for a range widget. Don't use this property for indeterminate states.

Supported by progressBar, scrollbar, separator, slider, and spinButton.

Creates an aria-valuetext attribute.

This property takes precedence over valueNow, and should show a human-readable version of the current value. However, valueNow should always be used.

Supported by progressBar, scrollbar, separator, slider, and spinButton.

Creates an aria-sort="ascending" attribute.

Table is sorted by this column's values in ascending order. Only one column in a table should be sorting the values in table.

Supported by columnHeader and rowHeader, but only where those roles are used on table or grid headers.

Creates an aria-sort="descending" attribute.

Table is sorted by this column's values in descending order. Only one column in a table should be sorting the values in table.

Supported by columnHeader and rowHeader, but only where those roles are used on table or grid headers.

Creates an aria-sort="other" attribute.

Table is sorted by this column's values, but the algorithm for that sorting is custom (not ascending or descending). Only one column in a table should be sorting the values in table.

Supported by columnHeader and rowHeader, but only where those roles are used on table or grid headers.

Creates an aria-sort="none" attribute.

Table is not sorted by this column's values.

Supported by columnHeader and rowHeader, but only where those roles are used on table or grid headers.

Creates an aria-multiselectable attribute.

When true, users are not restricted to selecting only one selectable descendant at a time.

Supported on grid, listBox, tabList, tree.

Creates an aria-level attribute.

This attribute is about hierarchy--how many "levels" deep is an element?

h7 attributes =
    div (heading :: level 7 :: attributes)

Supported for grid, heading, listItem, row, and tabList.