labelBefore : List (Attribute Basics.Never) -> Html Basics.Never -> Html msg -> Html msg
All inputs must be associated with a label
.
labelBefore [] viewLabel viewInput
labelAfter : List (Attribute Basics.Never) -> Html Basics.Never -> Html msg -> Html msg
All inputs must be associated with a label
.
labelAfter [] viewLabel viewInput
labelHidden : String -> List (Attribute Basics.Never) -> Html Basics.Never -> Html msg -> Html msg
All inputs must be associated with a label
.
labelHidden "id-of-input" [] viewLabel viewInput
The id that's passed in must be added to the input!
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
).
inputText "the value of the input" [ property "autocomplete" "given-name" ]
Use the HTML autocomplete attribute whenever possible. Read Understanding Success Criterion 1.3.5: Identify Input Purpose and Using HTML 5.2 autocomplete attributes (Technique H98) for more information.
You might notice that Html.Styled.Attributes
and Html.Attributes
don't provide full autocomplete support. This is tracked in elm/html issue 189.
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. Use in conjunction with one of the label helpers (labelBefore
, labelAfter
, labelHidden
).
inputNumber 1950 [ property "autocomplete" "bday-year" ]
Use the HTML autocomplete attribute whenever possible. Read Understanding Success Criterion 1.3.5: Identify Input Purpose and Using HTML 5.2 autocomplete attributes (Technique H98) for more information.
You might notice that Html.Styled.Attributes
and Html.Attributes
don't provide full autocomplete support. This is tracked in elm/html issue 189.
radio : String -> String -> Basics.Bool -> List (Attribute msg) -> Html msg
Constructs an input of type "radio". Use in conjunction with one of the label helpers (labelBefore
, labelAfter
, labelHidden
).
radio "radio-group-name" "Radio input value" True []
checkbox : String -> Maybe Basics.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 (Just True
), unchecked (Just False
), or indeterminate (Nothing
).
checkbox "Checkbox value" Nothing []
Together, tabList
, tab
, and tabPanel
describe the pieces of a tab component view.
import Accessibility.Styled exposing (Html, tab, tabList, tabPanel, text)
import Accessibility.Styled.Aria exposing (controls, hidden, labelledBy, selected)
import Html.Styled.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.Styled.Attributes.hidden False
]
[ text "Panel One Content" ]
, tabPanel
[ id "panel-2"
, labelledBy "tab-2"
, hidden True
, Html.Styled.Attributes.hidden True
]
[ text "Panel Two Content" ]
]
tabList : List (Attribute Basics.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 Basics.Never) -> List (Html msg) -> Html msg
Create a tab panel.
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.Styled as Html exposing (..)
import Html.Styled.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 Basics.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 Basics.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" ]
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
These elements will prevent you from adding event listeners.
import Accessibility.Styled exposing (..)
text : String -> Html.Styled.Html msg
h1 : List (Attribute Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.Never) -> List (Html msg) -> Html msg
Read Understanding Success Criterion 2.4.9: Link Purpose (Link Only) to improve the usability of your links.
As you add links in your web application, please also consider reading through Understanding Success Criterion 2.4.8: Location, which will help you learn how you can orient users to where they are in relation to the rest of the website content.
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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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.
header : List (Attribute Basics.Never) -> List (Html msg) -> Html msg
header
should generally not have event listeners. If you really need to add
an event listener, use the elm/html library instead.
footer : List (Attribute Basics.Never) -> List (Html msg) -> Html msg
footer
should generally not have event listeners. If you really need to add
an event listener, use the elm/html library instead.
address : List (Attribute Basics.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 Basics.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 Basics.Never) -> List (Html msg) -> Html msg
Adds the group role to a figure.
figcaption : List (Attribute Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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 Basics.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.
menu : List (Attribute Basics.Never) -> List (Html msg) -> Html msg
menu
should generally not have event listeners. If you really need to add
an event listener, use the elm/html library instead.
These are here to make the following nicer:
import Accessibility.Styled as Html exposing (..)
Html.Styled.Html msg
Html.Styled.Attribute msg
map : (a -> msg) -> Html a -> Html msg
map
directly aliases the function of the same name from rtfeldman/elm-css.
Please see the docs for the Html.Styled.map.
fromUnstyled : Html msg -> Html msg
toUnstyled : Html msg -> Html msg
styled : (List (Attribute a) -> List (Html b) -> Html msg) -> List Css.Style -> List (Attribute a) -> List (Html b) -> Html msg