Amber Hinds

Steve Jones

Road Warrior Creative

Equalize Digital

<p>Web Content Accessibility Guidelines (WCAG) Success Criterion 3.2 (Predictable) specifies that web pages should appear and operate in predictable ways. It is a common practice to set links that go to off-site locations to open in a new window or tab when clicked. Opening new windows or tabs automatically when a link is activated can be disorienting for people who have difficulty perceiving visual content, and for some people with cognitive disabilities, if they are not warned in advance.</p>
<p>This plugin helps websites become more accessible and better meet WCAG guidelines for predicability by providing advanced warning if a link is going to open a new window or tab before the user clicks or activates it. Providing a warning allows the user to decide it they want to leave the current window, and the warning will help them find their way back, if they do decide they would like to go to the new window. It will help them understand that the “back” button will not work and that they have to return to the last window they had open, in order to find their previous location.</p>
<p>There are no settings in this plugin. Simply activate it and it will automatically find all links that open in a new window and add the following three fixes to each link:<br />
1. A new window icon after the link text to denote that the link opens in a new window for sighted people.<br />
2. A tooltip, visible on hover, that says “opens a new window.”<br />
3. “Opens a new window” screen reader text that will be read out to blind or visually impaired people using screen readers immediately following the link anchor text.</p>
<p>Please note: new window warnings will be added to links and links that have been styled to look like buttons, including social media sharing and link icons. Depending upon what third party plugins are adding links to your site that open in new windows, some CSS styling may be required.</p>
<p>In addition to adding warnings for your users, this plugin integrates with the <strong><a href="https://wordpress.org/plugins/accessibility-checker/" rel="ugc">Accessibility Checker plugin</a></strong>; when Accessibility New Window Warnings is activated, it will automatically clear all “<a href="https://equalizedigital.com/accessibility-checker/link-opens-new-window-or-tab/" rel="nofollow ugc">Link Opens New Window or Tab</a>” warnings in Accessibility Checker scans of your website. Installing and activating this plugin is a great way to quickly remediate and remove a lot of open issues across you entire website.</p>
<p>The Accessibility New Window Warnings plugin is inspired by <a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html" rel="nofollow ugc">Techniques for WCAG 2.0 G201: Giving users advanced warning when opening a new window</a>.</p>
<h3>Localization</h3>
<p>The Accessibility New Window Warnings plugin is ready for localization. We have added a Spanish translation and are open to more translations!</p>
<p>If you would like to contribute a translation to this plugin, please <a href="https://equalizedigital.com/contact/" rel="nofollow ugc">contact us</a> or <a href="https://github.com/equalizedigital/accessibility-new-window-warnings" rel="nofollow ugc">fork the repository on GitHub</a>.</p>


Accessibility New Window Warnings

Install, activate, DONE! I love how simply this plugin fixes a real problem! This goes right into my starter site and on every website I build from here on out!

Simple solution for an important problem


I installed this on my blog as I wanted to ensure there was a visible indication when links opened external pages to better comply with accessibility guidelines without having to go through hundreds of old posts. Did the job and correctly and easily and automaticaly added the desired indicators, markup and icons.


Does the job intended

Make links that open in a new window compliant with WCAG guidelines for accessibility by adding a warning for users.

PI Web Solution

Steve Curtis

Joseph LoPreste

