michaelb4g

This free plugin is intended to help you make your website more accessible.
It is responsive and works on desktop computers & mobile devices
You can dock the accessibility panel to any of the 4 sides in desktops and to 2 sides in mobile devices
The accessibility panel opens from an toggle icon that can be set to any of the 4 corners from the admin option panel
All the icons have a keyboard shortcut so you can control the accessibility from the keyboard even with the accessibility panel hidden 
If you know any other language beside English and want to help translating the icons names to other languages please leave me a message with your email
LEGAL DISCLAIMER: 
This plugin does not guarantee that your website will comply with any regulations. 
You can download it and install it at your own risk. 
All information has been obtained from sources, which are believed to be reliable, but accuracy and thoroughness cannot be guaranteed. Readers are solely responsible for how they use this plugin and for their results.
<h3>WordPress Admin Options</h3>
WordPress Admin Options (under WordPress Control Panel->Plugins->cool-accessibility): 
Cool Accessibilty Declaration & Icon Screen position Settings 
1. Accessibilty Declaration Page Slug (URL ) 
default page slug: site_url/website-accessibility-declaration 
(Accessibilty Declaration example at the end of this file) 
if you have multiple languages and you are using the Polylang plugin, cool-accessibility plugin will pick the parallel page in the current language
<ol>
<li>
Accessability Icon position: 
Bottom-right (default) 
Bottom-left 
Top-right 
Top-left
</li>
<li>
Skip menu settings
</li>
<li>
Highlight link color override
</li>
<li>
Highlight title background color override
</li>
</ol>
<h3>Advance settings for website developers</h3>
FONT SIZE:
<h3></h3>
changing the font size intenially doesn’t affect the tag
HIGHLIGHT_LINKS:
<h3></h3>
toggles the class ‘coolaxs_highlight_links’ in all the header tags ( “:focusable,a” )
HIGHLIGHT_TITLES:
<h3></h3>
toggles the class “coolaxs_highlight_titles_colors” in all the header tags (‘h1,h2,h3,h4,h5,h6’)
READABLE_FONT:
<h3></h3>
toggles the class “coolaxs_readable_font”
Keyboard Navigation (Tab / shift Tab icon)
<h3></h3>
if you want to change things in css – this icon adds the folowing class: 
 coolaxs_focus_css_activated
Keyboard Navigation Skip Menu:
<h3></h3>
the “skip to page content” message with fixed position is added to the top of the page 
with a css z-index:99 (because the zoom-text magnify glass of the cool-accessibility plug-in should be on top of that) 
 if there is a
<
nav> tag in the page
so this means that if there is a fixed header on the top of the page its z-index should be less than 99
PREVENT ANIMATION:
<h3></h3>
1. 
 // the following suffix should be at every animated gif or static so javascript could toggle between them automatically 
 var str_normal_image = “_static.gif”; 
 var str_animated_gif_image = “_animated.gif”;
2.
the plug in also toggles between these 2 embeded video autoplay modes 
so the video will not autoplay upon page load
embeded video
<
iframe src=”…?autoplay=1″> 
embeded video
<
iframe src=”…?autoplay=0″>
3. 
if there is an automatic loop flexslider it stops it:
BRIGHT / DARK CONTRAST
<h3></h3>
1. 
the plug in adds the following classes so you can further modify your css file: 
coolaxs_bright_contrast 
coolaxs_dark_contrast
2. 
there is also an automatic image / background image flipping mode if you prefer by the suffix of the image name
2a. 
if you have 3 images – 1 for normal contrast 2. for dark contrast 3. for bright contrast
add to your normal contrast image / background image the following suffix: “_normal_to_both” 
so your image name becomes: 
 imagename_normal_to_both.jpg 
 (or imagename_normal_to_both.png or imagename_normal_to_both.gif)
and provide in the same directory 2 more images (assuming a jpg image type) 
imagename_bright_contrast.jpg 
imagename_dark_contrast.jpg
2b. 
if you have only 2 images – 1 for normal contrast 2. for dark contrast 
and for bright contrast you use the normal contrast image 
then modify your original image / background image to this: 
imagename_normal_to_dark.jpg 
 (or imagename_normal_to_dark.png or imagename_normal_to_dark.gif)
