WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Scrolling Agree to Terms Screen

for

From: glen walker
Date: Sep 20, 2018 11:15AM

Yeah, sometimes things are the way they are and we just have to make what
we have accessible even if we'd like to redesign it.

In this case, perhaps you can do something like this:

- The ACCEPT button could have an aria-label that explains a little more
as to why the button is currently disabled. You could maybe put this extra
information in aria-describedby, but jaws used to not announce the text in
aria-describedby but instead would say "use jaws key plus alt plus m". I
just tried it now and jaws actually read aria-describedby without me having
to hit the shortcut key. Not sure if that's a recent change.
- Part of the ACCEPT additional info could say there's a link after the
button that takes you to the terms and conditions, as a convenience. The
link could be sr-only.
- The terms and conditions section could also have an aria-label that
explains that you have to scroll to the bottom to enable the ACCEPT
button. The T&C could be a complementary role or a <section> element.

The code would (very) roughly be something like:

<div id="terms" tabindex="0" role="complementary" aria-label="terms and
conditions, you must scroll to the bottom of this section to enable the
accept button">
blah blah blah
</div>

<button aria-label="accept. you must scroll to the bottom of the terms and
conditions section before the accept button is enabled. a link to the terms
and conditions is after this button">accept</button>

<a href="#terms" class="sr-only">go to terms and conditions</a>

Depending on your requirements, the button could use the disabled
attribute, truly making the button disabled (and making legal happy) but AT
users would have to walk the DOM (or use the 'B' key) to find it in order
to hear the extra instructions.
Or you could use the aria-disabled attribute (instead of the disabled
attribute) so that keyboard focus could still go to the button but you'd
need javascript to prevent any actions on the button, which I'm guessing
your legal dept would not like.

Just tossing ideas out there.

Glen