Accessibility

Labels

labelBefore : List (Attribute Never) -> Html Never -> Html msg -> Html msg

All inputs must be associated with a <label> tag. Here is an example that creates a text input for first names:

firstNameInput : String -> Html msg
firstNameInput name =
    labelBefore
        [ class "data-entry" ]
        (text "First Name:")
        (input [ type_ "text" ] name)

Now if you said firstNameInput "Tom" you would get HTML like this:

<label class="data-entry">
  First Name:
  <input type="text" value="Tom"></input>
</label>

labelAfter : List (Attribute Never) -> Html Never -> Html msg -> Html msg

All inputs must be associated with a <label> tag. Here is an example that creates a text input for first names:

firstNameInput : String -> Html msg
firstNameInput name =
    labelAfter
        [ class "data-entry" ]
        (text "First Name:")
        (input [ type_ "text" ] name)

Now if you said firstNameInput "Tom" you would get HTML like this:

<label class="data-entry">
  <input type="text" value="Tom"></input>
  First Name:
</label>

labelHidden : String -> List (Attribute Never) -> Html Never -> Html msg -> Html msg

All inputs must be associated with a <label> tag. Here is an example that creates a text input for first names:

firstNameInput : String -> Html msg
firstNameInput name =
    labelHidden
        "name-input"
        [ class "data-entry" ]
        (text "First Name:")
        (input [ type_ "text", id "name-input" ] name)

Now if you said firstNameInput "Tom" you would get HTML like this:

<span>
    <label for="name-input" class="data-entry" style="[styles hiding the input]">
        First Name:
    </label>
    <input id="name-input" type="text" value="Tom"></input>
</span>

Inputs

Right now, this library only supports a few input types. Many more input types exist. See MDN's input information for more options.

inputText : String -> List (Attribute msg) -> Html msg

Constructs an input of type "text". Use in conjunction with one of the label helpers (labelBefore, labelAfter, labelHidden).

firstNameInput : String -> Html Msg
firstNameInput name =
    labelHidden
        "name-input"
        [ class "data-entry" ]
        (text "First Name:")
        (inputText name [ onBlur FirstName ])

inputNumber : String -> List (Attribute msg) -> Html msg

Constructs an input of type "text" but constricting the input to allow only numbers as recommended by gov.uk (See: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/). Use in conjunction with one of the label helpers (labelBefore, labelAfter, labelHidden).

ageInput : String -> Html Msg
ageInput age =
    labelHidden
        "age-input"
        [ class "data-entry" ]
        (text "Age:")
        (inputNumber age [ onBlur Age ])

radio : String -> String -> Bool -> List (Attribute msg) -> Html msg

Constructs an input of type "radio". Use in conjunction with one of the label helpers (labelBefore, labelAfter, labelHidden).

elementaryGradeInput : String -> Html Msg
elementaryGradeInput name =
    labelAfter
        []
        (text "Elementary School")
        (radio "school-radio-group" "Elementary" True [])

checkbox : String -> Maybe Bool -> List (Attribute msg) -> Html msg

Constructs an input of type "checkbox". Use in conjunction with one of the label helpers (labelBefore, labelAfter, labelHidden). Checkboxes may be checked, unchecked, or indeterminate.

filterResultsInput : Maybe Bool -> Html Msg
filterResultsInput checked =
    labelBefore
        []
        (text "Filter Results")
        (checkbox "No filter" Nothing [])

Tabs

Together, tabList, tab, and tabPanel describe the pieces of a tab component view.

import Accessibility exposing (Html, tab, tabList, tabPanel, text)
import Accessibility.Aria exposing (controls, labelledBy)
import Accessibility.Widget exposing (hidden, selected)
import Html.Attributes exposing (id)


view : Html msg
view =
    tabList
        [ id "tab-list" ]
        [ tab
            [ id "tab-1"
            , selected True
            , controls "panel-1"
            ]
            [ text "Tab One" ]
        , tab
            [ id "tab-2"
            , selected False
            , controls "panel-2"
            ]
            [ text "Tab Two" ]
        , tabPanel
            [ id "panel-1"
            , labelledBy "tab-1"
            , hidden False
            , Html.Attributes.hidden False
            ]
            [ text "Panel One Content" ]
        , tabPanel
            [ id "panel-2"
            , labelledBy "tab-2"
            , hidden True
            , Html.Attributes.hidden True
            ]
            [ text "Panel Two Content" ]
        ]

For a more fully-fledged example using these helpers check out elm-tabs.

tabList : List (Attribute Never) -> List (Html msg) -> Html msg

Create a tablist. This is the outer container for a list of tabs.

tab : List (Attribute msg) -> List (Html msg) -> Html msg

Create a tab. This is the part that you select in order to change panel views. You'll want to listen for click events and for keyboard events: when users hit the right and left keys on their keyboards, they expect for the selected tab to change.

