Keyboard, screen readers and small screens

The Snipfire editor works fully from the keyboard and with screen readers, meets WCAG AA colour contrast in both themes, and adapts to phones, tablets and high zoom levels.

Leaving the code editor #

In the code editor, Tab indents, as in any code editor. To move on to the next control:

• press Esc, then Tab (or Shift+Tab to go back), as in VS Code, or
• press Ctrl+M (Ctrl+Shift+M on a Mac) to switch Tab to moving focus instead of indenting. Press it again to switch back.

A hint shows when you reach the code editor with Tab, and after Esc: Tab indents. Esc, then Tab: leave the editor. Ctrl+M: Tab moves focus. Screen readers hear it too. Alt+F1 opens the code editor's own accessibility help.

Moving around with the keyboard #

• Menus (+ New, ⋯, the type picker): Enter or Space opens them; the arrow keys, Home and End move; typing a letter jumps to an item; Esc closes the menu and returns to its button.
• Dialogs (confirmations, History): they take focus, keep Tab inside, and give focus back to where you were when they close.
• Tabs (Settings form / Code, the narrow-screen tabs): the arrow keys move between them.
• Screens (the snippet library, generators, import, Getting started, export, and Snipfire Pro's views): focus goes to the screen's heading; Back to snippets returns it to the link that opened the screen.
• The snippet list: opening a snippet with the keyboard keeps focus in the list, so you can move on to the next one. Opening one with a click, or with + New, puts focus in the code editor.
• Every field, switch and icon button has a name. The sidebar's switches say which snippet they switch.

The keyboard shortcuts of the code editor work as usual.

With Snipfire Pro, the hook finder's labels open with Enter or Space and its popovers give focus back on Esc; the element picker works with the arrow keys and Enter; the AI assistant and the live CSS preview take focus when they open and give it back when they close.

Screen readers #

• Status messages are announced: saved, live, errors, installs, how many snippets match a search, the result of Run.
• Messages stay on screen while the pointer or keyboard focus is on them, so there's time to read them.
• The editor, sidebar and settings panel are labelled regions with headings.
• The Tools page, the classic screens and the classic condition builder label every field; the classic condition builder keeps focus where it was when it redraws.

Colours, contrast and motion #

• Text, buttons, type badges, the code editor's syntax colours and the history comparison meet WCAG AA contrast, in the dark and the light theme. The history comparison marks changes with a tint, a border and + / − signs, not colour alone.
• Every control shows visible focus.
• Your system's reduced motion setting is respected, and so is Windows high contrast mode.

Phones, tablets and zoom #

On screens 960 pixels wide or narrower (a phone, a tablet in portrait, or a desktop browser at 200% zoom), the editor shows one pane at a time, with tabs at the top: Snippets, Code and Settings (and the name of any other screen you open). The code editor and the settings use the full width, controls are big enough to tap, and nothing scrolls sideways.

Big sites #

The editor stays quick with thousands of snippets: long lists are drawn a screenful at a time as you scroll. If you're looking for one snippet, Search snippets… is the fastest way.

Something doesn't work for you? #

Tell us which browser, screen reader or device you use and what went wrong: accessibility problems are treated as bugs.