Tame Web Pages With Safari Distraction Control

The new Distraction Control feature of Safari in Sequoia, iOS 18 and iPadOS 18 allows you to remove items from a web page you are viewing.

You can also watch this video at YouTube (but with ads).

Video Transcript: Gary here from MacMost. Let me show you how you can hide distracting items in Safari. 
Starting with macOS Sequoia and iOS 18 you can get rid of distracting items on webpages in Safari. For instance here I am in macOS Sequoia and I'm viewing a page and there are a lot of distracting items here on this page. Lots of ads, navigation elements, things like that. I can get rid of those by looking for this item up her which shows you all the viewing options. You'll find a lot of different things here even summaries of the webpage. 
One of the things you'll find is Hide Distracting Items. Click that and you enter into a mode where you see up here, Click An Item to Hide, a Cancel, and Done button. Now you can click any item, like this ad here, and it will go away. Even does this really cool effect. You can do that for any item on a page. Notice how when I move my pointer over various items I see this blue box around them. So I can get rid of items just by clicking on those boxes. You can see they leave holes. But sometimes also collapse the page to take up the space. When I've hidden the items that I want I can click Done. Clicking Cancel would have just returned the items there. 
Now that I'm on a page where I've hidden items I see this little eye with a line through it here in the Address Bar. So I know that I've got hidden items there. This is actually just part of this button which is now larger. So I can click on it and I get all the Controls here including Show Hidden Items which will restore the ones that I have removed or Hide Distracting Items which will allow me to resume hiding even more items. 
Another item here is Report Distraction Control Issue, which will then allow you to report, if say, the page doesn't behave correctly after you remove items. This will help Apple fine tune this feature in the future. 
Now the iPhone it works in a similar way. If you're at a page like this one and you see some items that you want to get rid of you can click on the same button there in the Address Bar and then choose Hide Distracting Items. Then you'll see that same blue box over things. You can click on those and then they do that same cool animation to get rid of them and then when you're done you can click Done. There's a cancel button over here as well. You'll see that same little eye with a line through it icon there. You can go back in and Hide more or Show the Items that you've hidden. There's the Report Menu item there too. 
It works the same way on iPad OS18 as well. 
By the way if you find these videos valuable consider joining the more than 2000 others that support MacMost at Patreon. You get exclusive content, course discounts, and more. You can read about it right here. 
Now there's some details here. One is that items that you get rid of should stay hidden even if you reload the page. So let's give this a try here. I'll reload this page and I can see that the items are hidden but now there's a blank space. So this could be something that Apple fixes in the future. It could also have to do with how this particular page is put together. It could be that this space allocated after Safari already tells the item not to display. Either way it is not that bad to have a white space here. But notice how after a little bit a new ad appears. Why does this happen? Well, most likely it is because this is an actual different element than the previous one, the one we got rid of. Think of that first one as Ad 1 and then this is Ad 2. Ad 2 we didn't tell to get rid of so we see it when it loads that second ad and Ad 3, and Ad 4, and all of that. But the item here to the right side probably is like an item called Right Sidebar or something and even if the ads inside that are changing they'll still be invisible. 
Now sometimes it will work across pages on the same website. If this Right Sidebar is the same across all different webpages then we may find we never see it now on this website. In fact if we go to an article here and we look up here we can see that it still thinks that some items here are hidden. But we can see that on this site there's a different sidebar with different ads that appear here on the right. 
So whether hiding distracting items hides them for the whole site or just that page really depends on how the site is constructed. So it is really just a feature that does the best it can with the information it has. Apple describes this on its Help page as: if other pages on the same website use the same items in the same way they are hidden on those pages as well. 
So what are some uses for this. One use is a simple accessibility or readability issue. Some people may have trouble digesting the information on a page if there are flashing or distracting elements and being able to eliminate them from the page, even if it just leaves a blank space, will make the content easier to read. 
Another issue you may come across is sometimes webpages are poorly constructed. Sometimes they are elements that cover things that you're trying to read. If this happens you can use this feature to get rid of those items covering other things. 
Now also if you need to take a screenshot of a website, maybe even it's your own website, but there are typically ads on it you can use this feature to get rid of those items for a nicer screenshot. The same thing for doing recordings. 
This is also true for making Presentations. This, of course, is very useful to me. If I'm doing a tutorial I can get rid of some ads or other items on websites so I can show certain functionality without that distraction. 
The same thing if you're making a presentation in a class or a meeting, even online on Zoom or whatever you can go in ahead of time, get rid of those distracting items and then when you show the page you're not kind of embarrassed by which ad shows up. 
But, of course, everybody immediately thinks of this as a way to block ads. But it is really not effective that way. First of all you have to see the ad to block it. At that point you probably paid more attention to the ad than you would by just ignoring it. Plus, of course, hundreds different websites rotate ads. Meaning that you'll block Ad 1 but that Ad 2 will rotate in after thirty seconds and you would have to block that and continue to block some. Then the next time you go back to the page it may show you Ad 37 and it won't actually get rid of that. You have to block that. So it is really that effective as an ad blocker. 
I should add that Reader View is probably still the best way to actually digest an article, like this one. If I just go in here and instead of Hide Distracting Items I use Show Reader then I get this, which a lot of times could be much better. Sometimes there may be other elements, like images and graphics and such that you want to see that are part of the content that using Reader View hides. So Hide Distracting Items may work better in some cases. It really depends on which site and which page on that site you're at. 
Two other notes. Apple warns that if you're using a Content Blocker like an Ad Blocker, it may conflict with Distracting Items. Also if you clear your Browser History or website data it should also clear all of these Distracting item flags. In general website code is dynamic enough and it is changing all the time. I would never expect to go to a webpage on a site, Hide Some Distracting Items, and that would be permanent for all of the different pages that you have on that site. I would do it just as a one-time thing while you're viewing that page right there. Not have any particular expectation that you've permanently changed how you are viewing that webpage or site into the future. 
So it is definitely worthwhile technique to know about as long as you have reasonable expectations for it. It is also pretty satisfying to see that animation especially if the item is  particularly annoying. Hope you found this useful. Thanks for watching.

Comments: 9 Responses to “Tame Web Pages With Safari Distraction Control”

lauren

2 months ago

thank you for this!!!!

Sheldon

Thanks bunches

Zach

Gary, is there a way to setup a keyboard shortcut or hotkey to enter Hide Distracting Items mode?

Gary Rosenzweig

Zach: No, it looks like you need to click the button. Makes sense because you definitely need to click to select areas, so there's no keyboard-only way to do it anyway.

Maclicious

It seems that unlike an ad blocker, the website still thinks that it is delivering the ad to you, so you do not seem to get annoying pop-ups asking you to turn off your ad blocker.

Keith Swango

Gary, maybe I missed something, but I have Sequoia and I don't see that distraction icon. All I have is an "x". Can you help me with that?

Keith: Perhaps you have the Compact tabs feature turned on. If so, the button appears to the right side of the address./search field. Same button, just on the right instead of the left.

Arnie Keller

It seems a lot faster just to click on reader view.

Arnie: Except that sometimes Reader View doesn't display all of the information, and then you are missing other elements on the page that could be useful.

Tame Web Pages With Safari Distraction Control

Comments: 9 Responses to “Tame Web Pages With Safari Distraction Control”

Leave a New Comment Related to "Tame Web Pages With Safari Distraction Control"

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information