Accessibility

Ganttry's frame — the top row, the sidebar, every full page and the main dialogs — is built to work with a keyboard and a screen reader, at large text sizes and on small screens. So are its two grids: the editor's task grid and the People page. This page lists what they guarantee, how each part is checked, and what no test covers.

Where to find it#

There is nothing to turn on. The guarantees below apply everywhere the frame does. For light or dark, use Tools ▾ → Appearance.

Page structure for screen readers#

• Every full page is one main region, named by its one heading. The editor's own area is a main region named Schedule.
• The editor's toolbar is the page banner. The sidebar, the project tabs and the phone's bottom bar are named navigation regions.
• The "isn't available" message (see Getting around) is a named region of its own.

Every control has a name#

Every button, box and menu has a name a screen reader can read out — a placeholder is never used as one. That includes the company picker on Company, the boxes for adding a trade on Crew planning, and the Share dialog.

Using the keyboard#

• Opening a full page moves focus to its heading, and the editor behind it is set aside so your keys can't reach it. Closing the page returns focus to the control that opened it, or to the grid.
• Opening or creating a project, from File ▾, the Open a project page, the sidebar, Go to, or a page such as Home or Projects, moves focus to its grid, unless a dialog, a menu or a text field still has it.
• ☰ moves focus into the sidebar drawer or the sidebar opened over the editor. Moving focus out of it closes it; Esc closes it and puts focus back on ☰.
• The icon rail's icons show their names when you tab to them, as well as when you point at them.
• Focus is always visible, and pages keep it clear of the sticky bars, the phone's bottom bar and the drawer.

Every keyboard shortcut is on the keyboard shortcuts page.

The task grid#

To a screen reader the editor's grid is a tree grid named Tasks, and it stays one stop in the Tab order:

• The arrow keys move the active cell, and the screen reader reads it with its column and row. A hidden header row names each column.
• Each row says how deep it sits in the outline, and a summary says whether it is expanded or collapsed. A cell you can't type in, such as a summary's dates or Booked, is read as read-only.
• The grid says what its own keys just did: a value you entered or cleared (Start: Tue Oct 13, Notes: empty), Indented 1 task, Collapsed Sitework, or 3 rows selected. It never speaks a teammate's change. Deleting tasks and pasting are said once, on the status line.
• Tab indents in the grid, so press Esc, then Tab, to move on (Shift+Tab to go back). After Esc the grid says Press Tab to leave the grid.
• Alt+Shift+− collapses the selected summary rows and Alt+Shift+= expands them, so the keyboard reaches collapse on a Mac too. On a Mac, Alt is the Option key.

Look and a view-only link show the same grid, read-only: there Tab moves on, and the arrows and the collapse keys still work. See Editing in the grid.

The People grid#

People is a grid with one Tab stop. The arrow keys move a cursor by person and day, and Enter opens that person's day. A screen reader reads the cursor: the person, the day and what they do that day, for example R. Diaz · Wed Oct 7 · Grade approach, Bridge 12, 2 of 2 · Day note: Inspector on site at 8:00. · Set forms, Yard Expansion, 1 of 1 · double-booked. Each task comes with its project and that day's staffing. A task they are only on Assigned To for says Assigned to, a day note is read once per project, and a day with nothing reads free. People's other controls in the grid, such as Book crew…, each sit in a cell of a row.

Go to#

Ctrl+K (Cmd+K on a Mac) opens Go to: a search box over a list. ↑ and ↓ move through it, and the screen reader reads the row you are on, its group and its place in the list. Enter opens it, and Esc closes Go to and puts focus back where it was. When nothing matches, Enter opens the Projects page with what you typed, and Tab from the box reaches the line's Projects, then Close.

Status is never color alone#

• Status marks carry words, not just a color.
• The current row, tab or bottom-bar item is announced as current, and marked with more than color.
• On the Calendar, where the status toggles fold down to marks, each status gets its own shape as well: ring, half, square and disc.

Size and reflow#

• Every target is at least 24 × 24 px.
• With a touch screen, rows in lists and the sidebar, and the bottom-bar tabs, are 44 px tall, buttons 40 px and search boxes 36 px.
• On Roster & equipment, People's crew heads and the field pages, the small controls a thumb uses most reach 44 px: the boxes, tabs and links in Saved crews and the side pane, Book crew…, the Day plan's ‹, ›, Today, Day / Week and Mine / Everyone, My tasks' side pane rows, the TODAY card's Day plan →, and the ✕ that takes a person off a task's Assigned To on Work. The buttons in a page's row of action buttons stay 40 px there too, as do the Calendar's ‹, Today and ›.
• Go to's Close is 44 px tall on a touch screen.
• On a touch screen, some controls stay smaller: the % box on Work's rows is 36 px tall, the Calendar's bars are 28 px, and the top row stays 32 px tall, so each of its controls taps at the row's full 32 px height and at least 40 px wide (32 px wide on the schedule screen of a phone narrower than 360 px).
• The list pages, Company's sections, and the New project, Profile and import dialogs reflow at 320 px wide without sideways scrolling. The editor's toolbars and grid scroll inside their own areas instead.

Contrast#

Text and the edges of controls in the frame and the dialogs meet the WCAG contrast levels — 4.5 to 1 for text, 3 to 1 for control edges — in both the light and the dark theme.

The grid's and the Gantt chart's colors are checked against the same levels, in both themes. While a filter is on, the summary rows kept above the matches read in gray in the grid, not faded, and each matching row shows a small mark beside its number. A kept row is described to a screen reader as Not a match — shown for the tasks under it. Some pairs fall short and are left as they are for now:

• Just short, between 4.2 and 4.4 to 1: colored text on a selected row, and the Gantt's day labels in the light theme.
• Short, between 3.6 and 4.5 to 1: those kept summary rows when they have a color tag, read on the tag's color. That is every one of the app's ten tag colors in the light theme, and four of them in the dark. A very dark or very light color you pick yourself reads lower.
• Far short, about 1.7 to 1 in the light theme and 2.2 to 1 in the dark: the Gantt still fades those summary rows' labels.

How it is checked#

• Checked automatically on every build: page regions and the one heading, every control named, the covered editor set aside with focus moved and restored, status never shown by color alone, and the contrast pairs. A build that fails one of these stops.
• Checked in real browsers: visible focus, focus never hidden behind a bar, target sizes, and reflow at 320 px — at 1440 × 900, 1280 × 800 and 1024 × 768, and on real touch at 834 × 1112, 768 × 1024 and 390 × 844. The two grids are also checked in Chrome, by reading what the browser hands a screen reader: their roles, the active cell, the words they speak, and the way out of the task grid. These checks are advisory: a failure does not stop a release.
• Listened to once: both grids were walked with VoiceOver on a Mac, in Safari and in Chrome, on an early test build of this release, and each line was heard as expected. Some words came after that walk and have not been listened to yet: in the People grid, a task's project, Assigned to, a day note, double-booked and the controls in cells; the line each Tools ▾ item adds; the Booked column; and, from 1.12.0, a kept row's description under a filter (read in Chrome's tree only). VoiceOver may read a Booked cell's text twice.
• Not checked: other screen readers (such as NVDA, JAWS or TalkBack) and Windows, zooming in with long names, and whether navigation stays consistent from page to page, which is judged by eye.

Who can use it#

Everyone — these guarantees are not tied to a role. See Who can see and do what.

Good to know#

• The guarantees cover the frame, the dialogs named above and the two grids. The grid's other keys are on Editing in the grid and Keyboard shortcuts.
• The Master plan's sections, which also edit rows, don't have the grids' screen-reader words.