Roles defines the type of UI element.

See MDN article.

"The button role should be used for clickable elements that trigger a response when activated by the user." - MDN

Element.el
    (Events.onClick Msg.SomeEvent :: (ARIA.toElementAttributes <| ARIA.roleButton))
    someChildElement

"Can be used to identify multiple elements inside page content that should be considered as a single image." - MDN

Element.el
    (ARIA.toElementAttributes <| ARIA.roleImage altText)
    [ Element.text "😺 Meow" ]

"An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element)" - W3C

Element.el
    (ARIA.toElementAttributes <| ARIA.rolePresentation)
    totallyRedundantElement

"The checkbox role is used for checkable interactive controls." -MDN

Element.row
    (ARIA.toElementAttributes <| ARIA.roleCheckbox False)
    [ notCheckedIcon
    , Element.text "I accept the Terms of Service"
    ]

"A radiogroup is a type of select list that can only have a single entry checked at any one time." - W3C

Element.column
    (ARIA.toElementAttributes <| ARIA.roleRadioGroup "Pick an ice cream flavor")
    [ chocolateIceCream
    , strawberryIceCream
    ]

"A checkable input in a group of elements with the same role, only one of which can be checked at a time." - W3C

Element.row
    (ARIA.toElementAttributes <| ARIA.roleRadio True)
    [ checkedIcon
    , Element.text "Chocolate"
    ]

Transform a ElementSemantics in a list of Element.Attribute.