PDA

View Full Version : ARIA theme does not meet A level WCAG



maciej.zabielski
28 Jun 2019, 11:51 AM
I'm bit surprised, that plain Crisp theme has better rating than ARIA theme when it comes to color contrast.

For example,
- white text on orange tab headers - contrast is at 2.41
- white text on purple background - 4.73

The requirement for AA is 4.5:1
and AAA is 7:1

I would expect that high contrast ARIA theme easily meets AAA requirements!
I know I can fix that in Themer, but why would anyone design "high contrast" theme that has less contrast than regular Crisp theme? There are different requirements for large and small text, but 2.41:1 is below any standard, even AA for large text!

And Sencha claims it was designed with "accessibility experts"?
What re your thought on this?

Quick reference for ARIA theme
https://examples.sencha.com/extjs/6.7.0/examples/classic/aria/


Regards,
Maciej

Dumbledore
30 Jun 2019, 11:12 PM
our app failed the accessibility tests by a third party test partner :-(

- the contrast is wrong
- the aria role "application" on the viewport is wrong
- the segement buttons are not "readable"
- grid-headers failed

etc.

thats really disappointed....

maciej.zabielski
1 Jul 2019, 12:23 AM
There is some explanation for the table headers here: https://www.sencha.com/forum/showthread.php?469485-Grid-lacks-table-headers
What version did you get assessed? Was it based on 6.5...6.7 or was it something earlier?

I'm trying to fix ARIA theme to get "AAA" contrast for all elements (I'm aiming at minimum 7:1 for all elements), but it not so easy at least for me, even using Themer.
I'm using this page to get two existing colors and see how to tweak them to get proper contrast. https://webaim.org/resources/contrastchecker/

For example, if we want to keep the orange highlight, we can use white text, it must be black to get proper contrast. (I have used #000000 and #ED9200 instead of white)

But then the same applies to buttons, and there is no text color differentiation between active and inactive buttons!
(Black and white text for inactive and orange with black text for active it not doable in Themer as least to my knowledge).

Another example, toolbar button groups and headers - they are BELOW "A" rating! Come on! SENCHA, SHAME ON YOU! This is not ARIA theme, this is merely some dark theme (yeah, nice looking but SO WHAT?)

Dumbledore
3 Jul 2019, 10:47 PM
Hi!

It is a 6.7.0 application with the graphite theme... And the graphite fails by the tester :s Currently i hope that the testers will allowed the usage of the aria theme...

Will your fixed aria theme public when finished?


Bye, Dumbledore