Does an informational modal with "X" (close) also need "back"?

Question

I'm creating a modal overlay for a mobile device, the modal is purely informational about a product not being found on a list. The modal has an 'X' close button, is there a need to have a more primary button below the text that says, 'Close' or 'Back'?

A modal needs to be used for the sake of consistency and it will lay on top of the search screen. Clicking the 'X' would do the same thing a back button would do, return the user to the search screen where they can scan a different product.

So the question boils down to: Do all modals need a clear primary action even if it repeats an already accessible action?

Thanks!

Answer 1

close is not the same as back, they are completely different actions.

With close, your users will understand they're closing the active element (eg, your modal). With back, they may understand they will go to the page previous to the search OR that there are previous items (such as products).

The above being said, the additional close button might not be STRICTLY needed, but it's highly recommended. Also, you should be careful to have a label for screen readers, see for example Bootstrap's Close Icon recommendations

Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label.

Same goes for Zurb's Foundation close icon

A close button is a element with the class .close-button. We use the multiplication symbol (×) as the X icon. This icon is wrapped in a with the attribute aria-hidden="true", so screen readers don't read the X icon.

The button is also labeled with aria-label to clarify what the button's purpose is.

As you may see, they don't say anything about visible labels, but even then they preserve the aria-label

Additional concerns

Depending on the content, you may want an acknowledgement rather than a close button. For example, if your content is a message that you want your users to read, it's better to offer a button with an acknowledgement such as OK, got it or Yes, I understand rather than close

Also, if these modals are just dialog boxes, a close icon is enough

In short

Unless you have spacing constraints, use the button, but make sure to consider what type of message are you using in your modal