<p>This software HELPS you in the process of becoming ADA Section 508 compliant by providing:</p>
<h3>Missing Alt Text Finder</h3>
<p>Easily add any Missing Alt Text, Description Text or Caption Text to all of the pictures in your Media Library and the pictures that are already published on your Pages and Posts.</p>
<h3>Contrast Ratio Checker</h3>
<p>Provides you with a Contrast Ratio Checker to make sure everything hits the minimum requirements.</p>
<h3>WCAG 3.0 Compliance Checklist</h3>
<p>A interactive WCAG 3.0 Section 508 Checklist that helps you better understand your websites accessibility issues.</p>
<h3>Automated Accessibility Audit</h3>
<p>You can activate the A11Y auditing function and run multiple accessibility tests on your website and even get suggestions on how to fix them.</p>
<h3>Resources</h3>
<p>We give you some great resources in the form of links that will help you better understand web accessibility and help your website become even more inclusive.</p>
<h3>Course Related Functionality</h3>
<p>Access comprehensive accessibility training courses and educational materials directly within the plugin. Learn best practices, understand WCAG guidelines, and master accessibility implementation through interactive courses designed to help you and your team become accessibility experts.</p>
<p>While this plugin can HELP you meet compliance requirements, you are the only one that can ensure that all requirements are met.</p>
<p>If you find this plugin useful, please rate and review it. If you have a problem with this plugin, please send me an email letting us know what issues you are having. I will address all issues in a timely fashion. Thank you!</p>
<h3>External Services</h3>
<p>This plugin uses the following third-party services:</p>
<ol>
<li><strong>Incrementable.js</strong><br />
Used in the contrast testing tool to allow keyboard-accessible incrementable fields.  </li>
</ol>
<p>– Loaded from: <code>https://leaverou.github.com/incrementable/incrementable.js</code><br />
– No user data is sent.<br />
– License: MIT License<br />
– Source: <a href="https://github.com/LeaVerou/incrementable" rel="nofollow ugc">https://github.com/LeaVerou/incrementable</a></p>
<ol>
<li><strong>Example API (Replace with actual endpoint)</strong><br />
Used to send page URLs to an external server for SEO auditing (if applicable).  </li>
</ol>
<p>– Endpoint: <code>http://myserver.com/</code><br />
– Data sent: page URL<br />
– Sent only during SEO analysis execution.<br />
– If you operate this server, link your own Privacy Policy here.<br />
  Example: <a href="https://yourdomain.com/privacy-policy" rel="nofollow ugc">https://yourdomain.com/privacy-policy</a></p>
<h3>Main Features Are:</h3>
<ol>
<li>
<p>Shows you all of the pictures from either your Media Library, Posts or Pages that are missing any of the 3 types of text. (Alternative Text, Description text or Caption Text)</p>
</li>
<li>
<p>Allows you to add any missing – Alternative Text, Description Text or Caption Text to any of your pictures one at a time.</p>
</li>
<li>
<p>Allows you to add missing Alternative Text, Description Text or Caption Text to all of your pictures with just one click.</p>
</li>
<li>
<p>Helps the process of making your website ADA Section 508 Compliant become much easier. (by adding Alt Text to all pictures on your website)</p>
</li>
<li>
<p>Allows you to run a Automated A11Y Accessibility Audit so you can see where you are not compliant.</p>
</li>
<li>
<p>Provides a free Contrast Ratio Checker. This allows you to easily understand your websites contrast ratios.</p>
</li>
<li>
<p>We provide you a interactive (WCAG 3.0) Section 508 Checklist. This checklist helps you better understand the WCAG 3.0 recommendations and guidelines.</p>
</li>
<li>
<p>We offer a ton of Free Accessibility resources in the form of links that will greatly help your understanding of web accessibility.</p>
</li>
<li>
<p>Access comprehensive accessibility training courses and educational materials to learn best practices and master accessibility implementation.</p>
</li>
</ol>
<h3>The video below is how to use our missing alt text feature.</h3>
<h3>The video below is part 2 on how to use all of the new accessibility tools we added.</h3>
<h3>The video below is us giving our “Web Accessibility Made Easy” talk in Tampa Fl.</h3>
<h3>Source Code</h3>
<p>This plugin includes bundled/minified JavaScript and CSS files to optimize performance. To comply with WordPress.org guidelines for human-readable code, the original, non-minified source code is included directly within the plugin under:</p>
<pre><code>/assets/src/ or `/src/`
</code></pre>
<p>This includes:<br />
– Original JavaScript files before minification or bundling.<br />
– SASS/SCSS or uncompiled CSS files (if applicable).<br />
– Any build configuration files (such as webpack.config.js or angular.json if used).</p>
<p>These files are provided to ensure transparency and promote open-source collaboration.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later. For more information, see <a href="https://www.gnu.org/licenses/gpl-3.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-3.0.html</a>.</p>


Accessibility Tools & Alt Text Finder

Accessibility Tools Included: Missing Alt text finder, contrast checker, WCAG 3.0 checklist, automated testing software and a ton of free resources.

Accessibility New Window Warnings vs Accessibility Tools & Alt Text Finder