In recent months, I have been actively involved in accessibility work, largely due to a kind individual who uses JAWS and enjoys testing various CodePen elements with me. I rely on tools like axe and WebAIM to identify issues, but testing over video calls has uncovered some embarrassing oversights on CodePen that I was pleased to rectify. For instance, we discovered a page with four
tags, which was quite a blunder (hint: it was the homepage).
Many accessibility issues are challenging to detect without real-world usage or testing with diverse individuals. Sometimes, these problems stem from a narrow perspective. For example, Bruce Lawson highlighted a form requiring a two-character “First Name” and mandatory “Last Name,” assumptions that do not align with cultural norms. While “Jimmy Eaglechest” works fine, individuals like U Nagaharu, a Korean-Japanese botanist, would face difficulties using the site.
It is encouraging to see major companies prioritize accessibility, such as GitHub incorporating underlined links for improved accessibility. They faced complex challenges with their search form inputs, considering various accessibility aspects.
News sites like the Washington Post incorporating accessibility checklists into their design systems is another positive development.
I recently came across Ian Lloyd’s blog post titled “When I Get That Low Contrast Feeling, I Need Non-Textual Healing,” which explores the complexities of testing color contrast. The interactive examples demonstrate the importance of considering contrast not only in normal states but also in various interactive states, particularly the focus state.
Did you know that the minimum size for a clickable target should be 24px × 24px? Larger targets are easier to interact with, especially when considering touch interfaces. Failing to adhere to this guideline can lead to significant accessibility issues.
Nicole Sullivan’s article on expanding touch targets delves into the WCAG 2.2 guideline regarding the proximity of smaller clickable targets to other elements.
If your design requires a smaller clickable target, keep any other clickable elements at least 12px from the center of the target.
Eric Bailey’s piece on swearing and automatic captions highlights the limitations of automatic captioning services, which often censor swear words assuming a professional context. This underscores the importance of not relying solely on technology to address cultural issues.
Many automatic captioning services censor swear words. I feel this is done because there’s the assumption that they’ll be used in a business context.
You can’t solve culture with technology. If you need to rely on software to police your employee’s language, you’ve got bigger fucking problems.
