When redesigning our customer-facing form which contains different kinds of questions - text, currency, selects, radio buttons and checkboxes - the design team did not put any consideration in designing for good accessibility and the engineers did not put enough care in making the product work in screen readers at all. It just had to work and look good.

The form is a react app tha displays the questions one by one and a "next" button on the bottom. We haven't tested this yet but I imagine this is a nightmare for screen readers.

Would it be a good UX practice to aria-hide the whole "fancy" app and have an alternate bare-bones, browser-native <form> that is only visible by screen readers?

up vote 1 down vote accepted

There is rarely a case where a beautiful, elegant design cannot be made accessible. Alternate versions of a page are, sorry to say, a lazy approach. When using native html elements (<button>, <input type="checkbox">, etc), the accessibility is already built in to these elements and the screen reader user can have a delightful experience. If you use custom components made of <div> and <span> elements, those too can be made accessible when using ARIA attributes.

Would it be a good UX practice to aria-hide the whole "fancy" app and have an alternate bare-bones, browser-native that is only visible by screen readers?

99% of the time I would say "no". (It's probably more like 99.8%)

  • That's what I though, but this is a single-page application where the questions are changing dynamically. It might be a lazy approach but I'm afraid that we'd have to redo the whole thing to make it accessible now. – ecc 2 days ago
  • "we'd have to redo the whole thing to make it accessible" - not necessarily. SPAs can be accessible, even after they're built. you do have to change a few things but not redo it completely. the main thing is announcing changes (use aria-live) and focus management (when going to the next "page", move the focus to the logical starting point for that page). those two points will make a huge impact on accessibility. see medium.com/@aziz.marwan/… for some other general ideas (not nec just for SPAs) – slugolicious yesterday
  • contact me offline if you need more implementation details. stackexchange is for general concepts and not implementation so i didn't want to post programming tips here. (contact info is in my profile) – slugolicious yesterday
  • Thank you for the tips. They are good leads. – ecc yesterday

As long as the page loads correctly and is usable for both disabled and common users in terms of helping them finishing the task, whatever implementation you need to push to achieve that goal is fair.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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