Coders Support

/****** accessibe.com issue resolved with below codes ******/
============================================================

1. /**** Elements with button functionality should be tagged for assistive technology **/

Successful Elements
-------------------
<a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0" >Shop <b class="caret"></b></a>

2. /**** Buttons cannot be empty **/
------------------------------------

Successful Elements
-------------------
<a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0" >Shop <b class="caret"></b></a>
<input type="submit" value="f" name="subscribe" id="mc-embedded-subscribe" class="button" aria-label="button field" >

3. /**** Links cannot be empty **/
----------------------------------

Successful Elements
-------------------
<a href="/new-grill-owners/" >New Grill Owners</a>

<a href="/recipes/" tabindex="0" >Recipes</a>

4. /**** Links that open in new tabs/windows should be tagged for assistive technology **/
------------------------------------------------------------------------------------------

Successful Elements
-------------------
<a aria-label="Demo Guides - link opens in a new tab" href="demo.html" target="_blank" rel="noopener noreferrer"><img alt="amazingrib logo" src="amazingrib.png"></a>

5. /**** Interactive elements should be navigable using the keyboard **/
------------------------------------------------------------------------------------------

Successful Elements
-------------------

-------------
Exapmple 1:
-------------

<div class="l-shopLocal js-shopLocal" tabindex="0" role="Shop local Navigation">
  <div class="b-shopLocal js-shopLocal__trigger" tabindex="0">
    <div class="b-shopLocal__container container">
      <div class="b-shopLocal__title">
        Shop Local</div>
      <div class="b-shopLocal__dealers">See your nearest dealers</div>
    </div>
  </div>

<div class="container">
    <div class="b-dealersList js-shopLocal__list">
  <a class="b-dealersList__message -type_error js-findDealer" href="/find-a-dealer/">Search Your Location</a>
<div class="b-dealersList__item">
  <div class="b-dealersList__title">Company</div>
<div class="b-dealersList__info">
      <span class="icon-location"></span>
      S. KIRAYA ROAD</div>
    <div class="b-dealersList__info">
      <span class="icon-phone-outline"></span>
      Phone: <a href="tel:xxxxx">(xxx) xxxxxx</a></div>
  <a class="b-dealersList__link" href="/" target="_blank">Open Map</a>
</div>
<div class="b-dealersList__item">
  <div class="b-dealersList__title">S. KIRAYA ROAD</div>
    <div class="b-dealersList__info">
      <span class="icon-location"></span>
      S. KIRAYA ROAD </div>
    <div class="b-dealersList__info">
      <span class="icon-phone-outline"></span>
      Phone: <a href="tel:xxxxxx">xxxxxx</a></div>
<a class="b-dealersList__link" href="/" target="_blank">Open Map</a>
</div>
    </div>
  </div>
</div>

------------------------------------------------------------------------------------------------
Example 2: (if you press tab with keyboard you see properly effect in screen using with added tabindex="0". you can modify any section of pages with add tabindex = "0" .)
--------------------------------------------------

<nav aria-label="Main Navigation" role="navigation">
      <ul id="primary-menu" class="nav navbar-nav megamenu">
        <li>
        <a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0">Menu 1 <b class="caret"></b></a>
        <ul class="dropdown-menu">
        <li>
            <a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false">Shop <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Shop Dropdown Menu 1</a></li>
                <li><a href="#">Shop Dropdown Menu 2</a></li>
            </ul>
        </li>
        <li><a href="#">Recipes</a></li>
        </ul>
        </li>
        <li><a href="#" tabindex="0">Menu 2</a></li>
        <li><a href="#" tabindex="0">Menu 3</a></li>
        <li><a href="#" tabindex="0">Menu 4</a></li>
</ul>
  </nav>

6. /**** Menus should be tagged for assistive technology **/
------------------------------------------------------------

Successful Elements
-------------------

7. /**** Menu dropdowns should be tagged for assistive technology **/
----------------------------------------------------------------------

Successful Elements
-------------------
<a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0" >Shop <b class="caret"></b></a>
<a class="dropdown-toggle" aria-haspopup="true" role="button" aria-expanded="false" tabindex="0" >Learn <b class="caret"></b></a>

8. /**** Every page should include hidden links that allow skipping blocks ******/

