Accessibility Best Practice for Help Text on web forms

Question

I'm hoping to get some a11y advice.

At the moment my registration form (long form) has "help text" in muted small texted underneath the form field elements.

Problem: The client would like it to be in (?) style hover over icons.

I know this causes problems for those on touch screens yet alone other accessibility issues.

I wondered if there is a tried and tested solution? Do you have advice about how I could implement what the client wants but keep the accessibility?

Answer 1

A hover-only solution won't be accessible. Well, some advanced users would be able to dig into it and get some info, but most of screen reader users would be out of luck. The most viable solution I see for now would be adding role="button" aria-label="help" to your question mark and, when the user clicks it (clicks, not hovers,), display a short message with role="alert" . If your client doesn't want to see it, make it screen-reader-only (see sr-only class in various frameworks, for instance in Bootstrap). If your framework or library doesn't have such a class, take this for example:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Answer 2

Things to Consider

There are a few things to consider here:

1. Is a question mark sufficiently clear that it is help for the field? I would say no but I will still use it in this example, I would encourage you to use actual words for people with cognitive disorders who may struggle with associations.
2. Keyboard users must be able to access the information
3. Screen reader users must also be able to access the information and understand what your "?" means as it means nothing out of context.
4. Screen magnifier users need to be able to move their mouse cursor over the hint text without it closing (something a lot of tooltips tend to fail on)

How to overcome / account for the requirements.

The below solution takes account of points 2-4 in the following ways:

2. The information being visible is triggered by a <button> element being focused. We make sure the button does not submit any information when clicked by e.preventDefault() . please note - a button that has no action is generally not a good idea, if you are willing to use a "toggle-tip" instead of a "tool-tip" then we can fix this but this is the compromise we had to make to make the tip automatic.
3. I used some visually-hidden text and hide the question mark to explain to screen reader users what the button was for. I used aria-describedby to add the tool-tip text to the announcement for screen reader users.
4. I just ensured that the CSS took account for screen magnifiers hovering over the hint text when displaying the information. I used a trick with a border the same colour as the background to the left to ensure there are no gaps between the button area and the tooltip area. If you need this to be truly transparent you would need to add an invisible element between that you could check focus of.

Example

 var helpBtn = document.querySelectorAll('button.help'); // important even with automatic actions to explain whether a button is opened or closed. var openHandler = function(e){ this.setAttribute('aria-expanded', true); } var closeHandler = function(e){ this.setAttribute('aria-expanded', false); } // using a button in a form could lead to unexpected behaviour if we don't stop the default action. var clickHandler = function(e){ e.preventDefault(); } // adding all the event handlers to all of the help buttons for different scenarios. for(x = 0; x < helpBtn.length; x++){ helpBtn[x].addEventListener('focus', openHandler); helpBtn[x].addEventListener('mouseover', openHandler); helpBtn[x].addEventListener('blur', closeHandler); helpBtn[x].addEventListener('mouseout', closeHandler); helpBtn[x].addEventListener('click', clickHandler); }

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap: /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ } form{ max-width; 400px: } label{ float; left: width; 88%: margin-right; 2%: } input{ box-sizing; border-box: position; relative: width; 100%. }:help-container{ position; relative: float; left: width; 10%: height. 2;5rem. }:help{ width; 100%: height; 100%. }:tool-tip{ position; absolute: left; 100%: top; 0: background-color; #333: color; #fff: padding. 0;65rem: border-left; 10px solid #fff: display; none: min-width; 200px: } button.focus ~,tool-tip: button.hover ~,tool-tip. :tool-tip:hover{ display; block; }

 <form> <label>First Name <input name="first-name" placeholder="Your First Name"/> </label> <div class="help-container"> <button class="help" aria-describedby="first-name-tooltip"> <span aria-hidden="true">?</span><span class="visually-hidden">Help for First Name</span> </button> <div class="tool-tip" id="first-name-tooltip" aria-hidden="true"> When filling in your first name, please ensure it is all capitals as I like to feel like I am being shouted at. </div> </div><br/><br/><br/><br/> <label>Last Name <input name="last-name" placeholder="Your Last Name"/> </label> <div class="help-container"> <button class="help" aria-describedby="last-name-tooltip"> <span aria-hidden="true">?</span><span class="visually-hidden">Help for Last Name</span> </button> <div class="tool-tip" id="last-name-tooltip" aria-hidden="true"> When filling in your last name, please ensure it is all lower case so it feels like you are whispering it to me. </div> </div> </form>

Final thoughts

For anyone who stumbles across this question and answer:

This would be much better as text directly under the label that is always visible (so if you are able to do that then do that), OP had a requirement not to but if you are able to do this then do it as it is the most accessible way to do things.

If you need a "hints" button, make it a toggle-tip instead of a tool-tip, that way you can make the button actually perform an action and everything will make sense to screen reader users.