Add manual audit to a11y to remind people to check for link states

[joelhsmith]

Can we add a manual accessibility audit to remind people to check that links and buttons are distinguishable from adjacent text and have perceivable hover states.

Here is a conversation starter:

/**
 * Interactive Element Affordance
 */
'use strict';

import ManualAudit from 'lighthouse-core'

const ManualAudit = require('../node_modules/lighthouse/lighthouse-core/audits/manual/manual-audit');

/**
 * @fileoverview Manual A11y audit for interactive link states.
 */

class LinkStates extends ManualAudit {
  /**
   * @return {LH.Audit.Meta}
   */
  static get meta() {
    return Object.assign({
      name: 'interactive-element-affordance',
      helpText: 'Interactive elements like links and buttons should indicate their state and be distinguishable from non-interactive elements. It is difficult for users to navigate a website when they cannot tell if an element is clickable or when they are hovering over an interactive element. [Learn more](https://webaim.org/blog/wcag-2-0-and-link-colors/).',
      description: 'Interactive elements are distinguishable from non-interactive elements',
    }, super.partialMeta);
  }
}

module.exports = interactiveElementAffordance;

I understand we probably don't want to link to a webaim blog post, so we probably need to add a page here:

https://github.com/google/WebFundamentals/tree/master/src/content/en/tools/lighthouse/audits

I am willing to do the work, if there is interest.

[paulirish]

cc @robdodson

[robdodson]

That seems like a good idea to me :)
I think most (maybe all?) of the manual audits link to this doc: https://developers.google.com/web/fundamentals/accessibility/how-to-review

Maybe for now we would just need to add a snippet in there explaining why this is important and how to check for it.

[joelhsmith]

Wow, now I'm talking to @robdodson. You and @paulirish have been heros' of mine for like 15 years. I've been learning from your work and blog posts my whole career. I can't tell you how cool it is submit an idea and y'all think its a good idea.

Enough gushing.

For Documentation, do you want me to write up a paragraph in Key Points and do a pull request here?https://github.com/google/WebFundamentals/blob/master/src/content/en/fundamentals/accessibility/how-to-review.md

Or does @robdodson just want to take it from here?

For Lighthouse, should I do the same and do a pull request? Or are we just adding it to documentation?

[robdodson]

Adding a paragraph to key points would be great. Then in Lighthouse we could link to the heading for that section in the doc, similar to how we do for the other manual audits.

…

On Mon, Jul 16, 2018 at 7:43 AM joelhsmith ***@***.***> wrote: Wow, now I'm talking to @robdodson <https://github.com/robdodson>. You and @paulirish <https://github.com/paulirish> have been heros' of mine for like 15 years. I've been learning from your work and blog posts my whole career. I can't tell you how cool it is submit an idea and y'all think its a good idea. Enough gushing. For Documentation, do you want me to write up a paragraph in Key Points and do a pull request here? https://github.com/google/WebFundamentals/blob/master/src/content/en/fundamentals/accessibility/how-to-review.md Or does @robdodson <https://github.com/robdodson> just want to take it from here? For Lighthouse, should I do the same and do a pull request? Or are we just adding it to documentation? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5667 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBFDYdpixjCQe_ym-qXXuFj7BzpWKW8ks5uHKapgaJpZM4VPZ_5> .

[wardpeet]

@joelhsmith great idea! Feel free to create a PR here. The text part can be reviewed by the team when the PR is created.

[joelhsmith]

@wardpeet Thanks! So far I wrote up some text for the Web Fundamentals How to Review page and made a PR that was approved by @robdodson.

Now that there would be a corresponding page for the 'Learn more' link, I would like to submit a manual audit to Lighthouse that incorporates @robdodson 's text improvements. I will submit a PR this week for my proposed manual audit.

[wardpeet]

Awesome looking forward to it!

[joelhsmith]

Hi @wardpeet I submitted my pull request #5764 for the new manual audit I proposed.