Successful Elements
-------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>
  
  <style>
    / Style the skip link to make it visually hidden /
    .skip-link {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

/ Style the skip link to be visible when focused (keyboard navigation) /
    .skip-link:focus {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
    }
  </style>
</head>
<body>

<div>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <a href="#main-menu" class="skip-link">Skip to main menu</a>
    <a href="#footer" class="skip-link">Skip to footer</a>
  </div>

</body>
</html>

<script>
const dropdownToggles = document.querySelectorAll('#primary-menu .dropdown-toggle');
dropdownToggles.forEach(element => {
element.setAttribute('aria-haspopup', 'true');
element.setAttribute('role', 'button');
element.setAttribute('aria-expanded', 'false');
});

const bgImage_inner = document.querySelectorAll('.warranty_header');
bgImage_inner.forEach(element => {
element.setAttribute('aria-label', 'Limited 3 Years Warranty');
element.setAttribute('role', 'img');
element.setAttribute('tabindex', '0');
});

const pagination_toggle = document.querySelectorAll('.vc_pagination-trigger');
pagination_toggle.forEach(element => {
element.setAttribute('aria-label', 'Paginataion Button');
});

const col_one_bg = document.querySelectorAll('div#pellets.vc_parallax .vc_btn3');
col_one_bg.forEach(element => {
element.setAttribute('aria-label', 'Learn More about Hardwood');
});

const main_rcpe = document.querySelectorAll('.main_receipe');
main_rcpe.forEach(element => {
element.setAttribute('aria-label', 'Lorem recipes for Every Occasion Graphic');
element.setAttribute('role', 'img');
element.setAttribute('tabindex', '0');
});

const upcmng_image = document.querySelectorAll('.upcoming_evnt');
upcmng_image.forEach(element => {
element.setAttribute('aria-label', 'Join the Lorem Nation Graphic');
element.setAttribute('role', 'img');
element.setAttribute('tabindex', '0');
});

const rcpp_bnr = document.querySelectorAll('.recipe-img');
rcpp_bnr.forEach(element => {
element.setAttribute('aria-label', 'recipe banner');
element.setAttribute('role', 'img');
element.setAttribute('tabindex', '0');
});
const chng_bnr = document.querySelectorAll('.changelog_banner');
chng_bnr.forEach(element => {
element.setAttribute('aria-label', 'Firmware Changelog banner');
element.setAttribute('role', 'img');
element.setAttribute('tabindex', '0');
});

// const recipeTitle = document.querySelector('.recipe-img h1.header').textContent;   
// const recipeImgDiv = document.querySelector('.recipe-img');    
// recipeImgDiv.setAttribute('aria-label', recipeTitle);
// recipeImgDiv.setAttribute('role', 'img');
// recipeImgDiv.setAttribute('tabindex', '0');

const desc_toggle = document.querySelectorAll('.wpb_wrapper.vc_figure a');
desc_toggle.forEach(element => {
element.setAttribute('role', 'link');
});

const home_column = document.querySelectorAll('.home_column_area3 a.vc_btn3');
home_column.forEach(element => {
element.setAttribute('target', '_self');
});

const home_pro_block = document.querySelectorAll('.product-block a.vc_btn3');
home_pro_block.forEach(element => {
element.setAttribute('target', '_self');
});

const email = document.querySelectorAll('.email');
email.forEach(element => {
element.setAttribute('aria-label', 'Subscribe email field');
});

const button = document.querySelectorAll('.button');
button.forEach(element => {
element.setAttribute('aria-label', 'button field');
});

const button_checkout = document.querySelectorAll('.checkout-button');
button_checkout.forEach(element => {
element.setAttribute('aria-label', 'Proceed to checkout');
});
const randoms = document.querySelectorAll('input[name="b_141fdad3351594ba0246baeb8_5ac18b0f10"]');
randoms.forEach(element => {
element.setAttribute('aria-label', 'random field');
});

const pagination_main = document.querySelectorAll('.vc_pagination.vc_pagination-style-outline');
pagination_main.forEach(element => {
element.setAttribute('aria-label', 'pagination');
});
// const explore_btn = document.querySelectorAll('.explore_btn');
// explore_btn.forEach(element => {
// element.setAttribute('aria-label', 'Explore');
// });

// const tablist_btn = document.querySelectorAll('.info-specs_tab');
// tablist_btn.forEach(element => {
// element.setAttribute('aria-selected', 'true');
// });
function setAriaLabel(selector, label) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => {
    element.setAttribute('aria-label', label);
  });
}
function __setAttribute(selector, label, attribute, tabindex) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => {
    element.setAttribute(attribute, label, tabindex);
  });
}
function setId(selector, ID) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => {
    element.setAttribute('id', ID);
  });
}
function setFor(selector, For) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => {
    element.setAttribute('for', For);
  });
}
function setRole(selector, For = 'button') {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => {
    element.setAttribute('role', For);
  });
}
function setAriaLabelForAnchorImages(className) {
  // Get all anchor tags with the specified class that contain images
  var anchorTags = document.querySelectorAll("a.vc_single_image-wrapper");

// Loop through each anchor tag
    anchorTags.forEach(function(anchor) {
      // Find the image within the anchor tag
      var img = anchor.querySelector("img");

// Get the alt attribute of the image
      var altText = img.getAttribute("alt");

// Set the aria-label attribute of the anchor tag with the alt text
      anchor.setAttribute("aria-label", altText);
      img.setAttribute("aria-label", altText);
      console.log(altText);
    });
}
function setAriaLabelForAnchorpdfs(className) {
  // Get all anchor tags with the specified class
  const anchorTags = document.querySelectorAll(className);

anchorTags.forEach(anchorTag => {
    // Check if the anchor tag has an href attribute
    const href = anchorTag.getAttribute('href');
    if (href) {
      // Extract the last part of the href and remove the .pdf extension
      const fileName = href.split('/').pop().replace('.pdf', '');

// Set the rest as the aria-label for the anchor tag
      anchorTag.setAttribute('aria-label', fileName + '- link opens in a new tab');
    }
  });
}
function enhanceInputAccessibility(classname) {
  const inputElements = document.querySelectorAll(classname);
  inputElements.forEach(inputElement => {
      if (inputElement) {
      // Check if the placeholder attribute exists
      const placeholder = inputElement.getAttribute('placeholder');

// Check if the element has the class 'wpcf7-validates-as-required'
      const isRequired = inputElement.classList.contains('wpcf7-validates-as-required') || inputElement.classList.contains('wpcf7-validates-as-tel');

// Use the placeholder if it exists, otherwise use the name attribute
      const labelValue = placeholder || inputElement.getAttribute('name');

// Set the aria-label attribute
      inputElement.setAttribute('aria-label', labelValue);

// Set the aria-required attribute to true if the element is required
      if (isRequired) {
        console.log(isRequired);
        inputElement.setAttribute('aria-required', 'true');
      }
    }
  });
  
}
setAriaLabel('input[name="pbr_username"]', 'pbr username field');
setAriaLabel('input[name="pbr_password"]', 'pbr password field');
setAriaLabel('.learn_more_home_btn a', 'Hardwood Learn more button');
setAriaLabel('input[name="g-recaptcha-response"]', 'g-recaptcha-response field');
setAriaLabel('.btn-offcanvas', 'Menu collapse trigger button');
setAriaLabel('.b-search__input', 'search input');
setAriaLabel('.b-search__form', 'video search form');
setAriaLabel('.left.carousel-control', 'right carousel control');
setAriaLabel('.right.carousel-control', 'left carousel-control');
setAriaLabel('.evcal_arrows.evcal_btn_prev', 'previous button');
setAriaLabel('.evcal_arrows.evcal_btn_next', 'next button');
setAriaLabel('a.vc_btn3.js-findDealer', 'Find a Dealer');
setAriaLabel('.a2a_button_facebook', 'facebook social share - link opens in a new tab');
setAriaLabel('.a2a_button_twitter', 'twitter social share - link opens in a new tab');
//setAriaLabel('.cart-nav', 'cart button');
// setFor('.b-search__label','b-search__label-id');
setId('.b-search__input','b-search__label-id');
setRole('.sllv-video__link');
setRole('a.vc_btn3.js-findDealer');
setRole('.cart-contents');
setRole('.b-search__arrowWrapper.js-searchMenu');
setRole('a.carousel-control');
setRole('.woocommerce-Price-amount.amount','heading');
__setAttribute('input[name="EMAIL"]','true','aria-required');
__setAttribute('.l-shopLocal.js-shopLocal','Shop local Navigation','role');
__setAttribute('.cart-contents','0','tabindex');
__setAttribute('h2.gt_started','0','tabindex');
__setAttribute('.com_rate','0','tabindex');

