Home › Forums › Themes Support › Gecko › ADA Compliance Imporvements
Tagged: ADA
- This topic has 3 replies, 2 voices, and was last updated 5 years, 7 months ago by
Harry.
-
AuthorPosts
-
-
November 12, 2019 at 6:08 am #34402
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).
- 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”.
- Add “title” and “aria-label” for the Account Icon and Wishlist Icon and add “aria-label” for Search, Account, Wishlist and Cart.
- 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.
-
November 12, 2019 at 7:17 am #34404
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 -
November 12, 2019 at 7:46 am #34405
I an using the Gecko theme would I need to change the reference in the functions additions you provided ?
-
November 12, 2019 at 7:29 pm #34412
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
-
-
AuthorPosts
You must be logged in to reply to this topic.