Primer-Spec Accessibility Improvements

[marcus-darden]

About

We use primer-spec for the EECS 281 programming projects and I was interested in how they stacked up from an accessibility view point, so I submitted a few for review. I've pasted the portion of the response relevant to the primer-spec team below, it's mostly color contrast stuff. Please check it out and implement the fixes that will give all of us PS users some easy wins. @awdeorio thought @seshrs would be glad for the feedback.

Thanks,
Darden

Response

EECS 281 course spec review
Dec. 5, 2024
Requested by: Marcus Darden

By and large, these sites look good in terms of accessibility, with a few minor adjustments/edits to be made. For reference (or in case someone asks) here is what I checked, and how:
Automatic testing with Axe dev tools
Ran axe dev tools (Chrome) accessibility checker on each project overview page and some other pages within each project site.

Color contrast

Color contrast (which you can check with the
WebAIM color contrast checker) needs to be at least 4.5:1 in order to be perceived easily. There are a few types of text that don’t meet this threshold and need to be darker.

• Light blue used for link text (#6395E3) has a color contrast of 4:1 against the white background.
• Teal color used in some code snippets (#3888B4) has a contrast ratio of 4:1
• The light grey text used in code snippets (#898989) has a contrast ratio of 3.5:1.

(You can check contrast with a contrast checker or use colors that have already been cleared as accessible from the U-M color palette.)

Screen reader compatibility

Explored representative pages in the 281Bank and Treasure Hunt sites (overview plus a “sibling” page in each) with VoiceOver on mac. By and large the site worked appropriately with the screen reader

Note: Make sure that anywhere you have a code snippet you’re using the
inline code element. It was missing on Project 3 Tips and Advice page and may be missing in other locations. Just needs a quick quality assurance check anywhere you’ve placed a snippet of code.

Keyboard navigation

Navigated around the 281 Bank site using just the keyboard arrow, tab, shift+tab and enter keys. The pages performed fine with keyboard navigation, which also serves as a proxy for other assistive technologies.

Focus

This is outside the scope of what you asked me to look at, but on the
setup guides page the buttons for the different operating systems need to have a clear visual focus state (usually a blue box around them when you keyboard navigate to them.) The buttons here do have a faint focus state, but it’s not obvious which one you’re on when navigating by keyboard.

[seshrs]

Thanks for the feedback, Prof. Darden! I think Accessibility (a11y) is super-important for any website, especially more so for required course material.

Some notes based on the audit comments:

• Color palette: I'm currently just using GitHub's styles for the default themes, but will check the color-contrast later this week and consider adjusting if appropriate.
• Inline code: This should be automatic if you're using Markdown syntax. If you're willing to add me to the EECS 281 repos, I'm happy to audit your Markdown files and implement suggestions from my Primer Spec Markdown Tips page.

Also, could you please share links to the pages that were checked as part of this audit?

• I see a reference to Project 3's "Tips and Advice" page, but I don't see a link to the project from https://eecs281staff.github.io/eecs281.org/#projects
• The audit mentions the "setup guides" page, but it doesn't look like this mini-site uses Primer Spec.
  • Aside: I'm happy to help you port these docs / implement features needed to migrate to Primer Spec.

[marcus-darden]

These were the three reviewed (of 21 or 22): https://eecs281staff.github.io/p1-treasure-hunt https://eecs281staff.github.io/p2b-priority-queues https://eecs281staff.github.io/p3-281bank The full list - p0-statistics - p1-back-to-the-ship - p1-letterman - p1-puzzle - p1-rescue-the-countess - p1-rock-tour - p1-treasure-hunt - p2-a-new-foo - p2-a-new-heap - p2-mine-escape - p2-stocks - p2-the-walking-deadline - p2b-priority-queues - p3-281bank - p3-logman - p3-sillyql - p4-among-us - p4-donuts - p4-drones - p4-pokemon - p4-zoo

…

-- Prof. Marcus M. Darden Lec IV, Computer Science and Engineering 2644 Beyster Building, 734.764.3643 University of Michigan *"Electronic Mail is not secure, may not be read every day, and should not be used for urgent or sensitive issues"*

On Mon, Dec 9, 2024 at 4:02 PM Sesh Sadasivam ***@***.***> wrote: Thanks for the feedback, Prof. Darden! I think Accessibility (a11y) is super-important for any website, especially more so for required course material. Some notes based on the audit comments: - *Color palette*: I'm currently just using GitHub's styles for the default themes, but will check the color-contrast later this week and consider adjusting if appropriate. - *Inline code*: This should be automatic if you're using Markdown syntax. If you're willing to add me to the EECS 281 repos, I'm happy to audit your Markdown files and implement suggestions from my Primer Spec Markdown Tips page <https://eecs485staff.github.io/primer-spec/docs/MARKDOWN_TIPS.html>. Also, could you please share links to the pages that were checked as part of this audit? - I see a reference to Project 3's "Tips and Advice" page, but I don't see a link to the project from https://eecs281staff.github.io/eecs281.org/#projects - The audit mentions the "setup guides" page <https://eecs281staff.github.io/eecs281setup/>, but it doesn't look like this mini-site uses Primer Spec. - *Aside: I'm happy to help you port these docs / implement features needed to migrate to Primer Spec.* — Reply to this email directly, view it on GitHub <#267 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKDGVW27IN4MXWHAW2WTNL2EYAOVAVCNFSM6AAAAABTJJ77ISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRZGQZTSOBYG4> . You are receiving this because you authored the thread.Message ID: ***@***.***>