__setAttribute('article.hentry.wpautop.page.type-page.status-publish .wpb-container.vc_row.wpb_row.vc_row-fluid img','0','tabindex');
__setAttribute('article.hentry.wpautop.page.type-page.status-publish .wpb-container.vc_row.wpb_row.vc_row-fluid a img','-1','tabindex');
__setAttribute('.tabindx_stle','0','tabindex');

setAriaLabelForAnchorpdfs(".wpb_wrapper p a");

//__setAttribute('.recipe-summary .summary-block','0','tabindex');
__setAttribute('.recipes-content .the-recipe>img','0','tabindex');
__setAttribute('.recipes-content .the-recipe p>img','0','tabindex');
__setAttribute('.recipes-content .the-recipe figure.wp-caption img','0','tabindex');
// __setAttribute('.recipe-heads','0','tabindex');
// __setAttribute('.recipe-heads h1','0','tabindex');
__setAttribute('h2.sidebar-title','0','tabindex');

__setAttribute('.wpb_text_column .wpb_wrapper h2.dotted-header','0','tabindex');
__setAttribute('.cart-collaterals .cart_totals .shop_table ','0','tabindex');
__setAttribute('.cart_totals .head_crt','0','tabindex');
__setAttribute('.app_mobl img','0','tabindex');
__setAttribute('.Lorem-company img','0','tabindex');
__setAttribute('.Num_of_store','0','tabindex');
__setAttribute('.grill-headers h2','0','tabindex');
__setAttribute('.vc_column_container .wpb_wrapper h1','0','tabindex');
__setAttribute('.woocommerce-product-details__short-description>h3','0','tabindex');
// __setAttribute('.addr-sec .p-area','0','tabindex');
// __setAttribute('.panel-cont .item-thumb img','0','tabindex');
__setAttribute('.grill-components img','0','tabindex');
__setAttribute('#woo-btm-section h2.dotted-header','0','tabindex');
__setAttribute('.smart-control-features .grill-feature img','0','tabindex');
// __setAttribute('.grill-components p','0','tabindex');
__setAttribute('.fancybox-button.fancybox-button--close','0','tabindex');
__setAttribute('.woocommerce-Price-amount.amount','0','tabindex');
__setAttribute('#order_review .shop_table','0','tabindex');
// __setAttribute('.Lorem-product-page-info .price','0','tabindex');
__setAttribute('.woocommerce-billing-fields h2','0','tabindex');

