Accessibility docs

[callumacrae]

React just added a section to their docs on accessibility, and it's pretty nice: https://facebook.github.io/react/docs/accessibility.html

I think Vue should have a page too! (and I'm happy to write it)

Proposed structure:

• Introduction - why accessibility matters
• Basic accessibility measures
  • Introduce the WCAG guidelines
  • Highlight a few of the important ones
• Accessibility in SPAs
  • Content that relies on the mouse (menu bars, dropdowns, controls on mouseover)
  • Extended input elements
  • Dynamic content (notifications, error messages) and aria-live
  • Announcing page navigation
• How to test accessibility

Very high-level overview of what I think we should have - any thoughts before I start writing?

[znck]

You should go ahead with a PR and @chrisvfritz would help you shape it.

[chrisvfritz]

@callumacrae YES! That sounds fantastic. 😄 Exactly as @znck said, you can open a PR (even with incomplete work) and I'll be happy to answer questions, help with tone, etc. My only note on your proposed structure is that I think it'd be good to avoid tying these recommendations to SPAs specifically, as any kind of website that uses Vue will probably be able to benefit.

A place I often start when developing a new page is with examples I know I want to cover, then I figure out a way to weave them together with case studies / stories. We like to keep the tone conversational in the docs, but generally avoid jokes/sarcasm, as it often doesn't work cross-culturally.

Also, once your talk is live, I think it'd be great to link to it for those that prefer video content.

[robdodson]

Btw if it's any help we have a bunch of accessibility docs available at https://developers.google.com/web/fundamentals/accessibility/ and I do a video series where I try to cover common topics https://www.youtube.com/watch?v=JS68faEUduk&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g.

Really excited to see you all working on this!

[chrisvfritz]

Thanks @robdodson! @callumacrae ^^^

[callumacrae]

@robdodson hadn't seen that before - it's such a well written document! Thanks for sharing :)

[callumacrae]

@chrisvfritz how do I add a new page in hexo?

[chrisvfritz]

@callumacrae To add a new page to the guide, create a new .md file in src/v2/guide/. Each page has some metadata at the top, then it's just markdown below. 🙂

[callumacrae]

Opened a PR here: #1002

[sherbinkodet]

vuejs will never be WCAG 2.0 complaint because its vue-* attributes do not pass HTML5 validation and you guys denied to fix that:

vuejs/vue#273

[robdodson]

@sherbinkodet which WCAG conformance rule relies on HTML validation?

[sherbinkodet]

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H75

[sdras]

I think, could be wrong here- but the confusion lies in understanding that what the screenreader thinks of the DOM is different than the code that is written before compilation. The target for screenreaders is not to remove directive (which are not vue-* but v-*, yes that's pedantic), but to understand what it's compiled to. Just like React or Angular, there are ways to implement that care for accessibility, and ways to ignore it. Pointing to this doc seems oversimplified to me.