Your account expired support, please renew to get your support.

Home Forums Themes Support Gecko ADA Compliance Imporvements

Tagged: 

Viewing 3 reply threads
  • Author
    Posts
    • #34402
      knights
      Support Expired

      Would it be possible to integrate some additional features into the theme for ADA Compliance as that is becoming more and more important for websites (especially in the US).

      1. Add additional fields to the Social Network sections of the Theme Options for each Social Account added. One field for “title” and one for “aria-label”.
      2. Add “title” and “aria-label” for the Account Icon and Wishlist Icon and add “aria-label” for Search, Account, Wishlist and Cart.
      3. For the WPBackery Page Builder when using the “Promotion Banner” would it be possible to add a link “title” and “aria-label” to the link options under the General tab.

      Basically anything that can create a link to something else needs to have the “title” and should have the aria-label property for the link

      Thanks for making a great theme.

    • #34404
      Harry
      Support Expired

      Hi Knight,

      1, 2. Please add below code to claue-child > functions.php

      if ( ! function_exists( 'jas_claue_social' ) ) {
      	function jas_claue_social() {
      		$output = '';
      
      		$socials = cs_get_option( 'social-network' );
      		if ( empty( $socials ) ) return;
      
      		$output .= '<div class="jas-social">';
      			foreach ( $socials as $social) {
      				$output .= '<a class="dib br__50 tc ' . esc_attr( str_replace( 'fa fa-', '', $social['icon'] ) ) . '" href="' . esc_url( $social['link'] ) . '" target="_blank"><i class="' . esc_attr( $social['icon'] ) . '" title="' . esc_attr( $social['icon'] ) . '" aria-label="' . esc_attr( $social['icon'] ) . '"></i></a>';
      			}
      		$output .= '</div>';
      
      		return apply_filters( 'jas_claue_social', $output );
      	}
      }
      
      if ( ! function_exists( 'jas_claue_wc_my_account' ) ) {
      	function jas_claue_wc_my_account() {
      		$output = '';
      
      		if ( cs_get_option( 'header-my-account-icon' ) ) {
      			$output .= '<div class="jas-my-account hidden-xs ts__05 pr">';
      				$output .= '<a class="cb chp db" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '" title="My Account" aria-label="My Account"><i class="pe-7s-user"></i></a>';
      				$output .= '<ul class="pa tc">';
      					if ( is_user_logged_in() ) {
      						$output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Dashboard', 'claue' ) . '</a></li>';
      						$output .= '<li><a class="db cg chp" href="' . esc_url( home_url( '/orders-tracking/' ) ) . '">' . esc_html__( 'Order Tracking', 'claue' ) . '</a></li>';
      						$output .= '<li><a class="db cg chp" href="' . esc_url( wp_logout_url() ) . '">' . esc_html__( 'Logout', 'claue' ) . '</a></li>';
      					} else {
      						$output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Login / Register', 'claue' ) . '</a></li>';
      					}
      				$output .= '</ul>';
      			$output .= '</div>';
      		}
      
      		return apply_filters( 'jas_claue_wc_my_account', $output );
      	}
      }
      
      if ( ! function_exists( 'jas_claue_wc_shopping_cart' ) ) {
      	function jas_claue_wc_shopping_cart() {
      		global $woocommerce;
      		
      		// Catalog mode
      		$catalog_mode = cs_get_option( 'wc-catalog' );
      
      		if ( $catalog_mode ) return;
      
      		$output = '';
      		$output .= '<div class="jas-icon-cart pr">';
      			$output .= '<a class="cart-contents pr cb chp db" href="#" title="' . esc_html( 'View your shopping cart', 'claue' ) . '" aria-label="' . esc_html( 'View your shopping cart', 'claue' ) . '">';
      				$output .= '<i class="pe-7s-shopbag"></i>';
      				$output .= '<span class="pa count bgb br__50 cw tc">' . esc_html( $woocommerce->cart->get_cart_contents_count() ) . '</span>';
      			$output .= '</a>';
      		$output .= '</div>';
      		return apply_filters( 'jas_claue_wc_shopping_cart', $output );
      	}
      }

      and copy layout-x.php in claue > views > header to claue-child > views > header and add title and arial-label for search icon and wishlist icon

      3. Please edit file promotion.php in plugins > claue-addons > includes > shortcodes

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • #34405
      knights
      Support Expired

      I an using the Gecko theme would I need to change the reference in the functions additions you provided ?

    • #34412
      Harry
      Support Expired

      1,2. Sorry, please change code to

      if ( ! function_exists( 'jas_gecko_social' ) ) {
          function jas_gecko_social() {
              $output = '';
      
              $socials = cs_get_option( 'social-network' );
              if ( empty( $socials ) ) return;
      
              $output .= '<div class="jas-socials">';
                  foreach ( $socials as $social) {
                      $output .= '<a class="dib br__50 tc ' . esc_attr( str_replace( 'fa fa-', '', $social['icon'] ) ) . '" href="' . esc_url( $social['link'] ) . '" target="_blank"><i class="' . esc_attr( $social['icon'] ) . '" title="' . esc_attr( $social['icon'] ) . '" aria-label="' . esc_attr( $social['icon'] ) . '"></i></a>';
                  }
              $output .= '</div>';
      
              return apply_filters( 'jas_gecko_social', $output );
          }
      }
      
      if ( ! function_exists( 'jas_gecko_wc_my_account' ) ) {
          function jas_gecko_wc_my_account() {
              $output = '';
      
              if ( cs_get_option( 'header-my-account-icon' ) ) {
                  $output .= '<div class="jas-my-account hidden-xs ts__05 pr">';
                      $output .= '<a class="cb chp db" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '" title="My Account" aria-label="My Account"><i class="pe-7s-user"></i></a>';
                      $output .= '<ul class="pa tc">';
                          if ( is_user_logged_in() ) {
                              $output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'My Account', 'gecko' ) . '</a></li>';
                              $output .= '<li><a class="db cg chp" href="' . esc_url( wp_logout_url() ) . '">' . esc_html__( 'Logout', 'gecko' ) . '</a></li>';
                          } else {
                              $output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Login / Register', 'gecko' ) . '</a></li>';
                          }
                      $output .= '</ul>';
                  $output .= '</div>';
              }
      
              return apply_filters( 'jas_gecko_wc_my_account', $output );
          }
      }
      
      if ( ! function_exists( 'jas_gecko_wc_shopping_cart' ) ) {
          function jas_gecko_wc_shopping_cart() {
              global $woocommerce;
              
              // Catalog mode
              $catalog_mode = cs_get_option( 'wc-catalog' );
      
              if ( $catalog_mode ) return;
      
              $output = '';
              $output .= '<div class="jas-icon-cart pr">';
                  $output .= '<a class="cart-contents pr cb chp db" href="#" title="' . esc_html( 'View your shopping cart', 'gecko' ) . '" aria-label="' . esc_html( 'View your shopping cart', 'gecko' ) . '">';
                      $output .= '<i class="pe-7s-shopbag"></i>';
                      $output .= '<span class="pa count bgb br__50 cw tc">' . wp_kses_post( $woocommerce->cart->get_cart_contents_count() ) . '</span>';
                  $output .= '</a>';
              $output .= '</div>';
              return apply_filters( 'jas_gecko_wc_shopping_cart', $output );
          }
      }

      and copy layout-x.php in gecko > views > header to gecko-child > views > header and add title and arial-label for search icon and wishlist icon

      3. Please edit file promotion.php in plugins > jas-addons > includes > shortcodes

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

Viewing 3 reply threads

You must be logged in to reply to this topic.