CARPET - A Front End Checklist

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?