This site is a constant work in progress. When one needs a new portfolio quickly you reach for what you know best. Since becoming certified in web accessibility, it’s plain to see that there are more than a few issues that need to be resolved. I want to add much more to this site.
I’m planning on moving it away from WordPress. That platform has an outsized influence on my past work. The theme I built upon wasn’t coded with accessibility in mind and it shows. If I have time to learn it, Eleventy looks neat. I’m also exploring Ghost. I originally put together a roadmap to help keep me accountable, transparent, and motivated to address these things as I build my portfolio in public—and then, as ever with portfolios—forgot about it.
All the stuff that's not accessible
Before someone exposes me as yet another Accessibility Specialist who doesn’t do the work, I thought I’d save them the trouble and do it myself.
I made this site before diving into Deque University’s training or getting any of my IAAP certifications. A convenient excuse, but an excuse nonetheless.
So, I’ll call this a work in progress and press on in public. The choices I made around platform and theme mean that in order to make my portfolio truly inclusive, I’ll eventually have to rebuilt it from scratch. I’m quite looking forward to it, but that will take time. There are a few key some steps I can take in the meantime: assess everything that needs work, remediate what I can as time permits, and be transparent about the process.
Below is a full account of the issues I’ve found while auditing my portfolio. Each is mapped to specific WCAG criteria, though for simplicity’s sake, the list below doesn’t include every single detail of the audit. I’ve ranked them based on severity of impact (critical, severe, moderate, minor).
They are not in any particular order as they will require various levels of effort in order to resolve. Some issues affect every page and some are unique to a page or template, and some are blocked until I can rebuild the site. If you see any that I’ve missed, please reach out. I’d love to add them to the list and get them sorted.
Colors
- [Homepage] Increased contrast for Contact form input fields – Completed!
Controls
- [Global] Off-site links need indicators when opening new windows 🚨
- [Homepage] Accessible labels are missing from “More Work” links 🚨
Keyboard & Input
- [Global] Make focus states consistent between nav, buttons, links, and images 🚩
- [Global] Add Skip Navigation link for keyboard navigation – Completed!
Forms
No issues identified with labels, placeholders, instructions, validation, or inputs.
Images & Visuals
- [Case Studies] Overlapping images need alt text! 🔥
- [Case Studies] Decorative icons should be hidden from screen readers 🚩
Structure
- [Global] Fix theme meta tag disabling viewport zoom! 🔥 – Completed!
- [Global] Resizing of icons is broken using Firefox text-only zoom 🚩
- [Case Studies] Image background scaling breaks with Firefox text-only zoom 🚩
- [Case Studies] HerbMentor cover image overlaps navigation when zoomed 🚩
- [Case Studies] SS2 launch image overlaps text when zoomed 🚩
- [Global] Measurements and typography shouldn’t use “px” units – Blocked
- [Global] All content needs to be contained within landmark elements – Blocked
Reading & Navigation Order
No issues identified with reading order, focus order, jump links, or modal focus.
Dynamic Content
No issues identified with dynamic changes, time limits, or surprise context change.
Consistency
No issues identified with UI components, nav color, labeling, or heading structure.
Motion
- [Case Studies] Respect prefers-reduced-motion setting for Parallax effects 🚨
Media
- [Case Studies] Add captions to embedded YouTube videos 🩹
- [Case Studies] Link to alternative videos that contain audio descriptions – Blocked
Code
- [Global] Lang attribute should use a two-letter code 🩹
- [Global] All HTML needs to be valid and semantically correct! – Blocked
Last updated: Sept. 15 2023