Accessibility Audit

[AmyJuneH]

Before website is launched, please run an audit for accessibility. Things to check:

• Color Contrast
• Tab Navigation
• Consistent Links
• Heading hierarchy
• Font Size and readability
• Link text
• Alt tags
• etc.

[JQTNguyen]

This is In Progress w/ AmyJune; at its Culmination, she will dump all of her findings into One Doc to Rule Them All.

[AmyJuneH]

Accessibility tested with the menu turned off.

Global errors:

• Email placeholder text (subscribe to mailing list) - Insufficient color contrast
• Skip to main content link - be sure it links to main content

Articles Page:

• Contrast - no errors
• Heading order - no errors
• Tabbed navigation - no errors. Good focus states
• Links - work as anticipated

Contact Form: https://2019.badcamp.org/contact-us Input field has no description: WCAG 1.3.1 Info and Relationships How to fix it: If the input field has a visible description indicating the purpose of the field, this description should be explicitly associated to the input field either as a HTML label or using the WAI-ARIA attribute 'aria-labelledby'. If it is not possible to add a visible description, either add a mouseover text ('title' attribute) to the input field or create an invisible label using the WAI-ARIA attribute 'aria-label'.

[AmyJuneH]

Suggestion: It would be nice to have links have a hover state on mouse over. Example - Social media icons and the menu button for "News" have a focus state for tabbed navigation, but maybe they can have a background Change or some distinguishable for folks who use pointer devices.

[JQTNguyen]

@AmyJuneH: Kneejerk Reactions...

Email placeholder text (subscribe to mailing list) - Insufficient color contrast I can't tell if this comment is for the current iteration/design, or the old one because this text does not exist. Did you mean "Join the mailing list"? If so, could you please suggest a color that would have sufficient color contrast?

It would be nice to have links have a hover state on mouse over. Example - Social media icons and the menu button for "News" have a focus state for tabbed navigation, but maybe they can have a background Change or some distinguishable for folks who use pointer devices. Could the same thing be said about the links in the Footer Text (i.e. "Contact Us - Built by the community with Drupal and hosted on Pantheon.")

[AmyJuneH]

Yes - the "Join the mailing list" text.

Yes - the same thing can be said for all links - I was just giving some examples.

[mel-miller]

I already have an issue (#54) to check for and add focus and hover styles to items that do not have them yet. I've been trying to add them as I theme a particular feature, but I planned to circle back and do the rest at some point. I can certainly expedite that though and do it in this sprint.

[mel-miller]

I'll go ahead a take care of the errors and suggestions from this issue. If there's something I can't fix or can't get to, I'll create a separate issue for that.

[AmyJuneH]

https://www.drupal.org/project/badcamp/issues/3058552#comment-13128984