0

I have made two prototype versions of a button type element one is a mixture of material design and soft UI and other is pure soft UI can you help me in deciding which one is better in terms of accessibility and user experience

So as I can work upon my upcoming web components based UI library 😃

https://codepen.io/BhavyaSingh2003/pen/zYxpwVP

Here is the link for the same the upper button is a mixture of material design and the lower one is pure soft UI.

  • 2
    The examples you give have no JS (which I am guessing is meant to add functionality), its just CSS and HTML and you have 2 buttons that are divs so as it stands - both are completely inaccessible to everybody. Read around accessibility and HTML semantics before you choose, you should also look into learning the basics of using a screen reader (NVDA is free for PC, or voiceover on Mac / iOS is built in) so you can identify accessibility issues. At the moment there is nothing in this question we can help you with bud. – Graham Ritchie Jan 6 at 8:26
-2

If you want to just check the visual side of accessibility (seeing that your examples aren't interactive prototypes, so they can't be tested for accessibility fully), you could go to WCAG 2.1, for example to see if colors and sizes are good enough.


Target sizes

For sizes, to achieve level "AAA" (which, arguably, means the buttons have good accessibility) they say:

The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;

Both of yours examples are 148×148 CSS pixels large, so both buttons pass that test.

Color contrast

For color contrast, there are two tests. AA level requires:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

<..>

So, for first example (the "mixture" button), contrast ratio between text and background is 5.09:1, which passes easily.

For the second ("pure soft UI"), it's 4.79:1, which is all right too.

Now, there's second test, for level AAA:

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;

<..>

And both of your buttons fail that.

I'd worry about the lack of bound cue in the second example - borders help users understand what is the size of the target, so they definitely help make your design more accessible. You probably should consider testing at least the contrast for those too.


So, in the end, I'd say both of those buttons visuals fail WCAG 2.1 level "AAA", but could be level "AA" compliant.

Please note, that Accessibility an UX is not just about visuals, if what we're testing is buttons, the test does require interactivity and, preferebly, user testing.

Not the answer you're looking for? Browse other questions tagged or ask your own question.