__setAttribute('.woocommerce-shipping-fields h3.form-row','0','tabindex');
__setAttribute('#order_review_heading','0','tabindex');
// __setAttribute('.b-shopLocal.js-shopLocal__trigger','0','tabindex');
__setAttribute('.vc_single_image-wrapper','noopener noreferrer','rel');
__setAttribute('.Lorem_banner img','0','tabindex');
__setAttribute('.Lorem-diff-left img','0','tabindex');
__setAttribute('.product_title.entry-title','0','tabindex');
setRole('.evcal_arrows');
setAriaLabel('.b-search__arrowWrapper.js-searchMenu', 'expand button');

setAriaLabelForAnchorpdfs('.vc_single_image-wrapper');
enhanceInputAccessibility('.wpcf7-form-control'); 
document.addEventListener("DOMContentLoaded", function() {
setAriaLabelForAnchorImages('a.vc_single_image-wrapper');
});
const loopreceipe = document.querySelectorAll(".recipe-block img");
loopreceipe.forEach( function(element,i)  {
  element.setAttribute('tabindex', i);
});

const loopMenu = document.querySelectorAll("#primary-menu > li > a");
loopMenu.forEach( function(element,i)  {
  element.setAttribute('tabindex', 0);
});

const priceLoop = document.querySelectorAll(".cart_item .product-price");
priceLoop.forEach( function(element,i)  {
  element.setAttribute('tabindex', 0);
});

// const iframe_video = document.querySelectorAll(".b-singleVideo__video iframe");
// iframe_video.forEach( function(element,i)  {
//   element.setAttribute('title', "Youtube Video");
//   element.setAttribute('aria-label', "Youtube Video");
// });

// const tabimage = document.querySelectorAll("img");
// tabimage.forEach( function(element,i)  {
//   element.setAttribute('tabindex', 0);
// });

</script>

Navigation
==========

Navigation(add aria-haspopup and role attribute with javascript)
================================================================

Socail Media Menu Use
=====================
<li>
<a href="https://www.instagram.com/" aria-label="instagram" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>

remove rel attribute with javascript
====================================

$('.other').children('a').attr("rel","");
or,
$('.other').children('a').removeAttr("rel");

target blank problem solved for link
====================================
<a aria-label="Google search - link opens in a new tab" href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google search</a>

Accesesibility Codes Example