Creates an aria-activedescendant attribute.

Identifies the currently-active element in order to provide an alternative way of managing focus.

Supported in container-y roles: application, composite, group, textbox, comboBox, grid, listBox, menu, menuBar, radioGroup, row, searchBox, select, spinButton, tabList, toolBar, tree, and treeGrid.

Creates aria-controls attribute.

Pass a list of ids for the elements that are being controlled by the current element.

Supported by all elements.

Creates the longDesc attribute with the given url, which should point to a text description of the content. This attribute is only supported on img tags.

import Accessibility exposing (Html, img)
import Accessibility.Aria exposing (longDescription)


view : Html msg
view =
    img
        "Growth Chart in Some Sweet Unit (Quarter 4)"
        [ longDescription "/quarter_4_summary#Growth" ]

Note that this is a deprecated HTML property, not an ARIA property. See MDN documentation on HTMLImageElement.longDesc for general documentation and Using longdesc (Technique H45) for accessibility documentation.

Supported by all elements.

Refer to a single extended description section--maybe a couple of paragraphs and a chart. Pass in the HTML id of an element with details about the current element to create an aria-details association.

Supported by all elements. Pass it a list of ids of elements that describe the given element.

Pass in ids of elements that describe the current element to create an aria-describedby association.

You may wish to review the documentation for labelledBy and details as well -- which property you should use will depend on your specific UX requirements.

Creates an aria-labelledby attribute.

Pass the unique string id of the labelling element. Only use this property if the label is visible (if the label is not visible, prefer Accessibility.Widget.label).

Convenience alias for labelledBy.

Supported by all elements. Pass in a list of keyboard shortcuts to use the aria-keyshortcuts property.

keyShortcuts [ "Alt+Shift+P", "Control+F" ]

Note that this property only indicates to users that certain keyboard shortcuts exist -- this property does not change the behavior of the element to which it is attached. Please also note that it's nice to make the existence of keyboard shortcuts known to all users, not only to screenreader users!

Learn more about the purpose of from The WAI-ARIA Authoring Practices guide's Keyboard Shortcuts section.

Please be aware that providing single-character keyboard shortcuts may make using your site less accessible for some users. Read Understanding Success Criterion 2.1.4: Character Key Shortcuts to learn more.

Supported by all elements.

Provide human-readable description of the role of an element. Should be used alongside an actual role--this is supplementary information.

Creates an aria-roledescription property.

Creates an aria-flowto attribute.

Provide an alternative document reading order and offer navigation to the elements referenced in the passed-in list of ids.

Supported by all elements.

Supported by textbox and searchbox.

Provide a hint about an expected value.

Creates an aria-placeholder property.

Generally, you should use Html.Attributes.placeholder instead of using aria-placeholder. The only time that you should add an aria-placeholder attribute is if you're rolling your own widget that's required you to explicitly set a wai-aria role. See some guidance around "implicit" aria semantics here.

Creates an aria-colcount attribute.

Describe the number of columns in a grid in which not all of the columns are currently in the DOM. (If all columns are already rendering, don't use this attribute.)

-1 indicates total column number is unknown.

Supported by elements with roles table, grid, and treegrid.

Creates an aria-colindex attribute.

Indexing begins from 1, NOT 0. Plus, the colIndex should not be greater than the colCount! If a cell stretches across multiple columns, use the starting column index and colSpan.

The simplest rule is to put the colIndex on every child of a row.

Please note that if all of the columns of the table/grid are already present in the DOM, you do not need to use this property.

Supported by elements with roles cell, row, columnHeader, gridCell, and rowHeader.

Creates an aria-colspan attribute.

Indicate how many columns-wide a cell is.

Please use the HTML attribute colspan instead of aria-colspan for native HTML tables.

Supported by elements with roles cell, columnHeader, gridCell, and rowHeader.

Creates an aria-rowcount attribute.

Analagous to colcount.

Creates an aria-rowindex attribute.

Analagous to colIndex.

Creates an aria-rowspan attribute.

Analagous to colSpan.

Creates an aria-setsize attribute.

setSize indicates the total number of items in a set where not all the items are currently present in the DOM.

Warning! The setSize is added to every set item, not to the element containing the set.

The ARIA docs include this example, which I've converted to Elm and shorted a bit:

import Accessibility exposing (..)
import Accessibility.Aria as Aria
import Accessibility.Role as Role
import Html.Attributes exposing (id)


view : List (Html msg)
view =
    [ h2 [ id "label_fruit" ] [ text "Available Fruit" ]
    , ul [ Role.listBox, Aria.labelledBy "label_fruit" ]
        [ li
            [ Role.option
            , Aria.setSize 16
            , Aria.posInSet 5
            ]
            [ text "apples" ]
        , li
            [ Role.option
            , Aria.setSize 16 -- <- Note the set size appears on the element, not on the container
            , Aria.posInSet 6
            ]
            [ text "bananas" ]
        ]
    ]

Supported by elements that might appear in a list: article, listItem, menuItem, option, radio, tab, menuitemcheckbox, menuitemradio, and treeItem.

Creates an aria-posinset attribute.

Only necessary when not all of the items in the set are in the DOM. Use with setSize.

Supported by elements that might appear in a list: article, listItem, menuItem, option, radio, tab, menuitemcheckbox, menuitemradio, and treeItem.

Creates an aria-current attribute, either aria-current=true or aria-current=false.

Only 1 element in a set should be marked as the current item.

Please double-check that you don't want Accessibility.Widget.selected instead.

Supported by all elements.

Creates an aria-current attribute, as aria-current=page.

Indicate that a link in a nav or list is the current location.

Supported by all elements.

Creates an aria-current attribute, as aria-current=step.

Indicate which step in a step-based flow is the current one.

Supported by all elements.

Supported by all elements.

Creates an aria-current attribute, as aria-current=date.

As in a calendar.

Supported by all elements.

Creates an aria-current attribute, as aria-current=time.

As in a timepicker.

Supported by all elements.

Create an aria-errormessage element.

Reference the element that has error details. e.g., if you've got an input field that's invalid, add errorMessage to the input with the id of whatever element is telling the user in what way their submission is wrong.

import Accessibility
import Accessibility.Aria as Aria
import Accessibility.Widget as Widget
import Html.Attributes exposing (id)


view : List (Html msg)
view =
    [ labelBefore [] (text "Input content:") <|
        inputText "some-content"
            [ Widget.invalid True
            , Aria.errorMessage "error-message-id"
            ]
    , span [ id "error-message-id" ] [ text "Better content required" ]
    ]

You must also use Attribute.Widget.invalid when using errorMessage.

Supported by all elements.