TIL about opening windows

Quotes from:
Jakob Nielsen, Top 10 Mistakes in Web Design, 2011 https://www.nngroup.com/articles/top-10-mistakes-web-design/
Web Content Accessibility Guidelines (WCAG) 2.1 https://www.w3.org/TR/WCAG21/#dfn-change-of-context
Adrian Roselli, Link Targets and 3.2.5 https://adrianroselli.com/2020/02/link-targets-and-3-2-5.html

Thread on Twitter;
https://twitter.com/g16n/status/1373210358626856960
https://twitter.com/LeonieWatson/status/1373336934169382913
https://twitter.com/g16n/status/1373592307111444484
https://twitter.com/LeonieWatson/status/1373907529638539265
https://twitter.com/g16n/status/1373927978929885187
https://twitter.com/MarcoInEnglish/status/1373928542912806912
https://twitter.com/LeonieWatson/status/1373965658141159427

Transcript

1. TIL about opening windows Photo by Adrien Siami on Unsplash
2. <a href="…" target="_blank" rel="noopener">
3. Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks. — Jakob Nielsen, Top 10 Mistakes in Web Design, 2011 “
4. changes of context major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously Opening a new window, moving focus to a different component, going to a new page (including anything that would look to a user as if they had moved to a new page) or significantly re-arranging the content of a page are examples of changes of context. — Web Content Accessibility Guidelines (WCAG) 2.1 “
5. Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text. — Adrian Roselli, Link Targets and 3.2.5 “
6. [target="_blank"]!"after { content: " (opens in new window or tab)"; } In his article Link Targets and 3.2.5 (opens in a new window or tab) Adrian Roselli states “do not arbitrarily open links in a new window or tab.”
7. [target="_blank"]!"after { content: " (opens in new window or tab)"; }
8. [target="_blank"]!"after { content: " (opens in new window or tab)"; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
9. <p id="message-target-blank" hidden=""> opens in new window or tab !$p> <a href="…" target="_blank" rel="noopener" aria describedby="message-target-blank"> ⋮
13. Photo by Vino Li on Unsplash TIL about opening windows