Re: AA Compliance for Complex UI

Hej Sabrina,

It depends. ;-)

Bad answer, I know. But there is so much to think of and it really depends on so many design details, that I cannot give a definitive answer. My approach would be a raw concept and a lot of trial and error with many, many iterations and user testing. If you just look at the SCs you might end up with a product that still isn’t intuitive or even more or less useless.

Especially when it comes to scrolling you have to make sure, that it works with all input methods like touch or keyboard. See this one for example:
https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html


And yes, there is not a lot of real estate on a small screen. Again: try what works and what doesn’t actually thats what I would do.

The same is true for any scrollable element - input and output must work for everyone and it should be intuitive. Try to design the app/ site in a way, that you yourself would like to use with the keyboard and a screen reader or other input and output options like speech to text or touch…

There is no concept or tutorial that works for every use case and design…

Greetings,

Marc


Am 26.03.2024 um 13:56 schrieb Sabrina Curutan <curutasv@gmail.com>:

Hi Marc,

Thanks for your feedback. For using 2D scrolling for tables and the scrollable timeline, should certain elements be sticky to anchor the patient for context (in which case we run out of space quickly)? Or would it still be usable if at 400% zoom, the user would scan the page as if looking through a magnifying glass?

Curious to hear thoughts on this,

Sabrina

On Tue, 26 Mar 2024 at 08:30, Marc Haunschild <haunschild@mhis.onmicrosoft.de<mailto:haunschild@mhis.onmicrosoft.de>> wrote:
Hej Sabrina,

If it’s essential, scrolling is allowed.

See https://www.w3.org/WAI/WCAG21/Understanding/reflow.html


Tables are explicitly mentioned… ;-)

Greetings,

Marc

Am 26.03.2024 um 12:58 schrieb Sabrina Curutan <curutasv@gmail.com<mailto:curutasv@gmail.com>>:

Hello W3 Community,

I am part of a project that is trying to achieve Level AA WCAG compliance and has complex UI's including large data tables, embedded PDFs, and a scrollable timeline (similar to https://www.tiki-toki.com/). We did not start with mobile-first designs and are experiencing issues trying to meet the AA requirements (specifically 'SC 1.4.10 Reflow').

Wondering if anyone has dealt with trying to fit a complex UI in a screen equivalent to 320px wide or can provide some web examples?

Looking forward to your feedback,

Sabrina