Element.Area

Area Annotations

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 area:

import Element.Area as Area


myNavigation =
    Element.row [ Area.navigation ]
        [-- ..your navigation links
        ]

mainContent : Attribute msg

heading : Int -> 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 [ Area.heading 1 ]
    { url = "http://fruits.com"
    , label = text "Best site ever"
    }

will generate

<a href="http://fruits.com">
    <h1>Best site ever</h1>
</a>

announce : Attribute msg

Screen readers will announce when changes to this element are made.

Screen readers will announce changes to this element and potentially interrupt any other announcement.

aside : Attribute msg