tabPanel : List (Attribute Never) -> List (Html msg) -> Html msg

Create a tab panel.

Images

There are two img tag helpers that ask you as the developer to decide whether the image you want to display for screenviewers is necessary or distracting for screenreaders. Essentially, does it convey meaning and value, or is it decorative? Remember, redundant information can be confusing too.

import Accessibility as Html exposing (..)
import Html.Attributes exposing (src)


view : Html msg
view =
    div []
        [ img "Bear rubbing back on tree" [ src "bear.png" ]
        , decorativeImg [ src "smiling_family.jpg" ]
        ]

img : String -> List (Attribute Never) -> Html msg

Use this tag when the image provides information not expressed in the text of the page. When images are used to express the purpose of a button or link, aim for alternative text that encapsulates the function of the image.

Read through the w3 informative image tutorial and the the w3 functional image tutorial to learn more.

For graphs and diagrams, see figure and longDesc.

img "Bear rubbing back on tree" [ src "bear.png" ]

decorativeImg : List (Attribute Never) -> Html msg

Use this tag when the image is decorative or provides redundant information. Read through the w3 decorative image tutorial to learn more.

decorativeImg [ src "smiling_family.jpg" ]

From Html

Interactive

button : List (Attribute msg) -> List (Html msg) -> Html msg

textarea : List (Attribute msg) -> List (Html msg) -> Html msg

select : List (Attribute msg) -> List (Html msg) -> Html msg

Non-interactive

These elements will prevent you from adding event listeners.

import Accessibility exposing (..)

text : String -> Html msg

h1 : List (Attribute Never) -> List (Html msg) -> Html msg

h1 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

h2 : List (Attribute Never) -> List (Html msg) -> Html msg

h2 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

h3 : List (Attribute Never) -> List (Html msg) -> Html msg

h3 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

h4 : List (Attribute Never) -> List (Html msg) -> Html msg

h4 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

h5 : List (Attribute Never) -> List (Html msg) -> Html msg

h5 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

h6 : List (Attribute Never) -> List (Html msg) -> Html msg

h6 should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

div : List (Attribute Never) -> List (Html msg) -> Html msg

div should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

p : List (Attribute Never) -> List (Html msg) -> Html msg

p should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

hr : List (Attribute Never) -> List (Html msg) -> Html msg

hr should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

pre : List (Attribute Never) -> List (Html msg) -> Html msg

pre should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

blockquote : List (Attribute Never) -> List (Html msg) -> Html msg

blockquote should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

span : List (Attribute Never) -> List (Html msg) -> Html msg

span should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

a : List (Attribute Never) -> List (Html msg) -> Html msg

a should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

code : List (Attribute Never) -> List (Html msg) -> Html msg

code should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

em : List (Attribute Never) -> List (Html msg) -> Html msg

em should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

strong : List (Attribute Never) -> List (Html msg) -> Html msg

strong should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

i : List (Attribute Never) -> List (Html msg) -> Html msg

i should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

b : List (Attribute Never) -> List (Html msg) -> Html msg

b should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

u : List (Attribute Never) -> List (Html msg) -> Html msg

u should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

sub : List (Attribute Never) -> List (Html msg) -> Html msg

sub should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

sup : List (Attribute Never) -> List (Html msg) -> Html msg

sup should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

br : List (Attribute Never) -> Html msg

br should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

ol : List (Attribute Never) -> List (Html msg) -> Html msg

ol should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

ul : List (Attribute Never) -> List (Html msg) -> Html msg

ul should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

li : List (Attribute Never) -> List (Html msg) -> Html msg

li should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

dl : List (Attribute Never) -> List (Html msg) -> Html msg

dl should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

dt : List (Attribute Never) -> List (Html msg) -> Html msg

dt should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

dd : List (Attribute Never) -> List (Html msg) -> Html msg

dd should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

iframe : List (Attribute Never) -> List (Html msg) -> Html msg

iframe should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

canvas : List (Attribute Never) -> List (Html msg) -> Html msg

canvas should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

math : List (Attribute Never) -> List (Html msg) -> Html msg

math should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

form : List (Attribute Never) -> List (Html msg) -> Html msg

form should generally not have event listeners. If you really need to add an event listener, use the formWithListeners method or directly use the elm/html library instead.

formWithListeners : List (Attribute msg) -> List (Html msg) -> Html msg

form should generally not have event listeners and Accessibility.form method should be your go to implementation. If you really need to add an event listener, you can use this method instead but use caution when doing so!

option : List (Attribute Never) -> List (Html msg) -> Html msg

option should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

section : List (Attribute Never) -> List (Html msg) -> Html msg

section should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

nav : List (Attribute Never) -> List (Html msg) -> Html msg

nav should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

article : List (Attribute Never) -> List (Html msg) -> Html msg

article should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

aside : List (Attribute Never) -> List (Html msg) -> Html msg