and provide in the same directory 1 more image (assuming a jpg image type) 
imagename_dark_contrast.jpg
2c. 
if you have only 2 images – 1 for normal contrast 2. for bright contrast 
and for dark contrast you use the normal contrast image 
then modify your original image / background image to this: 
imagename_normal_to_bright.jpg 
 (or imagename_normal_to_bright.png or imagename_normal_to_bright.gif)
and provide in the same directory 1 more image (assuming a jpg image type) 
imagename_bright_contrast.jpg
List of all added JavaScript classes
<h3></h3>
This is the list of all the classes that the Javascript file adds/toggles so you can modify your CSS file if you want to custom your site to this plugin: 
 $html.addClass(‘coolaxs_mobile’); 
 $html.addClass(‘coolaxs_mobile_landscape’); 
$(‘#coolaxs_letter_spacing_group’).addClass(‘coolaxs_acivated_button’);// to all the cool accessibility plugin buttons
<pre><code> $( ":focusable,a" ).addClass('coolaxs_highlight_links');
 $( 'h1,h2,h3,h4,h5,h6' ).each(function(i, val){ $(val).addClass( "coolaxs_highlight_titles_colors" ); });
 $(val).addClass( "coolaxs_bright_contrast" ); if ( coolaxs_hasBkgcolor(val) ) $(val).addClass( "coolaxs_bright_contrast_bkg_color" );
 $(val).addClass( "coolaxs_dark_contrast" ); if ( coolaxs_hasBkgcolor(val) ) $(val).addClass( "coolaxs_dark_contrast_bkg_color" ); 
 $("html").addClass("coolaxs_prevent_animations");
 $("*,body,a,span,li *").addClass( "coolaxs_readable_font" ); 
 $("*").not(':focusable,a,span').addClass( "coolaxs_big_white_cursor" ); 
 $("*").not(':focusable,a,span').addClass( "coolaxs_big_black_cursor" ); 
 $('body').addClass('coolaxs_focus_css_activated');// keyboard navigation
 $('body').addClass('COOL_ACCESSIBILITY_right_accessibility_panel');
 $('body').addClass('COOL_ACCESSIBILITY_left_accessibility_panel');
 $('body').addClass('COOL_ACCESSIBILITY_bottom_accessibility_panel');
 $('body').addClass('COOL_ACCESSIBILITY_top_accessibility_panel');
</code></pre>
Accessibility declaration example
<h3></h3>
#### attaches great importance to providing a high quality, professional and accessible service to all residents, including those with disabilities.
Measures are being carried out in order to make this website accessible.
Accessibility adjustments were made based on the recommendations for Intenet Contents at AA rating.
Browsers support:
This website support popular browsers such as: 
Mozila Firefox, Google Chrome 
Questions about accessibility:
For questions or suggestions regarding accessibility you may send an email to ##########
Email to: ###@#####
Telephone: ########## 
Accessibility adjustments that were made:
In order to meet the accessibility requirements, several adjustments were made to the site:
<pre><code>
</code></pre>
For your knowledge :
The site uses the ?local storage? entries option in the browser to maintain the menu preferences settings and the accessibility of the pages of the site. 
This ?local storage? is not sent back to the server and therefore does not provide any information about your browsing. 
These ?local storage? entries are deleted when you delete cookies ? and you can set any browser to delete all cookies upon closing the browser 
Or alternatively if you want the accessibility menu preferences to be preserved ? do not delete the cookies files
Thank you and happy surfing.

Cool Accessibility

Accessibility plugin - Make the site easier to read and navigate

WPPOOL

azizultex

wpdarkmode

shahreyar46

Jafran Hasan

CREATE A COMPELLING DARK MODE VERSION OF YOUR WEBSITE ✨
Create a dark mode version of your website without any complicated setup. Activate the plugin and your site visitors will experience a dark mode or light mode version of your website as per their preferred operating system preference. This is a reliable dark mode plugin for WordPress, designed to make setup simple.
Let’s grow, connect, and thrive together!
<ul>
<li>🤝 Join Our <a href="https://cutt.ly/ceCQgvoT" rel="nofollow ugc">Facebook Community</a></li>
<li>🌐 Follow Us on <a href="https://x.com/WPDarkMode" rel="nofollow ugc">X (Twitter)</a></li>
<li>🎥 Subscribe on <a href="https://www.youtube.com/@WPPOOL" rel="nofollow ugc">YouTube</a></li>
<li>👍 Like Our <a href="https://www.facebook.com/wppool.dev" rel="nofollow ugc">Facebook Page</a></li>
</ul>
Check what popular WordPress expert Matt (WPress Doctor) thinks about WP Dark Mode.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/CT8yy2v05tE?version=3&rel=0&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
👁️ <a href="https://go.wppool.dev/fuUK" rel="nofollow ugc">View Demo</a> | 🚀 <a href="https://wppool.dev/wp-dark-mode-pricing/?utm_source=readme&utm_medium=org_readme&utm_campaign=wp-dark-mode" rel="nofollow ugc">Get Ultimate</a> | 🤝 <a href="https://cutt.ly/ceCQgvoT" rel="nofollow ugc">Join Our Facebook Community</a>
<h3>🔝 WP DARK MODE FEATURES</h3>
<ul>
<li>Floating Dark Mode Switch – Display a floating switch in the footer of your website. The switch lets your site visitors easily toggle between different modes.</li>
<li>Default Dark Mode – Make it the default mode of your website. Users will experience it first after entering your website.</li>
<li>Elementor Widget Support – Place the mode switch on any page/post using the Elementor widget.</li>
<li>Gutenberg Block Support – Place the mode toggle on any page/post using the Gutenberg block.</li>
<li>Apply Light or Dark Theme Based on OS Setting – Detect an user’s device theme and automatically enable preferred mode for your visitors to ensure a seamless website experience.</li>
<li>Admin Panel Dark Mode – Enable dark mode on the WordPress admin panel/dashboard. Give your eyes a much-needed rest while working long hours by enabling it.</li>
<li>Dark Mode Color Presets – 2 exclusive color presets are available to quickly change the color from the predefined preset. Give your website a brand new look and feel by changing the preset. </li>
<li>Remember User Preference – Enable the plugin to remember users’ choices and automatically enable preferred mode for visitors who used it before.</li>
<li>Shortcode Support – Take advantage of the [wp_dark_mode_switch] shortcode to display the switch anywhere on your website.</li>
<li>Low Image Brightness – Decrease the brightness and contrast of images in the dark.</li>
<li>Accessibility Features – Toggle your preferred mode by using a keyboard shortcut (Ctrl + Alt + D) or using a URL/domain parameter.</li>
<li>Toggle Animation – Choose the animation effect between dark/white theme with numerous options including Fade In, Pulse, Flip and many more.</li>
<li>Social Share Buttons – Social share icons allow your website visitors to share your content with ease. With plenty of cool social media icon templates and share count displays, this plugin supports dedicated social share buttons.</li>
<li>Caching Exclusion Option – Enable this feature to exclude WP Dark Mode from server-side caching and ensure a seamless mode transition.</li>
<li>Device-wise Toggle – Easily choose where to display the mode switch: Desktop, Mobile or Tablet.</li>
<li>Dark Mode Analytics – Track how many times site visitors have used dark theme in a certain period from the analytics menu and your WordPress admin dashboard.</li>
<li>Custom CSS Support – With custom CSS, you can perfect the best mode version of your website. Customize specific sections/elements exactly how you want.</li>
</ul>
<h3>⚡ GO BEYOND WITH WP DARK MODE ULTIMATE</h3>
<ul>
<li>Schedule Dark Mode – Schedule a time for enabling it on your website and take full control over your website’s appearance.</li>
<li>Access 21 Floating Switch Styles – Get access to 21 beautiful dark mode switch styles. Choose your preferred switch button for the users to toggle.</li>
<li>Customize Floating Switch Placement – Customize the placement of the mode switch. You can place it anywhere on your website.</li>
<li>Time Delay Trigger for Floating Switches – Now you can set a time delay before the floating switch appears, giving visitors time to explore your site before the toggle shows up.</li>
<li>Auto-Hide Switch with Timeout – Automatically hide the floating switch after a specified timeout, keeping your UI clean while still offering your preferred mode accessibility.</li>
<li>Premium Color Presets – 13 exclusive ready-made color presets are available to quickly change the mode color from the predefined presets.</li>
<li>Preset Color Customization – Tailor your experience to perfection. Choose a preset and customize the color of every element, starting from the body and text to links, input fields, buttons and even the scrollbar – exactly the way you want.</li>
<li>Create Custom Color Preset – Create and customize your color presets. Dive into a palette of possibilities, shaping colors for every element – from the body to text and scrollbar.</li>
<li>Automatic Dark Mode Based on Sunset – Automatically enable the dark theme based on your visitor’s time.</li>
<li>Multiple Switch Options – Toggle between different mode switch options. Whether you need a menu switch, a floating switch, or a content switch for your posts/page, the power is on your end. Get a distinct switch style for every section.</li>
<li>Custom Switch Support with Call-to-Action Customization – Upload a custom switch of your own choice and customize call-to-action text on your mode switch.</li>
<li>Mode-Based Image Replacement – Replace light-mode images with the different images you want in the dark theme. </li>
<li>Mode-Based Video Replacement – If your website has videos, you can replace them with something more fitting for a dark theme. </li>
<li>Adjust Brightness Level & Apply Grayscale Effect – Adjust your images and video’s brightness level while dark theme is enabled to get an immersive content viewing experience. You can also add a grayscale effect to your images/videos.</li>
<li>Exclude Preferred Mode on Certain Pages/Elements – Exclude specific pages/elements from changing into a dark theme.</li>
<li>Include Preferred Mode on Selected Posts & Pages – Exclude all the pages and posts on your website from your selected mode except the specific ones where you want it.</li>
<li>Exclude Post Tags & Categories – Exclude all the post tags from dark mode. Keep only the specific tags whitelisted.</li>
<li>Include Preferred Mode on Custom Post Types – You can also enable your preferred mode only for specific post types, excluding all.</li>
<li>Exclude WooCommerce Products & Categories – Exclude all the products and categories on your WooCommerce site from dark mode except the specific ones.</li>
<li>Dark Mode Switch in Website Menu – You can display the switch as a menu item on any menu on your website.</li>
<li>Font Size Toggle for Better Accessibility – Make your site more accessible by resizing your font size (increase/decrease).</li>
<li>Plenty of Performance Options – This plugin comes with multiple performance settings, putting complete control at your fingertips. By using these features, you can improve page loading performance and track dynamic content.</li>
<li>Choose Mode Behavior – You can choose between loading preferred mode or website content first by selecting these options.</li>
<li>Scheduled Email Reporting on Dark Mode Usage – Get daily/weekly reports via email on the analytics of your website.</li>
</ul>
👁️ <a href="https://go.wppool.dev/fuUK" rel="nofollow ugc">View Demo</a> | 🚀 <a href="https://wppool.dev/wp-dark-mode-pricing/?utm_source=readme&utm_medium=org_readme&utm_campaign=wp-dark-mode" rel="nofollow ugc">Get Ultimate</a> | 🤝 <a href="https://cutt.ly/ceCQgvoT" rel="nofollow ugc">Join Our Facebook Community</a>
<h3>🤔 Why Choose WP Dark Mode?</h3>
It is used by thousands of WordPress sites to enhance accessibility and reading comfort. It adds a dark theme toggle for both frontend and WordPress admin, improving accessibility and user experience. With increasing device-level dark mode adoption, providing this option can improve the browsing experience for many visitors. The widespread use of dark theme features across mobile and desktop platforms makes this compatibility beneficial for modern websites.
<h3>🔨 Page Builder Compatibility</h3>
WP Dark Mode works with popular page builders, including:
<ul>
<li>Gutenberg Block Editor </li>
<li>Elementor Page Builder </li>
<li>Divi Builder </li>
<li>Beaver Builder </li>
<li>Oxygen Builder </li>
<li>SiteOrigin </li>
<li>CornerStone </li>
<li>Themify Builder </li>
<li>MotoPress </li>
<li>LayersWP </li>
<li>WPBakery Page Builder </li>
<li>Spectra </li>
<li>Visual Composer </li>
<li>…and more </li>
<li><a href="https://wppool.dev/dark-mode-compatibility/" rel="nofollow ugc">Check the full list</a></li>
</ul>
<h3>🎨 Theme Compatibility</h3>
WP Dark Mode is optimized to work with thousands of WordPress themes, including the most popular ones:
<ul>
<li>Astra </li>
<li>Divi </li>
<li>Hello Elementor </li>
<li>Neve </li>
<li>Avada </li>
<li>Kadence </li>
<li>GeneratePress </li>
<li>OceanWP </li>
<li>Blocksy </li>
<li>Betheme </li>
<li>The7 </li>
<li>Flatsome </li>
<li>BuddyBoss </li>
<li>Hestia </li>
<li>Inspiro </li>
<li>Spacious </li>
<li>Responsive </li>
<li>Customizr </li>
<li>ColorMag </li>
<li>Phlox </li>
<li>Photograph </li>
<li>…and more </li>
<li><a href="https://wppool.dev/dark-mode-compatibility/" rel="nofollow ugc">Full theme list</a></li>
</ul>
<h3>↔ Slider Compatibility</h3>
WP Dark Mode is fully compatible with the most popular slider plugins:
<ul>
<li>Revolution Slider </li>
<li>Smart Slider 3 </li>
<li>Soliloquy Slider </li>
<li>…and more </li>
<li><a href="https://wppool.dev/dark-mode-compatibility/" rel="nofollow ugc">Full list</a></li>
</ul>
WP Dark Mode works across all operating systems including Windows, Android, iOS and macOS. No additional setups are required. It detects the user’s system theme preference and applies a matching dark theme to the site. You can also enable a toggle to switch between different modes manually.
<h3>🔥 More Awesome Plugins</h3>
If you like WP Dark Mode, then consider checking out our other awesome plugins:
<ul>
<li>
🟢 <a href="https://wordpress.org/plugins/sheets-to-wp-table-live-sync/" rel="ugc">Google Sheets to WP Table</a>: 
Try FlexTable – Sheets To WP Table Live Sync | Google Sheets allows you to input data on your Google sheet and show the same data on WordPress as a table effortlessly. Try Flex Table now!
</li>
<li>
🔄 <a href="https://wordpress.org/plugins/stock-sync-with-google-sheet-for-woocommerce/" rel="ugc">Manage WooCommerce Inventory from Google Sheets</a>: 
FlexStock – Stock Sync with Google Sheet for WooCommerce | Auto-sync WooCommerce products from Google Sheets. Flex Stock is an easy, powerful, and simple inventory management system to handle your WooCommerce products.
</li>
<li>
🛒 <a href="https://wordpress.org/plugins/order-sync-with-google-sheets-for-woocommerce/" rel="ugc">Manage Order with Google Sheets</a>: 
Try FlexOrder – Bulk Order Sync with Google Sheet for WooCommerce | Manage WooCommerce orders from Google Sheets. WooCommerce order sync, e-commerce order management, and sales order management with Google Sheets. Try Flex Order now!
</li>
<li>
💬 <a href="https://wordpress.org/plugins/social-contact-form/" rel="ugc">Form to Chat</a>: 
Try FormyChat | Connect Form to Chat Apps with Contact Form 7, WPForms, Gravity Form | Welcome Popup & Multi-agent Live Chat
</li>
</ul>
<h3>Privacy Policy</h3>
WP Dark Mode uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements.
Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. We collect the data to ensure a great user experience for all our users.
Integrating Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case.
Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.
Additionally read the WPPOOL <a href="https://wppool.dev/privacy-policy/" rel="nofollow ugc">privacy policy</a>.
<h3>Special Thanks</h3>
This plugin includes a modified version of a script from Dark Reader, an open-source browser extension licensed under the MIT license. We thank the Dark Reader team for their contribution to the open-source community. For more information about Dark Reader and their licensing terms, please visit <a href="https://github.com/darkreader/darkreader" rel="nofollow ugc">https://github.com/darkreader/darkreader</a>.

WP Dark Mode – Improve Accessibility with AI Powered Dark Theme

Excellent

Very Good

Enable dark mode on WordPress without any coding. Improve site accessibility with a stunning dark theme that improves conversion.

Cool Accessibility vs WP Dark Mode – Improve Accessibility with AI Powered Dark Theme