Accessibility Auditing My Portfolio Site — Part 1

a screenshot of the landing page of abbeyperini.dev with Firefox accessibility tools open
a screenshot of the full blog page on abbeyperini.dev with the WAVE accessibility extension active

Auditing with Automatic Tools

The Findings

  • the blank form I have to put in my index page to use Netlify’s serverless contact form and spam bot is missing form labels
  • no navigation landmark (<nav> or otherwise)
  • missing focusable=’false’ for the SVG in my button
  • warning to test Windows high contrast mode works
  • dark mode toggle — empty form label, form element with a visible label and hidden input, the ‘for’ attribute is not the ‘id’ of a valid <input> element, and the <label> element does not have descriptive text that identifies the expected input
  • many PDF accessibility issues!
  • verify that the file download mechanism does not cause a keyboard trap
  • alt-text — 1 was not descriptive enough, 2 were redundant, and 1 was too long
  • SVGs — the Github and Chrome SVG images/links I use all have the same id, SVGFocusable attribute is not set on them, and in my skills section, ARC Toolkit recommends adding aria-labelledby and ids
  • verify there is keyboard focusable content that allows you to scroll horizontally (referring to my blog preview component)
  • missing methods to bypass blocks of content
  • make sure “below” still makes sense without visual context
  • My <aside> elements do not have labels with accessible names!
  • 8 warnings to inform the user when an input action will open a new window or change the context
  • 85 empty link warnings — the HTML pulled using the DEV API generates empty links in the headings.
  • 7 skipped heading level warnings — this was an issue I knew about and I honestly thought this would be significantly worse.
  • long alt-text warnings
  • <br>, <em> and <strong> warnings
a screenshot of the main page of abbeyperini.dev in light mode with AXE DevTools open

Manual Testing is Key

  • Does a keyboard or screenreader hit the blank form?
  • How much of a problem is my dark mode toggle?
  • Does my blog preview component allow you to scroll horizontally?
  • Verifying it is clear you need to click the landing page button and easy to do so.
  • Are the PDF downloads, SVGs, and links making traps?
  • Do I need to add methods of bypassing blocks of content?
a screenshot of the main page of abbeyperini.dev with the Microsoft Accessibility Insights’ FastPass tab stops feature in use
  • The number of links I have that open new windows without warning is a problem.
  • The download file link does not create a keyboard trap.
  • I need to add Landmark roles for content not covered by semantic HTML.
  • I need to add accessible descriptions to my Github and Chrome links.
  • I am pleased to find my skills section SVGs do have accessible names.
  • My full blog text fails the reflow test around 350% zoom.
  • In horizontal mobile, my blog page switches to horizontal scroll!?
  • Neither keyboard or screenreader hit the blank form
  • It is clear you need to click the landing page button and easy to do so.
  • A screenreader gets trapped in my blog preview component.
  • It’s not obvious to a screenreader that the blog heading links are clickable.
  • I don’t think I need to add skip links for my main page, as the nav has buttons to load single components the content isn’t that dense.

What’s Next?

a screenshot of the main page of abbeyperini.dev with the IBM Equal Access Accessibility checker in use

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abbey Perini

Abbey Perini

…did someone say animated CSS button?