This module is meant to make accessibility easy! They're sign posts that accessibility software like screen readers can use to navigate your app.
All you have to do is add them to elements in your app where you see fit.
Here's an example of annotating your navigation region:
import Element.Region as Region
myNavigation =
Element.row [ Region.navigation ]
[-- ..your navigation links
]
mainContent : Element.Attribute msg
navigation : Element.Attribute msg
heading : Basics.Int -> Element.Attribute msg
This will mark an element as h1
, h2
, etc where possible.
Though it's also smart enough to not conflict with existing nodes.
So, this code
link [ Region.heading 1 ]
{ url = "http://fruits.com"
, label = text "Best site ever"
}
will generate
<a href="http://fruits.com">
<h1>Best site ever</h1>
</a>
aside : Element.Attribute msg
footer : Element.Attribute msg
description : String -> Element.Attribute msg
announce : Element.Attribute msg
Screen readers will announce when changes to this element are made.
announceUrgently : Element.Attribute msg
Screen readers will announce changes to this element and potentially interrupt any other announcement.