Accessibility and mobile design: how to include them in your portfolio

A UX/UI portfolio can show how you make a mobile interface easier to read and use. Present specific checks and their limits: a polished mockup alone does not prove the accessibility of the developed product.

1. Examine one journey

Choose a mobile form or search flow. Show a small screen, long labels and error messages. Explain how information remains understandable without relying on colour alone.

2. Document contrast checks

WCAG 2.2 level AA generally requires at least 4.5:1 contrast for normal text and 3:1 for large text, with exceptions defined by W3C. Measure actual text/background pairs and keep the results instead of simply claiming “accessible colours”.

3. Consider touch interaction

Check target size and spacing. The WCAG 2.2 AA minimum target-size criterion uses 24 × 24 CSS pixels or sufficient spacing, with exceptions. This does not mean 24 pixels is always comfortable: choose targets appropriate to the task and mobile context.

4. Annotate implementation needs

Specify reading order, control names, focus and expected keyboard behaviour. Keyboard and screen-reader operation need testing in the developed interface; a Figma annotation is not a functional test.

5. Report accurately

“Checked contrast on the presented screens; reviewed messages and touch targets. Keyboard and screen-reader tests remain for the developed version. This is not a complete conformance audit.”

References: W3C contrast guidance and target-size guidance.

Illustrative stock photos; the people shown are not presented as Kamerjob employers. Cover and illustration: Pexels / Pexels.

Find opportunities on Kamerjob and tailor your portfolio to the actual duties in each vacancy.

The Kamerjob team