This is a short "punch list" of core accessibility considerations for designers at the time of engineering handoff. There are many of these out there, but I found this list generally pushes on the right topics without getting too much into implementation details.

Broadly this list covers the WCAG 2.1 AA standard specifically. It does not include considerations related to the technical implementation of a design.

Content & Semantics

Is the design denoted with headings?

• Consider any visually hidden headings

• Consider heading order/structure (h1, h2, h3, etc.)

Is the design maintaining a consistent layout across multiple screens/steps?

• Ensure actions, navigation, content, etc. are in consistent places

• If you’re deviating from established layout patterns, do you have a strong reason for doing so?

Is all the copy in the interface written in easily understood language?

• Have a preference for brevity

• Use short sentences and universally understood words

Colour

Do all colour combinations (including hover/focus/error states) meet AA colour contrast requirements?

• Text of any size should be 4.5:1 on a background

• Graphics should be 3:1 on a background

Have you ensured that the design does not use colour alone to denote state?

• Always provide a representative icon or text that also denotes the state

Are links / buttons visually distinct from surrounding text by more than just colour?

• If a button or link must be inline with text, ensure it uses CAPITAL LETTERS for actions or an underline for links

• When possible, place links/buttons away from surrounding text

Interactivity

Do all interactive elements have a specified hover & focus state?

• Provide specifications for these states

Do your designs include an interaction that isn’t covered by the Web-ARIA patterns list?

• Are there things you can change about your design to ensure they conform to a pattern?

• If a pattern doesn't fit, work with front-end focused engineers on potential solutions

Do all interactions provide immediate feedback when engaged?

• Consider specifications for this feedback

• Consider loading & error states

Do all form inputs have a visible label?

Have you considered how non-sighted users are made aware of dynamically inserted content?

Responsive Design

Does your design still work if all text was 200% larger?

• Provide specifications for how text should reflow if not obvious

Does your design work with high browser zoom / prevent horizontal scrolling as much as possible?

• Provide specifications on how content & interface elements should reflow if not obvious