net - UK (2020-02)

(Antfer) #1

Modals


Why are modals used?
One of the reasons why modals are favoured is because they
can act as an extension of the main document, meaning that we
don’t need to maintain an extra web page that wouldn’t contain any
content other than what we’d be displaying in the modal anyway.

Why force the user to load a web page when it’s not needed?
That being said, if the user does need to return to a modal after
having already moved onto a new web page, by default this
state isn’t recoverable, so that’s something to be taken into
consideration. One solution is to leverage JavaScript’s History API
(https://developer.mozilla.org/en-US/docs/Web/API/History_API/), but
if not, ask yourself this vital question:

Will users want to ‘go back’ to this web page with an open modal?
If there’s a chance they might and you’d rather not make the code
any longer than it already is, then consider not using a modal at all
and instead creating another step in the user flow that involves the
user navigating to another web page. Modals are typically better
suited for swift actions or skipping levels in the navigation.

WHY USE MODALS?





Whenever the

element lacks web browser
support, it simply falls back to behaving like a
regular
element, so it’s fine to use even
when it’s not being supported.
Note: the href attribute is required in order to
make the links focusable for non-mouse users.
When there’s no suitable value for the href attribute,
use href=”javascript: (or even better, the much more
semantic