Accessibility Concerns

[fpapado]

Hi folks 👋

I'm excited for the conference, and just saw the site! I love the visuals, playful, and the content is on point. One thing that stood out to me, however, was that the site is inaccessible in a number of ways.

I'm listing some of the issues below, let me say up front that I'm willing to work on these :)
It might seem like a lot, but I think all of them are solvable. It is important for me that Elm sets a good example for accessibility, and similarly that our public sites follow that.

Some things I noticed:

• Outlines are hidden for everything. I found a global style for outlines in the source. There is rarely a reason for doing that. Especially when the site has a strong visual identity, I think it's a chance to enhance the outlines, rather than removing them.
• There are text contrast issues in a few places
• There is no discernible text for the social links
• The document heading structure (h1-h6) has gaps / peaks and troughs, which can be bad for people who rely on it
• A number of things that is interactible is not a button, rather a div with onClick. This means that keyboard users cannot interact with them.
• The modal does not move focus to itself, and allows the user (keyboard especially) to tab through the whole document. I think this part can benefit from a solution that keeps things in the block flow, such as a collapsible section with details and summary.

Next steps

As I mentioned, I would be happy to work on these; I spend most of my time on web accessibility these days. I do not know what the contributing guidelines are, or if someone wants to join as well, so here I am :)

(It is a bit late where I am atm, so I might not be available asap, but the weekend looks good)

Either way, thank you for your time reading through this!

Some resources

I really like axe-core as a browser extension. It surfaces most of the issues I mentioned above, and offers links for context. It is great if one wants to read through the whys, in addition to learning about the "how"

Tessa Kelly's accessible-html package encodes some of these values in the type system.

[carolineartz]

@fpapado thanks so much for the feedback! all VERY good points. I'm in process of an overhaul (still wip but can be found https://github.com/elm-in-the-spring/conference-2019). I would love some feedback and or help in the way of contribution later this week. I'll definnitely make use of that extension, great suggestion!

[fpapado]

Thank you for taking it into account! Sounds good, I'd be happy to offer feedback on the changes.

[carolineartz]

@fpapado I have been working on the revamp to improve accessibility and I'm close to done -- (modal and sponsorship page are TODO).

I've covered the things you have mentioned except I still need to solve the discernible text for the social links and (and the modal focus when i do the modal).

Much highter contrast

Currently:

Feel free to check things out and let me know if I have missed things that axe doesn't detect. Thanks again for bringing this to our attention and pointing to fixes.

I hope to finish up the TODOs and ship it this weekend!

[fpapado]

Hi @carolineartz,

The new site looks beautiful! I think it illustrates a nice integration of accessible colours and playful design.

I noticed a few small things.

Quick styling and markup

The buttons and sign up form are styled on :hover. I think you can style them the same on :focus, for a comparable experience.

The navigation (details-sponsor-header) is within an h1, but there is another h1 in "Elm in the Spring", which seems like the primary one. You can make the navigation wrapper into a nav, for easier landmark access.

Linking to Headings

When linking to sections via fragment routes, the focus should move to the element in addition to the scroll. This is for users that rely on keyboards, so that the next Tab press follows from the section.

You can append the focus to the Cmd.batch list for Browser.Internal:

  Browser.Dom.focus fragment
  |> Task.attempt (\_ -> NoOp)

The sections need |> Dom.addAttribute (Attr.tabIndex -1) in order to be focusable like that.

It might also be better to focus the h2 headings of those sections instead of the div. Last I checked some Screen Readers support linking to headings better than divs.

(I tested this briefly on a branch and seemed ok).

Wrapping up

That's pretty much it from what I can tell. Thank you again for looking into these :)

[carolineartz]

@fpapado thanks again for the tips! The latest version is in staging at https://relaxed-mccarthy-797d6b.netlify.com/. If you have time, let me know if there is anything glaring that you notice! (be sure to check the overlay, visible by clicking a speaker's name or pic, and the sponsorship page, accessed via the link in the Sponsors section. Thank you!

[carolineartz]

closing this! new and improved site is live. Thanks again @fpapado for your help!