What happened
Web developers are increasingly drawing attention to the `<dialog>` element, which today is a standard building block of modern websites. CSS-Tricks, in its article Using and Styling the Dialog Element, pointed out that this seemingly small piece of web architecture actually hides a lot of detail when it comes to usage and styling. For the owner of a Slovenian small or medium-sized business, this means one thing: popups, notifications, and confirmation messages on your site can work better, faster, and more accessibly, without you having to load up heavy add-ons.
In this article we explain what `<dialog>` actually is, why it matters, and what it specifically brings to your business and website. We will not be writing a step-by-step guide, but rather showing you where the opportunity lies and where the risk is.
What the dialog element is and why it matters
Everyone has seen a popup on a website. It is that little window that appears in the middle of the screen when a site asks you something, notifies you, or wants your confirmation. Examples that probably every business owner recognizes:
- a "Do you accept cookies?" window
- a newsletter signup that jumps across the screen
- a "Are you sure you want to delete this?" confirmation
- an image gallery that opens over the entire screen
- a shopping cart or quick product preview that slides over the content
In the past, developers often built these windows "by hand," with a lot of extra code and frequently with heavy external libraries. The result was a slower site, more bugs, and poor accessibility for people using a keyboard or screen readers.
The `<dialog>` element is a built-in solution that the browser understands on its own. Because it is part of the standard, it delivers several things automatically and for free that previously had to be handled manually.
What the browser does for you
When a popup is built correctly, a modern browser automatically takes care of:
- Dimming the background, so the user focuses on the window
- Trapping focus inside the window, so pressing Tab does not escape into the background
- Closing with the Escape key, which users expect
- Better accessibility for screen readers and people with limitations
These are not minor technical details. They are the difference between a professional website and one that feels "homemade" and pushes people away.
Background: why this even matters
Most business owners never think about how a popup is built. And that is fine. But that is exactly why it matters that your web developer knows what they are doing. Poorly built popups are one of the most common causes of a bad user experience on Slovenian websites.
Common issues we encounter when reviewing existing sites:
- The popup cannot be closed on a mobile phone because the close button is not visible.
- The window opens, but the background keeps scrolling, which confuses the user.
- The window is not accessible by keyboard, which is a problem for accessibility and also for SEO.
- The window is built with unnecessary code and plugins that slow down the entire site.
This is exactly why the shift toward standard solutions like `<dialog>` is good news. Less code means a faster site, fewer bugs, and lower maintenance costs.
What this means for your business and website
Let's look at this practically. Why should the owner of a shop, a service business, or a tradesperson care about how a popup is built?
1. Site speed and Google
Google has for years factored page loading speed and stability into its ranking criteria. Every extra plugin used for popups adds weight to your site. If you achieve the same result with a standard element the browser already understands, your site becomes lighter and faster. A faster site means better rankings and more visitors who do not leave before the page finishes loading.
If you want an estimate of what a faster, better-built site could mean for your business, you can get a rough idea using our calculator.
2. Accessibility, which is becoming a legal requirement
Website accessibility is no longer just a nice bonus. For an increasing number of businesses in the EU, it is becoming a legal requirement. Properly built popups that work with a keyboard and screen readers are a key part of an accessible website. The `<dialog>` element helps with this, since it delivers much of that accessibility automatically, whereas it previously had to be painstakingly coded by hand.
3. Conversions and trust
A popup is often the point where a visitor becomes a customer. Newsletter signup, order confirmation, a request for a quote. If the window works smoothly, opens and closes quickly, and behaves the same way on a computer and a phone, the user senses that the site is well built and trustworthy. If the window gets stuck, does not close, or hides content, the user leaves. Every lost user is a lost opportunity.
4. Lower maintenance costs
Fewer external plugins means fewer things that can break during updates. This is especially important for sites built on platforms where plugins tend to clash with each other. The more your site relies on standard, built-in solutions, the fewer "something's not working" calls you will have to deal with a year or two down the line.
Practical tips and consequences
You do not need to become a developer to judge whether the popups on your site are well built. Here are a few things you can check yourself or request from your web developer.
Test your own site
- Open any popup on your site.
- Try closing it with the Escape key. Does it work?
- Try navigating with the Tab key. Does focus stay inside the window, or does it escape into the background?
- Repeat all of this on a mobile phone. Is the close button visible and large enough to tap with a finger?
If any of this does not work, you have an opportunity for improvement that directly affects your customers.
What to ask of your web developer
- Popups should be based on standard web solutions, not heavy external plugins where they are not needed.
- Every window must be accessible by keyboard and work on all devices.
- The background must dim and stop scrolling while the window is open.
- The window's design must be consistent with your brand, not generic.
Where the trap lies
The `<dialog>` element is a powerful tool, but it needs to be styled and configured correctly. CSS-Tricks specifically pointed out in its article that there are many details and nuances involved in using and styling this element. This means that a poorly implemented `<dialog>` can bring the same problems as the old approaches. The key is not which technology you use, but how carefully it is implemented.
This is exactly where it pays off to work with someone who knows these details. If you want your popups and your entire site to work flawlessly on every device, you can get in touch with us and we can look together at where the opportunities are.
How Carpolab approaches this
At Carpolab, we build sites to be fast, accessible, and durable. This means we use standard, built-in web solutions wherever they deliver a faster and more stable site, instead of loading up heavy add-ons for every small feature. Popups are a great example: when built correctly, your site works better on every device, loads faster, and does not drive visitors away.
The goal is not technical polish for its own sake. The goal is for your site to bring in more inquiries, orders, and trust, while costing you less in maintenance over the years.
Frequently Asked Questions (FAQ)
Do I have to pay for a special plugin for popups on my site?
Not necessarily. Modern browsers support built-in solutions for popups that work without heavy external add-ons. This often means a faster site and lower maintenance costs. Whether a plugin makes sense depends on your specific needs, but it is no longer a given.
How do I know if my popups are accessible?
The easiest quick test is to try closing the window with the Escape key and navigating through it with the Tab key. If focus escapes into the background or you cannot close the window without a mouse, accessibility is probably not properly handled. For a thorough review, it is best to have your site assessed by a professional.
Do poorly built popups really affect Google rankings?
Indirectly, yes. Google takes into account site speed, stability, and user experience. Heavy, slow, and disruptive popups worsen these factors, which can affect rankings and, more importantly, whether visitors stay or leave.
Conclusion
The `<dialog>` element is a good example of how a seemingly small technical choice affects the speed, accessibility, and reputation of your website. As a business owner, it does not matter that you know the code, but that you understand that popups too are part of whether your site feels professional or not. If you want your website to work smoothly on every device and bring in more customers, we at Carpolab are here to make sure it is done right.
Vir: CSS-Tricks