Accessibility issues with APCA web tool

[clhenrick]

Accessibility issues with APCA web tool

This is not so much a specific accessibility bug, but pointing out how the tool is currently built doesn't conform to correct (semantic) usage of HTML which will cause problems for users of assistive technologies and those who rely on keyboard navigation, for example.

Does this relate to a web app or tool (i.e. you're an end user) OR is this about code or code integration (you're a developer).

I've only looked at the APCA web tool.

Describe the bug Improper use of HTML which leads to accessibility issues.

To Reproduce Steps so we can reproduce the behavior:

N/A

Expected behavior What were you expecting as correct behavior?

Correct / semantic usage of HTML.

Screenshots Add screenshots or code snippets to help explain your problem.

System or device information (please complete the following):

• Device: [e.g. iPhone6 or iMac]
• OS: [e.g. MacOS]
• OS version
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

N/A

Additional context

I'd recommend reading this MDN article to learn how to better structure your web apps with HTML. For example, clickable elements should generally be <button> and not <span>; HTML <table> should be used for representing tabular data, not for UI layout, etc.

You may also want to use Deque's accessibility tools to find specific accessibility problems.

[Myndex]

Hi @clhenrick and thank you for posting this issue…

I wanted to let you know that I do take this seriously and have gone through that particular page and I believe corrected the errors that you mentioned. Interestingly they don't actually come up as errors on some of the available tools you mentioned, nevertheless it provided a chance chance to revisit a few other things.

That Said

Just so you're aware this is not a production site. It's an experimental site, for trying different things out and this tool is not a production tool, it is just a demonstrator of the technology and development status, thrown together for the public beta trials going on now (the public beta is directed at the actual code and methodology, not htis specific tool).

In case it's not obvious, we're just using templates that we had from development that was done in the past (some over 20 years ago). Because the primary purpose here is conducting research, and not developing a production tool. But IMO all feedback is useful and in the context of research. It might amuse you to know that I make similar comments to A11y sites I stumble on that are significantly inaccessible. And is shocking how may are out there.

Just a comment on a few things that you mentioned: we don't use tables for any general formatting, only for organizing tabular data. It's more obvious on the SAPC toolsite which has a large dynamic matrix of font sizes and font weights while the APCA tool only has a about half a dozen.

Some of the issues that popped up as "error's" when we ran DQ or WV are out of our control, as they seem to trace to Google integrations.

Again, thank you for your feedback, if you have any more comments please don't hesitate to let us know. We also have the discussion tab for open chats not in need of closing.

Thank you

Andy

[clhenrick]

Thank you @Myndex for the kind response and explanation.

In regards to your comment:

Just a comment on a few things that you mentioned: we don't use tables for any general formatting, only for organizing tabular data.

Here is a screenshot showing what I was referring to in regards to using a table for organizing a UI:

This use of a table layout could potentially cause confusion for someone interacting with this page via assistive tech, which is why I mentioned the issue with <table>.

[Myndex]

Yws, as I mentioned this is not a production site, the tool is actually part of the development and live experiments,, derived from the research tool, which is about this chunk of tabular data:

The controls are all tab-able, and always have been, (though somewhere along the lines that became lost for the swap button, as you pointed out, and is fixed).

There is no guidance anywhere that indicates tables as not-accessible though, so I am trying to understand your point here more fully?

Thank you

Andy

[clhenrick]

@Myndex it's sort of as you said, using HTML tables for UI layouts were a common practice in the early days of the web. However, using them nowadays can trip up assistive technologies like screen readers. MDN has a good example of this mocking up the same layout with a table and with more semantic markup, then explaining the result for a screen reader.

Whether or not an AT like a screen reader is thrown off by a table UI layout depends on the combination of AT + browser + OS, and how the user likes to employ their AT (everyone is different). There's the concept of making a UI accessible, but that doesn't necessarily mean it's a good user experience for the person using it (again, MDN and others explain why this is in more detail).

So what I'm trying to get at, is that while the table layout may technically be accessible, it might be a poor UX for someone using a screen reader or other type of AT. I realize it's not a production ready tool, but it seems APCA is gaining traction / attention and folks on the web are pointing to this tool as a way to get a APCA score for color combinations.

Perhaps for part of your research you could user test your tools with people who rely on AT like screen readers? Just a suggestion, feel free to take or leave it.

[Myndex]

Hi @clhenrick thank you for the additional insight.

To be honest it was never my intention to build contrast tools… My goal was only to solve the very serious math problems with WCAG 2 contrast, though considering the unexpected interest in this work, I could see doing UX research to develop a tool and/or a design system.

That said, there are already over a dozen tools using APCA now, and more in development.

Again, thank you for your thoughts — I certainly want to "practice what I preach" but this exchange underlines one of accessibility's fatal problems, that being the lack of coherent guidance and practices not to mention significant hurdles due to the manner technology has and has not been flexible to accommodate needed changes.

What's worse is the number of accessibility companies and advocates who themselves fail even the existing inaccurate guidelines. There are even parts of W3 CSS that fails their own guidelines!

All the best, keep fighting the good fight.