aside should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

address : List (Attribute Never) -> List (Html msg) -> Html msg

address should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

main_ : List (Attribute Never) -> List (Html msg) -> Html msg

main_ should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

figure : List (Attribute Never) -> List (Html msg) -> Html msg

Adds the group role to a figure.

figcaption : List (Attribute Never) -> List (Html msg) -> Html msg

figcaption should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

table : List (Attribute Never) -> List (Html msg) -> Html msg

table should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

caption : List (Attribute Never) -> List (Html msg) -> Html msg

caption should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

colgroup : List (Attribute Never) -> List (Html msg) -> Html msg

colgroup should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

col : List (Attribute Never) -> List (Html msg) -> Html msg

col should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

tbody : List (Attribute Never) -> List (Html msg) -> Html msg

tbody should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

thead : List (Attribute Never) -> List (Html msg) -> Html msg

thead should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

tfoot : List (Attribute Never) -> List (Html msg) -> Html msg

tfoot should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

tr : List (Attribute Never) -> List (Html msg) -> Html msg

tr should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

td : List (Attribute Never) -> List (Html msg) -> Html msg

td should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

th : List (Attribute Never) -> List (Html msg) -> Html msg

th should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

fieldset : List (Attribute Never) -> List (Html msg) -> Html msg

fieldset should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

legend : List (Attribute Never) -> List (Html msg) -> Html msg

legend should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

label : List (Attribute Never) -> List (Html msg) -> Html msg

label should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

datalist : List (Attribute Never) -> List (Html msg) -> Html msg

datalist should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

optgroup : List (Attribute Never) -> List (Html msg) -> Html msg

optgroup should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

output : List (Attribute Never) -> List (Html msg) -> Html msg

output should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

progress : List (Attribute Never) -> List (Html msg) -> Html msg

progress should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

meter : List (Attribute Never) -> List (Html msg) -> Html msg

meter should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

audio : List (Attribute Never) -> List (Html msg) -> Html msg

audio should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

video : List (Attribute Never) -> List (Html msg) -> Html msg

video should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

source : List (Attribute Never) -> List (Html msg) -> Html msg

source should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

track : List (Attribute Never) -> List (Html msg) -> Html msg

track should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

embed : List (Attribute Never) -> List (Html msg) -> Html msg

embed should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

object : List (Attribute Never) -> List (Html msg) -> Html msg

object should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

param : List (Attribute Never) -> List (Html msg) -> Html msg

param should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

ins : List (Attribute Never) -> List (Html msg) -> Html msg

ins should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

del : List (Attribute Never) -> List (Html msg) -> Html msg

del should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

small : List (Attribute Never) -> List (Html msg) -> Html msg

small should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

cite : List (Attribute Never) -> List (Html msg) -> Html msg

cite should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

dfn : List (Attribute Never) -> List (Html msg) -> Html msg

dfn should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

abbr : List (Attribute Never) -> List (Html msg) -> Html msg

abbr should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

time : List (Attribute Never) -> List (Html msg) -> Html msg

time should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

var : List (Attribute Never) -> List (Html msg) -> Html msg

var should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

samp : List (Attribute Never) -> List (Html msg) -> Html msg

samp should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

kbd : List (Attribute Never) -> List (Html msg) -> Html msg

kbd should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

s : List (Attribute Never) -> List (Html msg) -> Html msg

s should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

q : List (Attribute Never) -> List (Html msg) -> Html msg

q should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

mark : List (Attribute Never) -> List (Html msg) -> Html msg

mark should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

ruby : List (Attribute Never) -> List (Html msg) -> Html msg

ruby should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

rt : List (Attribute Never) -> List (Html msg) -> Html msg

rt should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

rp : List (Attribute Never) -> List (Html msg) -> Html msg

rp should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

bdi : List (Attribute Never) -> List (Html msg) -> Html msg

bdi should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

bdo : List (Attribute Never) -> List (Html msg) -> Html msg

bdo should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

wbr : List (Attribute Never) -> List (Html msg) -> Html msg

wbr should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

details : List (Attribute Never) -> List (Html msg) -> Html msg

details should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

summary : List (Attribute Never) -> List (Html msg) -> Html msg

summary should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

menuitem : List (Attribute Never) -> List (Html msg) -> Html msg

menuitem should generally not have event listeners. If you really need to add an event listener, use the elm/html library instead.

Html aliases for Convenience

These are here to make the following nicer:

import Accessibility as Html exposing (..)

type alias Html msg =

Html msg

type alias Attribute msg =

Attribute msg

map : (a -> msg) -> Html a -> Html msg

map directly aliases the function of the same name from elm/html.

Please see the docs for the original.

tesk9/accessible-html/4.1.0

Accessibility

Labels

Inputs

Tabs

Images

From Html

Interactive

Non-interactive

Html aliases for Convenience

Modules