Showing error messages above input fields helps users

I’ve been watching sessions from Deque’s 2025 accessibility conference this week, and was delighted by Vitaly Friedman’s presentation, called Inclusive Design Patterns for 2025. He highlighted some persona-based design considerations for Gen-Z and aging population (60+), which were very helpful.

Here’s one consideration Vitaly mentioned that makes a lot of sense across the board: showing error messages above form input fields helps users review and correct the errors.

Doing so, can address two accessibility issues with showing error messages below input fields.

• On mobile, the error message may be covered by the virtual keyboard.
• While editing the input, the error message may be covered by autofill or autocomplete dropdowns

Users need to be able to consult the error message, while correcting the error. The best way to provide clarity in that process it to ensure visibility of the input field’s label, user-typed value, and error message. Obscuring any of those elements, especially on mobile, will lead to confusion.

It’s worth acknowledging that this design pattern comes at the cost of layout shift, which is where form fields shift vertically to make space for each error message to appear. This may be described as disruptive or frustrating, but Vitaly mentioned that his user testing shows a strong preference for the error messages above inputs, even with the layout shift, because of the enhanced clarity.

I encourage you to watch Vitaly Friedman’s full session. It’s chock full of usability insights that will be helpful when designing for accessibility.