Accessibility

HF Panel's interfaces are built to the Web Content Accessibility Guidelines (WCAG) 2.2, level AA. This page says what that means in practice: how to use them with a keyboard or a screen reader, and which settings on your own computer they follow. It covers the three panels (Server Admin, Reseller Panel, Control Panel), HF Mail, HF Files, HF Studio, the HF Server desktop app and this documentation site.

Every screen is checked with axe-core, an automated accessibility checker, in the light and the dark look, at desktop and phone widths.

Keyboard

Everything you can click can also be reached with the keyboard.

• A visible focus ring. The element that has the keyboard focus gets a clear outline, with at least 3:1 contrast in both looks.
• Skip to content. The first Tab on a page of the panels, HF Mail, HF Files and HF Studio shows a Skip to content link: press Enter to jump past the menu straight to the page itself.
• Dialogs. When a dialog opens, the focus moves into it, Tab and Shift+Tab stay inside it, Esc closes it and the focus goes back to the button that opened it.
• Wide tables and code. A table or code block that scrolls sideways takes the focus itself when there is nothing to click inside it, so you can scroll it with the arrow keys.

Shortcuts

In the panels, press ? to see the shortcuts. The main ones:

In HF Mail, ? shows its shortcuts and / puts the cursor in the search box. Shortcuts never fire while you are typing in a field or holding Ctrl, Alt or ⌘.

Screen readers

• Landmarks and headings. Each page of the panels, HF Mail, HF Files and HF Studio has a banner (the top bar), the menu, and the page itself as the main area, and its sections have headings. Screen reader users can jump between these.
• Every field has a name. Form fields are tied to their captions, so the caption is read with the field (and a click on the caption puts the cursor in the field). Buttons that show only an icon have a spoken name.
• Messages are announced. Notices after an action (saved, an error) are read out without moving the focus; an error under a field is linked to that field.
• Counts are part of the name. The notifications bell and the HF Server menu read out their numbers, for example "Notifications 3" or "Mail 2 unread".
• Tables have header cells, so each value is read with its column name.
• Buttons that do nothing yet are marked so. In the HF Mail message list, the buttons for selected messages (Read, Delete, Move…) are unavailable until you tick a message, and screen readers say so.

Colour and contrast

• Text has at least 4.5:1 contrast against its background (3:1 for large text), in both the light and the dark look. The keyboard focus ring has at least 3:1.
• Nothing is shown by colour alone: links inside text are underlined on this documentation site, and states (on/off, running/stopped) are written out as well as coloured.
• Light or dark. The look follows your computer's setting until you choose one: click the moon or sun button at the top of the panels, HF Mail, HF Files or HF Studio. The choice is shared by the panels and webmail.

Zoom and text size

• The pages never block zooming: zoom in with Ctrl and + (⌘ and + on a Mac) or pinch on a phone.
• At phone widths, which is also what a large zoom gives on a computer, pages reflow into a single column instead of making you scroll sideways; only wide tables and code scroll on their own.
• Buttons and links you tap are at least 24 by 24 pixels.

Reduced motion

When your computer is set to reduce motion (Settings › Accessibility › Display › Reduce motion on macOS and iOS, Settings › Accessibility › Visual effects › Animation effects off on Windows), animations, fades and smooth scrolling are switched off in all the apps, the HF Server window and this site.

Report a problem

If something can't be used with your keyboard, screen reader or settings, tell your hosting provider or open a support ticket from Support tickets in the Control Panel, saying which page and what you were trying to do.

Related

• Troubleshooting
• FAQ