The forms boss battle

... and how to avoid it

1977

2019

The game boss

It's too difficult!!!

An inaccessible login form

How can something so simple be so broken?

    Username
    
    Password
    
    

        Login
    

About that "button"...

If it looks like a button and quacks like a button... what should it be?

    

        Login
    
    
    
    
    Login

How about labels?

    Username
    

The <span> does NOT label the <input>!

In other words this <input> has no accessible name

How do I give an input an accessible name?

    Username
    


Username
<input id="username" />



Username
   

Implicit labelling, explicit labelling, aria-label and

aria-labelledby

And the inclusive design winner:

Explicit labelling

Username
<input id="username" />

An accessible login form

The WebAIM Million

Accessibility evaluation of the top 1 000 000 home pages

59% of the 3.4 million form inputs identified were unlabeled (either via <label>, aria-label, or aria-labelledby). - https://webaim.org/projects/million

We need to share form accessibility secrets

Don't combine names!

A control should have only one name.

Username
<input id="username" aria-label="Enter a name for your user"/>

• A control should have only one name.
• aria-label overrides the label text.
• Think about voice control.

What about info texts?

Meet aria-describedby

Username
<input id="username" aria-describedby="info"/>


    Please use only characters from the alphabet

Info text in action

Client side validation

Aria-describedby to the rescue again!

Username
<input id="username" aria-describedby="info error"/>


    Please use only characters from the alphabet

A user name is required

Validation in action

This works for all single form elements

That means also for <textarea>,

<input type="checkbox"> and <select>

What about groups of controls?

Here we group with <fieldset>

and label with <legend>

    
Choose your favourite time of day
    
    
    Morning
    
    Noon
    
    Night
    

The <legend> tag HAS to be immediately after the <fieldset> tag!

But I can still set validation texts with aria-describedby, right?

Attaching aria-describedby to <fieldset> or <legend> is not supported in many screen readers

How do I validate groups then?

    

        Choose your favourite time of day
        You have not chosen a favourite time
    
    
    
    Morning
    
    Noon
    

Add text to the legend.

This means it can also be used for info texts!

You don't want your error texts next to your legends?

Move with CSS... or:

    

        Choose your favourite time of day
        
            You have not chosen a favourite time
        
    
    
    
    Morning
    //...
    
        You have not chosen a favourite time
    
    

Visually hiding things

.visually-hidden:not(:focus):not(:active) {
  clip: rect(1px 1px 1px 1px); 
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

A fieldset in action

Never lose the focus outline

Don't do this! Unless you provide your own focus outline style in the CSS.

    outline: none;
    outline: 0;

Placeholders and titles

Should be avoided in most cases!

Wasn't this talk supposed to be about React?

All video example apps were built in React...

JSX has everything HTML has

A few differences:

To build accessible React applications you HAVE to know HTML.

React hooks

Preventing form submission

const FormComponent = () => {

  const onSubmitHandler = e => {
    e.preventDefault();
    //Rest of the handler code
  };
  
  return (
      <form onSubmit={onSubmitHandler}>
        {/* Form JSX */}
      </form>
  );
  
};

Setting focus on things

  const inputRef = React.useRef(null);
  
  const onSubmitHandler = e => {
    //Set focus on error condition
    inputRef.current.focus();
  };
  
  return (
      <form onSubmit={onSubmitHandler}>
        {/* Some JSX */}
        <input ref={inputRef} />
        {/* Some more JSX */}
      </form>
  );

Controlled form elements

  const [inputValue, setInputValue] = React.useState('');  
  
  onChangeHandler = e => {
      setInputValue(e.target.value);
  }
  
  return (
    <React.Fragment>
         Your pet's name
         <input id="petName" 
            onChange={onChangeHandler}
            value={inputValue} />
    </React.Fragment>    
  );

Keeping id values unique

  const inputId = React.useRef(generateUniqueId());
  const [inputValue, setInputValue] = React.useState('');  
  
  onChangeHandler = e => {
      setInputValue(e.target.value);
  }
  
  return (
    <React.Fragment>
         <label htmlFor={inputId.current}>Your pet's name</label>
         <input id={inputId.current} onChange={onChangeHandler} 
            value={inputValue} />
    </React.Fragment>    
  );

Conditional rendering

  const inputId = React.createRef(generateUniqueId());
  const errorId = React.createRef(generateUniqueId());
  
  //More code
  
  return (
    <React.Fragment>
         <label htmlFor={inputId.current}>Your pet's name</label>
         <input id={inputId.current}
            aria-describedby={hasError ? errorId : null} 
            onChange={onChangeHandler} 
            value={inputValue} />
         {hasError && <span id={errorId}>Please enter a name</span>}   
    </React.Fragment>    
  );

Re-using stuff with hooks

  const useInput = () => {
    const inputId = React.createRef(generateUniqueId());
    const [inputValue, setInputValue] = React.useState('');  
      
    onChangeHandler = e => {
        setInputValue(e.target.value);
    }
    
    return {
        id: inputId,
        value: inputValue
        onChange: onChangeHandler
    }
  }

Now apply the custom hook

  const inputProps = useInput();
  
  return (
    <React.Fragment>
         <label htmlFor={inputProps.id}>Your pet's name</label>
         <input {...inputProps} />
    </React.Fragment>    
  );

Applying it all

The Forms Boss Battle

... and how to avoid it

• Almero Steyn
• almerosteyn.com
• @kryptos_rsa