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
   

   View Slide

2. 
   

   View Slide

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
   “
   

   View Slide

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
   “
   

   View Slide

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
   “
   

   View Slide

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.”
   

   View Slide

7. [target="_blank"]!"after {
   content: " (opens in new window or tab)";
   }
   

   View Slide

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;
   }
   

   View Slide

9. 
   opens in new window or tab
   !$p>
   aria describedby="message-target-blank">
   ⋮
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. Photo by Vino Li on Unsplash
    TIL
    about opening windows
    

    View Slide