Html.Styled.Attributes.Aria

Additional attributes for html

Aria role

role : String -> Attribute msg

An attribute to support the role classification of elements. See the official specs.

div [ role "button" ] [ text "Submit" ]

Aria Attributes

ariaActiveDescendant : String -> Attribute msg

Identifies the currently active descendant of a composite widget. See the official specs.

div [ ariaActiveDescendant "id" ] [ text "Hello aria!" ]

ariaChecked : String -> Attribute msg

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See the official specs.

div [ ariaChecked "true" ] [ text "Hello aria!" ]

ariaControls : String -> Attribute msg

Identifies the element (or elements) whose contents or presence are controlled by the current element. See the official specs.

div [ ariaControls "dropdown-menu" ] [ text "Hello aria!" ]

ariaDescribedby : String -> Attribute msg

Identifies the element (or elements) that describes the object. See the official specs.

div [ ariaDescribedby "id" ] [ text "Hello aria!" ]

ariaDisabled : Bool -> Attribute msg

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See the official specs.

div [ ariaDisabled True ] [ text "Hello aria!" ]

ariaExpanded : String -> Attribute msg

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. See the official specs.

div [ ariaExpanded "true" ] [ text "Hello aria!" ]

ariaHasPopup : String -> Attribute msg

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. See the official specs.

div [ ariaHasPopup "menu" ] [ text "Hello aria!" ]

ariaHidden : Bool -> Attribute msg

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See the official specs.

div [ ariaHidden True ] [ text "Hello aria!" ]

ariaLabel : String -> Attribute msg

Defines a string value that labels the current element. See the official specs.

div [ ariaLabel "label" ] [ text "Hello aria!" ]

ariaLabelledby : String -> Attribute msg

Identifies the element (or elements) that labels the current element. See the official specs.

div [ ariaLabelledby "id" ] [ text "Hello aria!" ]

ariaLive : String -> Attribute msg

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. See the official specs.

input [ ariaLive "assertive" ] []

ariaPressed : Bool -> Attribute msg

Indicates the current "pressed" state of toggle buttons. See the official specs.

button [ ariaPressed True ] [ text "Submit" ]

ariaReadonly : Bool -> Attribute msg

Indicates that the element is not editable, but is otherwise operable. See the official specs.

div [ ariaReadonly True ] [ text "Hello aria!" ]

ariaRequired : Bool -> Attribute msg

Indicates that user input is required on the element before a form may be submitted. See the official specs.

div [ ariaRequired True ] [ text "Hello aria!" ]

ariaSelected : String -> Attribute msg

Indicates the current "selected" state of various widgets. See the official specs.

div [ ariaSelected "true" ] [ text "Hello aria!" ]

ariaValueMax : Float -> Attribute msg

Defines the maximum allowed value for a range widget. See the official specs.

div [ ariaValueMax 10, role "progressbar" ] []

ariaValueMin : Float -> Attribute msg

Defines the minimum allowed value for a range widget. See the official specs.

div [ ariaValueMin 1, role "progressbar" ] []

ariaValueNow : Float -> Attribute msg

Defines the current value for a range widget. See the official specs.

div [ ariaValueNow 4, role "progressbar" ] []

Modules