Add ARIA attributes for better Accessiblity

[tkshill]

Issue Context

Our main page elements do not have the appropriate Accessible Rich Internet Applications (ARIA) labels. This makes it harder for people with disabilities to navigate the site.

Suggested Solution

Add as many of the accessbility attributes in the Elm-ui region library as are applicable. In particular:

• Add the navigation attribute msg to the row element containing the links in the Shared.elm view function.
• Add the mainContent attribute msg to the column containing the page.body.
• Add the announce attribute message to the top level column in the viewBoard function.

Alternatives Considered

Additional Resources

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

[dominicduffin1]

Hi! I'd like to take this on. Could you confirm - is the page.body also in Shared.elm and viewBoard the one in GamePage.elm.?

[tkshill]

Hey @dominicduffin1 ,

I've assigned you to the issue. The page.body in shared.elm is equivalent to the body of the top level record returned by view function in GamePage.elm.

So this page.body in Shared.elm

view :
    { page : Document msg, toMsg : Msg -> msg }
    -> Model
    -> Document msg
view { page } _ =
            ...
            , column [ height fill, centerX ] page.body
            ...

is this body in GamePage.elm

view : Model -> Document Msg
view model =
    { title = "Quarto - Play"
    , body =
        [ column [ spacing 10, centerX ]
           ...

[tkshill]

closed by #39