What Zelsis checks · Screens

Screens that break, on a phone or for keyboard users

People notice a broken screen before anything else. Zelsis checks the patterns that lock out keyboard and screen reader users, or that fall apart on a phone.

Checked on every pull request

• Dialogs that do not keep focus inside, and fields that trap the keyboard
• Buttons and links with no accessible name
• Pages wider than the phone, and pages that block zooming
• Inputs small enough that iOS zooms in when they are tapped
• Content that only opens on mouse hover
• Lists loaded in the browser with no loading, error or empty state

Caught in real code

Our test suite scans these examples on every release.

export function InviteModal() {
  return (
    <div role="dialog" aria-modal="true">
      <input name="email" />
      <input name="name" />
      <input name="team" />
    </div>
  );
}

export function InviteModal() {
  const onKey = (e: KeyboardEvent) => {
    if (e.key !== 'Tab') return;
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
  };
  return (
    <div role="dialog" aria-modal="true" onKeyDown={onKey}>
      <input name="email" />
      <input name="name" />
      <input name="team" />
    </div>
  );
}