Accessibility
What every screen, page, and printed piece has to pass: contrast that is measured, text that can grow, targets a thumb can hit, and meaning that never rests on color alone.
Measured, not claimed
#Patepang is made for people who read with their ears, press with one thumb, read large, or see no difference between red and green. What is on this page is not a wish: each line is a rule that a test or a check already holds, or one that is marked as not yet verified.
The bar is WCAG 2.2 at level AA, on every screen and every page, in light and in dark.
Contrast
#Words need 4.5:1 against their ground. Large words, the edge of a control, a focus ring and the marks that carry a control’s state need 3:1.
No pair is used before it is measured. The app writes a report of every pair it draws with, light and dark, and a test fails when a color changes without it; the sites measure each pair of their own, and measure the words on a painting from the pixels behind them.
Soft blue is the clearest case. White on it measures 2.58:1 and it measures 2.37:1 on ivory, so it is who Patepang is, and never words or a control.
Never color alone
#Color never carries a meaning alone. Something else always says the same.
| What is said | Besides color |
|---|---|
| Something went wrong | An icon and words |
| What is chosen | A check, a dot, a position, a shape or an outline |
| Which step this is | Words: “2 of 4” |
| A status | An icon and a word |
| A link in a sentence | An underline |
Text that grows
#Text grows with the phone’s setting. Things have a least height, never a fixed one, so nothing is cut off; the app is checked at 130%, 160% and 200%.
On the sites text stays whole at 200%, no page is wider than a screen of 320 px, reading text is never under 13 px, and a line holds about 70 characters.
Nothing is set in all capitals, and no label is letter-spaced.
Touch and keyboard
#Every action answers a finger in an area of at least 48 in the app, and 44 on the sites with 48 for main controls. A link inside a sentence is the one exception.
Everything that can be pressed shows that it was pressed.
Whatever a keyboard reaches is ringed: 2 wide, and at least 3:1 against what is around it. On dark grounds the ring turns light, because the brand’s blue would not show there.
A dialog holds the focus inside it, starts on its safe action, closes with Escape or the back button, and hands the focus back to what opened it.
Motion
#When the phone or the browser asks for less motion, nothing slides, grows or loops, and what would have moved shows its final state. Anything that runs by itself can be paused. The Motion page has the rest.
Screen readers
#- Every control has a role, a name and a state that a screen reader can say. What changes without taking the focus is announced once.
- The logo is read as “Patepang” and nothing more.
- A picture beside a title is decoration and is hidden from screen readers. A picture that stands alone has a sentence written for it, in Indonesian and in English.
- An icon that stands alone has a name. An icon beside its word is hidden, so the word is not read twice.
- Every page has one first heading, and a link at its very start that jumps to the content.
Other states
#The sites are also checked in the states a first look does not see.
| State | What holds |
|---|---|
| Printed | Paintings, headers and buttons leave; every answer of a list of questions prints, open or not |
| Without script | Every page reads in full, and controls that need script are not shown |
| Forced colors | What was drawn with a ground color takes a system color; a state shown by a fill gets another mark |
| A wrong address | The page that says so stays inside the site, in the language of the address |
| A jump to a section | It lands under the header, not behind it |
What holds it
#What holds these, on every change:
- The app: tests for contrast, touch targets and the motion policy; tests in a real browser for the keyboard, focus and text at 200%.
- The sites: axe on every page in both schemes; every page at 360 and 320 px; focus rings and words on paintings measured from their pixels; print, no script and a search without results; Lighthouse at 95 or more.
Never
- Use a pair of colors that has not been measured.
- Say something with color alone, sound alone, or a picture alone.
- Turn off text scaling for anything that is read.
- Hide the focus ring, or the browser’s own without giving another.
- Put words on a photo or a painting without measuring them there.
Not yet verified
#The app has not yet been tested with VoiceOver or TalkBack on real phones, or on physical devices at all. Its checklist for those tests is written and waits.
Patepang Sans, the icons and the illustrations are still to be looked at on real phones too. Each of their pages says so.