---
title: "Keyboard and accessibility"
description: "Use the console with a keyboard, a small screen or reduced motion. This page also names the checks that cover those behaviours."
canonical_url: "https://docs.oz0.ai/getting-started/web-ui/accessibility"
---
# Keyboard and accessibility

> Use the console with a keyboard, a small screen or reduced motion. This page also names the checks that cover those behaviours.

For: People using the web UI.

Use the console with a keyboard, a small screen or reduced motion. This page also names the checks that cover those behaviours.

## Keyboard and accessibility

Every page works from the keyboard and in both themes, light and dark. `make e2e-a11y` runs [axe-core](https://github.com/dequelabs/axe-core) over every page in both themes and fails on a serious or critical finding, such as text below WCAG 2.2's contrast of 4.5:1.

Other checks cover controls in use:

- `make e2e-drawer` checks the open chat drawer.
- `make e2e-console` checks the period control, an open filter dropdown and a list's pages at desktop and phone widths.
- `make e2e-records` checks the same controls on Jobs, the audit log and Errors, including each list's period, filter and page token sent to the server.
- `make e2e-lists` checks the search, a filter and the pages of Nodes, Plugins and the Inventory.

With *reduce motion* set in your system, the drawer opens without sliding and nothing spins.

On a phone the console keeps everything in view rather than cutting it: a page's header puts its actions on a line under the title, and a long title, such as a node's or a job's ID, wraps; a page with more than three tabs shows them as a **Show** select; the studio shows one pane at a time, with **Files**, **Editor** and **Inspector** buttons to switch while keeping edits; and a field never runs wider than the screen.

`make e2e-routes` checks this on every route of the console, with a real job, agent, tool, node, plugin and routine, in both themes at a desktop's width (1440 px) and a phone's (390 px): it fails on text cut short in a heading, tab, button or label, a control without a name for screen readers, the header's title or controls overlapping, a page that scrolls sideways on the phone, and a serious or critical axe finding, and prints a table of routes and what it found.

- The first **Tab** on a page offers **Skip to the page**, past the sidebar.
- A list's rows are stops for **Tab**: **Enter** or **Space** opens the row in its dialog, and **Esc** closes the dialog and puts you back on the row.
- Type **?** in the search (**⌘K**, **Ctrl K**) for every shortcut of the console:

<table>
<thead>
  <tr>
    <th>
      Where
    </th>
    
    <th>
      Keys
    </th>
    
    <th>
      What they do
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Anywhere
    </td>
    
    <td>
      <strong>
        ⌘K
      </strong>
      
      , <strong>
        Ctrl K
      </strong>
    </td>
    
    <td>
      Open or close the search
    </td>
  </tr>
  
  <tr>
    <td>
      Anywhere
    </td>
    
    <td>
      <strong>
        Esc
      </strong>
    </td>
    
    <td>
      Close a dialog, the chats or the search
    </td>
  </tr>
  
  <tr>
    <td>
      Anywhere
    </td>
    
    <td>
      <strong>
        ⌘J
      </strong>
      
      , <strong>
        Ctrl J
      </strong>
    </td>
    
    <td>
      Open or close the chats; <strong>
        Esc
      </strong>
      
       closes them and puts you back where you were
    </td>
  </tr>
  
  <tr>
    <td>
      Chats
    </td>
    
    <td>
      <strong>
        Enter
      </strong>
      
      , <strong>
        Shift Enter
      </strong>
    </td>
    
    <td>
      Send the message; a new line
    </td>
  </tr>
  
  <tr>
    <td>
      Chats
    </td>
    
    <td>
      <strong>
        ↑
      </strong>
      
       <strong>
        ↓
      </strong>
      
      , <strong>
        Alt ↑
      </strong>
      
       <strong>
        Alt ↓
      </strong>
    </td>
    
    <td>
      Move through the list of chats; the chat before or after the open one
    </td>
  </tr>
  
  <tr>
    <td>
      Search
    </td>
    
    <td>
      <strong>
        ↑
      </strong>
      
       <strong>
        ↓
      </strong>
      
      , <strong>
        Home
      </strong>
      
       <strong>
        End
      </strong>
    </td>
    
    <td>
      Move through the results
    </td>
  </tr>
  
  <tr>
    <td>
      Search
    </td>
    
    <td>
      <strong>
        Enter
      </strong>
    </td>
    
    <td>
      Open the result, or confirm an action that asks first
    </td>
  </tr>
  
  <tr>
    <td>
      Lists
    </td>
    
    <td>
      <strong>
        Enter
      </strong>
      
      , <strong>
        Space
      </strong>
    </td>
    
    <td>
      Open the focused row in its dialog
    </td>
  </tr>
  
  <tr>
    <td>
      Studio
    </td>
    
    <td>
      <strong>
        ⌘S
      </strong>
      
      , <strong>
        Ctrl S
      </strong>
    </td>
    
    <td>
      Save the file
    </td>
  </tr>
  
  <tr>
    <td>
      Studio
    </td>
    
    <td>
      <strong>
        ←
      </strong>
      
       <strong>
        →
      </strong>
      
      , <strong>
        Home
      </strong>
      
       <strong>
        End
      </strong>
    </td>
    
    <td>
      Resize a focused pane separator; <strong>
        Home
      </strong>
      
       closes its pane and focuses its toggle, <strong>
        End
      </strong>
      
       restores its starting width. The panel button reopens it
    </td>
  </tr>
  
  <tr>
    <td>
      Debugger
    </td>
    
    <td>
      <strong>
        J
      </strong>
      
       <strong>
        K
      </strong>
      
      , <strong>
        ↓
      </strong>
      
       <strong>
        ↑
      </strong>
    </td>
    
    <td>
      Next and previous step; <strong>
        Enter
      </strong>
      
       shows its input and output
    </td>
  </tr>
</tbody>
</table>

Each page says the same four things the same way: that it loads; that there is nothing yet, with what to do first; that it could not load, in the server's words, with **Try again**; and, where your role does not include the page, which role it needs. The browser tab names the page you are on.

The server sends the app's scripts and styles gzipped: the sign-in page is about 180 kB of them, and a signed-in first load about 330 kB, fonts aside.

[Back to Web UI](https://docs.oz0.ai/getting-started/web-ui).


## Sitemap

See the full [sitemap](https://docs.oz0.ai/sitemap.md) for all pages.