lukewestby / accessible-html-with-css-temp-19 / Accessibility.Styled.Aria

activeDescendant : String -> Html.Styled.Attribute msg

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

Identifies the currently-active element.

controls : String -> Html.Styled.Attribute msg

Creates aria controls attribute. Pass the unique string id of whatever is being controlled.

Providing More Info

longDescription : String -> Html.Styled.Attribute msg

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" ]

details : String -> Html.Styled.Attribute msg

Supported by all elements.

Refer to a single extended description section--maybe a couple of paragraphs and a chart. Pass in the section's id.

describedBy : List String -> Html.Styled.Attribute msg

Supported by all elements.

Kind of a more-verbose version of labelledBy. Pass it a list of ids of elements that describe the given element.

labelledBy : String -> Html.Styled.Attribute msg

Creates aria labelledby attribute. Pass the unique string id of the labelling element. labeledBy and labelledBy are identical.

labeledBy : String -> Html.Styled.Attribute msg

Creates aria labelledby attribute. Pass the unique string id of the labelling element. labeledBy and labelledBy are identical.

keyShortcuts : List String -> Html.Styled.Attribute msg

Supported by all elements.

Keyboard shortcuts!!! Pass in a list of keyboard shortcuts. See recommendations on how to make good shortcuts.

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

roleDescription : String -> Html.Styled.Attribute msg

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.

Navigation and Flow

flowTo : List String -> Html.Styled.Attribute msg

Supported by all elements.

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

Textbox Related

placeholder : String -> Html.Styled.Attribute msg

Supported by textbox and searchbox.

Provide a hint about an expected value.

Table Related

colCount : Basics.Int -> Html.Styled.Attribute msg

Supported by table, grid, treegrid.

Declares the number of columns in a grid in which not all of the columns are displayed. (If all columns are present--skip using this.)

-1 indicates total column number is unknown.

colIndex : Basics.Int -> Html.Styled.Attribute msg

Supported by cell, row, columnHeader, gridCell, and rowHeader.

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.

colSpan : Basics.Int -> Html.Styled.Attribute msg

Supported by cell, columnHeader, gridCell, and rowHeader.

Indicate how many columns-wide a cell is.

rowCount : Basics.Int -> Html.Styled.Attribute msg

Supported by table, grid, treegrid.

Declares the number of rows in a grid in which not all of the rows are displayed. (If all rows are present--skip using this.)

-1 indicates total row number is unknown.

rowIndex : Basics.Int -> Html.Styled.Attribute msg

Supported by cell, row, columnHeader, gridCell, and rowHeader.

Analagous to colIndex.

rowSpan : Basics.Int -> Html.Styled.Attribute msg

Supported by cell, columnHeader, gridCell, and rowHeader.

Indicate how many rows-wide a cell is.

Set-related

setSize : Basics.Int -> Html.Styled.Attribute msg

Supported by list-y elements: article, listItem, menuItem, option, radio, tab, menuitemcheckbox, menuitemradio, and treeItem.

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

posInSet : Basics.Int -> Html.Styled.Attribute msg

Supported by list-y elements: article, listItem, menuItem, option, radio, tab, menuitemcheckbox, menuitemradio, and treeItem.

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

Current

currentItem : Basics.Bool -> Html.Styled.Attribute msg

Supported by all elements.

currentPage : Html.Styled.Attribute msg

Supported by all elements.

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

currentStep : Html.Styled.Attribute msg

Supported by all elements.

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

currentLocation : Html.Styled.Attribute msg

Supported by all elements.

currentDate : Html.Styled.Attribute msg

Supported by all elements.

As in a calendar widget.

currentTime : Html.Styled.Attribute msg

Supported by all elements.

As in a timepicker widget.

errorMessage : String -> Html.Styled.Attribute msg

Supported by all elements.

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.

input [ invalid True, errorMessage "error-message-id" ] []