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.
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.
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.
placeholder : String -> Html.Styled.Attribute msg
Supported by textbox
and searchbox
.
Provide a hint about an expected value.
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.
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
.
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" ] []