bit.ly/elm-a11y
But first... habits.
1. Diet or eat healthier
2. Exercise more
3. Lose weight
4. Save more and spend less
5. Learn a new skill or hobby
6. Quit smoking
7. Read more
8. Find another job
9. Drink less alcohol
10. Spend more time with family and friends
60% make resolutions
8% keep them
➡️
Lift weights twice a week for just one month 🏋️♀️
Okay, Brooke. That's not revolutionary.
... another big goal
If we want our product to be excellent, our site should be accessible to a diverse range of students.
For scale, there are 327 million people in the United States
285 million people worldwide who are blind or visually impaired
275 million users who are deaf or hearing impaired
Users with conditional disabilities
Accessibility best practices benefit everyone.
I’m going to make the assumption that we all would like our applications to be accessible to all of these user groups, because we are an empathetic crew, and we care about our users.
🤗
Web Content Accessibility Guidelines uses the acronym POUR
Examples:
Examples:
Examples:
Examples:
We agree our app should usable by a diverse range of users.
But... accessibility can feel like a daunting task.
Maybe... I need a smaller goal.
Or... a tiny habit.
🌳 Big Goal: Excellence in accessibility
🌱 Little Goal: I want to write UI tests based on interactions that would help someone using a screen reader navigate the page.
One of the oldest pages on the site!
Best: verify with a screen reader user
Next best: verify myself with a screen reader, like Voice Over
Alright: let's just remove browser styling to see the most egregious errors
(Unstyled)
(Unstyled)
(Unstyled)
Understandable: Test for clear instructions on the page
Text
spec : Test
spec =
test "instructs the user how to select interests" <|
\_ ->
ProgramTest.createDocument
{ init = Interests.init
, view = Interests.view
, update = Interests.update
}
|> ProgramTest.start testFlags
|> ProgramTest.ensureViewHas
[ Selector.text "Select your interests."
]
|> ProgramTest.done
Operable: add a test for selecting an interest
Text
spec : Test
spec =
test "shows the interest page" <|
\_ ->
ProgramTest.createDocument
{ init = init
, view = view
, update = update
}
|> ProgramTest.start testFlags
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.class "InterestButtonClass"
]
)
Event.click
|> ProgramTest.done
<div class="Interests-Page-InterestsClass">
Beyonce
</div>
viewInterest : String -> Html msg
viewInterest interest =
li
[ class [ InterestButtonClass ] ]
[ text interest ]
spec : Test
spec =
test "shows the interest page" <|
\_ ->
ProgramTest.createDocument
{ init = init
, view = view
, update = update
}
|> ProgramTest.start testFlags
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.class "InterestButtonClass"
]
)
Event.click
|> ProgramTest.done
Elm CSS 13.0 arrived
<div class="_6206614">Beyonce</div>
viewInterest : String -> Html msg
viewInterest interest =
li
[ css
[ backgroundImage "so_interesting.gif"
]
]
[ text interest ]
<div class="_6206614 good_ole_dependable_class">
Beyonce
</div>
viewInterest : String -> Html msg
viewInterest interest =
li
[ class "good_ole_dependable_class"
, css
[ backgroundImage "so_interesting.gif"
]
]
[ text interest ]
Text
spec : Test
spec =
test "shows the interest page" <|
\_ ->
ProgramTest.createDocument
{ init = init
, view = view
, update = update
}
|> ProgramTest.start testFlags
|> ProgramTest.simulateDomEvent
(Query.find
[ Selector.class "InterestButtonClass"
]
)
Event.click
|> ProgramTest.done
Text
spec : Test
spec =
test "shows the interest page" <|
\_ ->
ProgramTest.createDocument
{ init = init
, view = view
, update = update
}
|> ProgramTest.start testFlags
|> ProgramTest.clickButton "Select Beyonce"
|> ProgramTest.done
Wait so...
writing a test to enforce accessibility was easier than what I've been doing?
selectInterestButton : Interest -> Html Msg
selectInterestButton interest =
li
[ onClick interest.onClick
, css
[ backgroundImage interest.image
]
]
[ text interest.name ]
li : List (Attribute msg) -> List (Html msg) -> Html msg
(and styled html, too)
Already awesome, because we produce valid HTML markup by default but...
li : List (Attribute msg) -> List (Html msg) -> Html msg
(and Html.Styled, too)
li : List (Attribute Never) -> List (Html msg) -> Html msg
(and tesk9/accessible-html-with-css)
This argument is a list of type:
List (Html.Styled.Attribute Msg)
But `div` needs the 1st argument to be:
List (Html.Styled.Attribute Never)
import Accessibility.Styled exposing (..)
...
selectInterestButton : Interest -> Html Msg
selectInterestButton interest =
li
[ onClick interest.onClick
, css
[ backgroundImage interest.image
]
]
[ text interest.name ]
import Accessibility.Styled exposing (..)
...
selectInterestButton : Interest -> Html Msg
selectInterestButton interest =
button
[ onClick interest.onClick
, css
[ backgroundImage interest.image
]
]
[ text ("Select " ++ interest.name) ]
invisible : List (Attribute msg)
Makes content invisible without making it inaccessible.
import Accessibility.Styled.Style exposing (invisible)
...
deselectInterestButton : Interest -> Html Msg
deselectInterestButton interest =
button
[ onClick interest.onClick
, css
[ backgroundImage interest.image
]
]
[ span invisible
[ text ("Deselect " ++ interest.name)
]
]
Turns out... Elm is a great language for testing and implementing accessible features!
These packages help extend Elm's capability
spec : Test
spec =
test "shows the interest page" <|
\_ ->
ProgramTest.createDocument
{ init = init
, view = view
, update = update
}
|> ProgramTest.start testFlags
|> ProgramTest.clickButton "Select Beyonce"
|> ProgramTest.clickButton "Deselect Beyonce"
...
|> ProgramTest.clickButton "Continue"
|> ProgramTest.done
Brooke, all you did was add a few buttons and labels!
Tiny habits that you keep are more impactful than sweeping resolutions that you give up.
Pick an item from the https://a11yproject.com/checklist/ and use it in your code
Switch to `tesk9/accessible-html` if your team is open to new Elm Packages
import Accessibility.Html as Html
Advocate for accessibility training at your workplace once a week
Download a browser extension like AXE and check every page you’re working on
Tell me about your accessibility habit
@brooke in the Elm Slack!