CARPET - A Front End Checklist
by Chris Smith,
The 6 areas to consider spell out CARPET, hopefully making it easier to remember.
Is it Clear?
- Is it obvious what to do? Imagine it’s the user’s first day. Is help text needed?
- If we include help text does it use plain English (or translated equivalent)?
- Does any button text accurately reflect what will happen when it is pressed?
Is it Accessible?
- Are we using semantic HTML elements so the role of each piece of content is clear?
- Is all text easily legible – large enough with enough contrast? If you have to think about it, probably not.
- Do we have text descriptions for any visual media, such as images and icons?
Is it Responsive?
- Is it still usable when the viewport is very large or very small?
- Do items that are visually grouped become disassociated when the screen is very wide?
- Could the experience be optimised for different screen sizes?
Is it Performant?
- Are there barriers which may mean waiting times greater than 2 seconds?
- Are we keeping DOM manipulations to a minimum?
- Could it be made faster, possibly by doing less at once, or doing some things in the background or asynchronously?
Is it Efficient?
- Is there user effort that we could remove - repetition of actions, excessive clicks or scrolling?
- When the page loads is the initial focus on the most useful element?
- Is there an opportunity to remember user preferences or persist filters?
Is it Testable?
- Are any values that we may want to test available in the DOM?
- Do elements with testable values have IDs or classes so that the specific elements can be targeted?
- If we have values embedded in images, videos or canvas do we have a text equivalent which we can test?