Accessibility

Your app is built from Sapilon’s UI kit — the buttons, fields, menus, tables, dialogs and page layout the Agent composes every screen from. The kit is made to meet the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA, and level AAA for the criteria a component library controls. WCAG 2.2 includes everything in 2.0 and 2.1, so the same holds for those versions.

That covers the parts of accessibility that live in the components. It does not cover what you put in them, and it is not a certificate — both are explained below.

What does the kit do at level AAA?

• Contrast (1.4.6). Turning on High contrast raises every piece of text to at least 7:1 against its background, in light and dark mode. People can switch it on from the account menu (your avatar), and it switches itself on when the phone or computer is set to Increase contrast. The choice is remembered on that device.
• Target size (2.5.5). On a touch screen — phone, tablet or touch laptop — every button, field, menu item, tab and date is at least 44 × 44 pixels, or has a tap area that size around it. With a mouse, the denser desktop sizes stay, and they still meet the AA minimum.
• Focus appearance (2.4.13). Moving through the app with the keyboard shows a solid ring at least 2 pixels thick, at 3:1 or better against what is around it, on every control.
• Animation from interactions (2.3.3). When the device is set to Reduce motion, dialogs, sheets, menus and notices appear without sliding, fading or zooming. Loading indicators stay, without the motion.
• Location (2.4.8). Every page names itself in the page header, the breadcrumb trail and the browser tab.

What does the kit do at level AA?

• Contrast. In the default theme, text is at least 4.5:1 and field borders, switches and focus rings at least 3:1. An automated test measures every colour pairing in the theme, in all four modes (light, dark, and each with High contrast), and fails the platform build if one drops below its level.
• Keyboard. Every control can be reached and used without a mouse: menus, dialogs, date pickers, tables whose rows open something, and drag-to-reorder lists (Space to pick up, arrow keys to move, Space to drop). The first Tab stop on every page is Skip to main content.
• Touch. Nothing is reachable only by hovering. A list row’s ⋯ menu, which appears when the mouse is over the row, is always shown on a touch screen. Touching and holding the row opens the same actions in a sheet from the bottom of the screen, headed with the item’s name. Where a list also lets you swipe a row to reveal a button, the same action is in that sheet, so nothing depends on the swipe. If you ask for the ⋯ to be hidden on touch screens, it stays available to screen readers.
• Screen readers. Controls announce what they are, what they are called and what state they are in. Form fields are tied to their labels and to their error messages, pages have landmark regions, and the tab title names the current page.
• Zoom and small screens. Pages reflow down to 320 pixels wide — the width of a desktop page at 400% zoom — without scrolling sideways, except wide tables, which scroll inside themselves. Pinch-zoom is never turned off, and the app follows the phone’s Text size setting.

What stays your responsibility?

The kit can’t know what your content means. These depend on what you put in the app, so ask the Agent for them when you build the page:

• Images. A short description for every image that carries information, and none for decorative ones.
• Link and button wording. “Download the March invoice”, not “Click here”.
• Audio and video. Captions, and a transcript for audio.
• Plain language. AAA asks for text a secondary-school reader can follow (3.1.5), or a simpler version beside it.
• Your brand colours. High contrast uses the dark end of your brand colour on light backgrounds and the light end on dark ones. If you give the app your own brand colours, ask the Agent to check they still reach 7:1.
• Screens built outside the kit. A chart, a canvas or a hand-made control the Agent writes for one page doesn’t inherit any of this. Ask for it to be checked like the rest.

Where does the kit fall short of AAA?

Two places, stated so nothing surprises you:

• Short notices disappear. A confirmation such as “Saved” hides after four seconds. It pauses while the pointer or keyboard focus is on it, and error notices stay until they are closed. AAA’s No timing criterion (2.2.3) asks for none of them to go by themselves.
• Reordering by dragging works with the keyboard but has no one-tap alternative, such as “move up” and “move down” buttons, which WCAG 2.2’s Dragging movements criterion (2.5.7) asks for.

Is this a certification?

No. WCAG conformance is a claim about finished pages, content included, and W3C itself does not recommend requiring AAA for an entire site because some content cannot meet every AAA criterion. What Sapilon gives you is a foundation that already does the parts above. If you need a formal statement, such as an Accessibility Conformance Report for a tender, have the finished app audited. The checks in Checkup and your tests don’t replace that audit.

To try it yourself: turn on High contrast from the account menu, move through a page with only the Tab key, zoom the browser to 400%, and switch on your phone’s screen reader. The names used for each part of the screen are in Naming what you see.