Skip to content
This repository was archived by the owner on May 5, 2021. It is now read-only.

Commit 912a2fe

Browse files
felixzapatafelixzapata
committed
fix(a11y): changes due to accessibility issues
1 parent 0562821 commit 912a2fe

File tree

5 files changed

+82
-64
lines changed

5 files changed

+82
-64
lines changed

‎footer.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,27 +141,27 @@
141141

142142
/* facebook */
143143
if( !empty($zerif_socials_facebook) ):
144-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_facebook).'"><i class="fa fa-facebook"></i></a></li>';
144+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_facebook).'"><span class="sr-only">' . __( 'Go to Facebook', 'zerif-lite' ) . '</span> <i class="fa fa-facebook"></i></a></li>';
145145
endif;
146146
/* twitter */
147147
if( !empty($zerif_socials_twitter) ):
148-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_twitter).'"><i class="fa fa-twitter"></i></a></li>';
148+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_twitter).'"><span class="sr-only">' . __( 'Go to Twitter', 'zerif-lite' ) . '</span> <i class="fa fa-twitter"></i></a></li>';
149149
endif;
150150
/* linkedin */
151151
if( !empty($zerif_socials_linkedin) ):
152-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_linkedin).'"><i class="fa fa-linkedin"></i></a></li>';
152+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_linkedin).'"><span class="sr-only">' . __( 'Go to Linkedin', 'zerif-lite' ) . '</span> <i class="fa fa-linkedin"></i></a></li>';
153153
endif;
154154
/* behance */
155155
if( !empty($zerif_socials_behance) ):
156-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_behance).'"><i class="fa fa-behance"></i></a></li>';
156+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_behance).'"><span class="sr-only">' . __( 'Go to Behance', 'zerif-lite' ) . '</span> <i class="fa fa-behance"></i></a></li>';
157157
endif;
158158
/* dribbble */
159159
if( !empty($zerif_socials_dribbble) ):
160-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_dribbble).'"><i class="fa fa-dribbble"></i></a></li>';
160+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_dribbble).'"><span class="sr-only">' . __( 'Go to Dribble', 'zerif-lite' ) . '</span> <i class="fa fa-dribbble"></i></a></li>';
161161
endif;
162162
/* instagram */
163163
if( !empty($zerif_socials_instagram) ):
164-
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><i class="fa fa-instagram"></i></a></li>';
164+
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><span class="sr-only">' . __( 'Go to Instagram', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
165165
endif;
166166
echo '</ul>';
167167
endif;

‎functions.php‎

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -161,10 +161,16 @@ function zerif_setup() {
161161

162162
add_action( 'zerif_primary_navigation', 'zerif_primary_navigation_function' ); #Outputs the navigation menu
163163

164+
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
165+
164166
}
165167

166168
add_action('after_setup_theme', 'zerif_setup');
167169

170+
function wpdocs_excerpt_more( $more ) {
171+
return ' ... <a href="'.get_the_permalink().'" rel="nofollow">'. esc_html__('Read more', 'zerif-lite') .' <span class="sr-only">' . esc_html__('about ', 'zerif-lite').get_the_title() . '</span>...</a>';
172+
}
173+
168174
function zerif_lite_is_not_latest_posts() {
169175
return ('posts' == get_option( 'show_on_front' ) ? true : false);
170176
}
@@ -666,41 +672,41 @@ function widget($args, $instance) {
666672

667673
<?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'Upload Image') ) { ?>
668674

669-
<div class="service-icon">
670-
671-
<?php if( !empty($instance['link']) ) { ?>
672-
673-
<a href="<?php echo esc_url($instance['link']); ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>
674-
675-
<?php } else { ?>
676-
677-
<i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
675+
678676

679-
<?php } ?>
677+
<?php if( !empty($instance['link']) ) { ?>
678+
679+
<a href="<?php echo esc_url($instance['link']); ?>" class="service-icon"><span class="sr-only"><?php _e( 'Go to', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['title']); ?></span> <i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i></a>
680+
681+
<?php } else { ?>
682+
683+
<div class="service-icon" tabindex="0">
684+
<i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
685+
</div>
686+
687+
<?php } ?>
680688

681-
</div>
689+
682690

683691
<?php } elseif( !empty($instance['custom_media_id']) ) {
684692

685693
$zerif_ourfocus_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
686694
if( !empty($zerif_ourfocus_custom_media_id) && !empty($zerif_ourfocus_custom_media_id[0]) ) {
687695
?>
688696

689-
<div class="service-icon">
697+
690698

691-
<?php if( !empty($instance['link']) ) { ?>
692-
693-
<a href="<?php echo esc_url($instance['link']); ?>"><i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>
694-
695-
<?php } else { ?>
696-
697-
<i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
698-
699-
<?php } ?>
700-
701-
</div>
702-
703-
<?php
699+
<?php if( !empty($instance['link']) ) { ?>
700+
701+
<a href="<?php echo esc_url($instance['link']); ?>" class="service-icon"><span class="sr-only"><?php _e( 'Go to', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['title']); ?> </span> <i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i></a>
702+
703+
<?php } else { ?>
704+
705+
<div class="service-icon" tabindex="0">
706+
<i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
707+
</div>
708+
709+
<?php }
704710
}
705711

706712
}
@@ -850,18 +856,20 @@ function widget($args, $instance) {
850856

851857
echo '<div class="client-image hidden-xs">';
852858

853-
echo '<img src="' . esc_url($instance['image_uri']) . '" alt="'.__( 'Uploaded image', 'zerif-lite' ).'" />';
859+
echo '<img src="' . esc_url($instance['image_uri']) . '" alt="" />';
854860

855861
echo '</div>';
856862

857863
} elseif( !empty($instance['custom_media_id']) ) {
858864

859865
$zerif_testimonials_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
866+
$alt = get_post_meta($instance['custom_media_id'], '_wp_attachment_image_alt', true);
867+
860868
if( !empty($zerif_testimonials_custom_media_id) && !empty($zerif_testimonials_custom_media_id[0]) ) {
861869

862870
echo '<div class="client-image hidden-xs">';
863871

864-
echo '<img src="' . esc_url($zerif_testimonials_custom_media_id[0]) . '" alt="'.__( 'Uploaded image', 'zerif-lite' ).'" />';
872+
echo '<img src="' . esc_url($zerif_testimonials_custom_media_id[0]) . '" alt="'. $alt .'" />';
865873

866874
echo '</div>';
867875

@@ -1066,25 +1074,28 @@ function widget($args, $instance) {
10661074

10671075
<div class="col-lg-3 col-sm-3 team-box">
10681076

1069-
<div class="team-member">
1077+
<div class="team-member" tabindex="0">
10701078

10711079
<?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'Upload Image') ) { ?>
1080+
10721081

10731082
<figure class="profile-pic">
10741083

1075-
<img src="<?php echo esc_url($instance['image_uri']); ?>" alt="<?php _e( 'Uploaded image', 'zerif-lite' ); ?>" />
1084+
<img src="<?php echo esc_url($instance['image_uri']); ?>" alt="" />
10761085

10771086
</figure>
10781087
<?php
10791088
} elseif( !empty($instance['custom_media_id']) ) {
10801089

10811090
$zerif_team_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
1091+
$alt = get_post_meta($instance['custom_media_id'], '_wp_attachment_image_alt', true);
1092+
10821093
if( !empty($zerif_team_custom_media_id) && !empty($zerif_team_custom_media_id[0]) ) {
10831094
?>
10841095

10851096
<figure class="profile-pic">
10861097

1087-
<img src="<?php echo esc_url($zerif_team_custom_media_id[0]); ?>" alt="<?php _e( 'Uploaded image', 'zerif-lite' ); ?>" />
1098+
<img src="<?php echo esc_url($zerif_team_custom_media_id[0]); ?>" alt="<?php echo $alt; ?>" />
10881099

10891100
</figure>
10901101

@@ -1120,27 +1131,27 @@ function widget($args, $instance) {
11201131
?>
11211132

11221133
<?php if ( !empty($instance['fb_link']) ): ?>
1123-
<li><a href="<?php echo apply_filters('widget_title', $instance['fb_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1134+
<li><a href="<?php echo apply_filters('widget_title', $instance['fb_link']); ?>" target="<?php echo $zerif_team_target; ?>"><span class="sr-only"><?php _e( 'Facebook account of', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['name']); ?></span><i
11241135
class="fa fa-facebook"></i></a></li>
11251136
<?php endif; ?>
11261137

11271138
<?php if ( !empty($instance['tw_link']) ): ?>
1128-
<li><a href="<?php echo apply_filters('widget_title', $instance['tw_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1139+
<li><a href="<?php echo apply_filters('widget_title', $instance['tw_link']); ?>" target="<?php echo $zerif_team_target; ?>"><span class="sr-only"><?php _e( 'Twitter account of', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['name']); ?></span><i
11291140
class="fa fa-twitter"></i></a></li>
11301141
<?php endif; ?>
11311142

11321143
<?php if ( !empty($instance['bh_link']) ): ?>
1133-
<li><a href="<?php echo apply_filters('widget_title', $instance['bh_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1144+
<li><a href="<?php echo apply_filters('widget_title', $instance['bh_link']); ?>" target="<?php echo $zerif_team_target; ?>"><span class="sr-only"><?php _e( 'Behance account of', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['name']); ?></span><i
11341145
class="fa fa-behance"></i></a></li>
11351146
<?php endif; ?>
11361147

11371148
<?php if ( !empty($instance['db_link']) ): ?>
1138-
<li><a href="<?php echo apply_filters('widget_title', $instance['db_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1149+
<li><a href="<?php echo apply_filters('widget_title', $instance['db_link']); ?>" target="<?php echo $zerif_team_target; ?>"><span class="sr-only"><?php _e( 'Dribble account of', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['name']); ?></span><i
11391150
class="fa fa-dribbble"></i></a></li>
11401151
<?php endif; ?>
11411152

11421153
<?php if ( !empty($instance['ln_link']) ): ?>
1143-
<li><a href="<?php echo apply_filters('widget_title', $instance['ln_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1154+
<li><a href="<?php echo apply_filters('widget_title', $instance['ln_link']); ?>" target="<?php echo $zerif_team_target; ?>"><span class="sr-only"><?php _e( 'Linkedin account of', 'zerif-lite' ); ?> <?php echo apply_filters('widget_title', $instance['name']); ?></span><i
11441155
class="fa fa-linkedin"></i></a></li>
11451156
<?php endif; ?>
11461157

‎sections/about_us.php‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,14 +132,14 @@
132132

133133
echo '<div class="skill-count">';
134134

135-
echo '<input type="text" value="'.esc_attr( $zerif_aboutus_feature1_nr ).'" data-thickness=".2" class="skill1" tabindex="-1">';
135+
echo '<input role="presentation" type="text" id="' . sanitize_title($zerif_aboutus_feature1_title) . '" value="'.esc_attr( $zerif_aboutus_feature1_nr ).'" data-thickness=".2" class="skill1" tabindex="-1">';
136136

137137
echo '</div>';
138138

139139
endif;
140140

141141
if( !empty($zerif_aboutus_feature1_title) ):
142-
echo '<div class="section-legend">'.wp_kses_post( $zerif_aboutus_feature1_title ).'</div>';
142+
echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature1_title) . '">'.wp_kses_post( $zerif_aboutus_feature1_title ).'</label></div>';
143143
elseif ( is_customize_preview() ):
144144
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
145145
endif;
@@ -170,7 +170,7 @@
170170

171171
echo '<div class="skill-count">';
172172

173-
echo '<input type="text" value="'.esc_attr( $zerif_aboutus_feature2_nr ).'" data-thickness=".2" class="skill2" tabindex="-1">';
173+
echo '<input role="presentation" type="text" id="' . sanitize_title($zerif_aboutus_feature2_title) . '" value="'.esc_attr( $zerif_aboutus_feature2_nr ).'" data-thickness=".2" class="skill2" tabindex="-1">';
174174

175175
echo '</div>';
176176

@@ -179,7 +179,7 @@
179179

180180

181181
if( !empty($zerif_aboutus_feature2_title) ):
182-
echo '<div class="section-legend">'.wp_kses_post( $zerif_aboutus_feature2_title ).'</div>';
182+
echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature2_title) . '">'.wp_kses_post( $zerif_aboutus_feature2_title ).'</label></div>';
183183
elseif ( is_customize_preview() ):
184184
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
185185
endif;
@@ -208,14 +208,14 @@
208208

209209
echo '<div class="skill-count">';
210210

211-
echo '<input type="text" value="'.esc_attr( $zerif_aboutus_feature3_nr ).'" data-thickness=".2" class="skill3" tabindex="-1">';
211+
echo '<input role="presentation" type="text" id="' . sanitize_title($zerif_aboutus_feature3_title) . '" value="'.esc_attr( $zerif_aboutus_feature3_nr ).'" data-thickness=".2" class="skill3" tabindex="-1">';
212212

213213
echo '</div>';
214214

215215
endif;
216216

217217
if( !empty($zerif_aboutus_feature3_title) ):
218-
echo '<div class="section-legend">'.wp_kses_post( $zerif_aboutus_feature3_title ).'</div>';
218+
echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature3_title) . '">'.wp_kses_post( $zerif_aboutus_feature3_title ).'</label></div>';
219219
elseif ( is_customize_preview() ):
220220
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
221221
endif;
@@ -245,14 +245,14 @@
245245

246246
echo '<div class="skill-count">';
247247

248-
echo '<input type="text" value="'.esc_attr( $zerif_aboutus_feature4_nr ).'" data-thickness=".2" class="skill4" tabindex="-1">';
248+
echo '<input role="presentation" type="text" id="' . sanitize_title($zerif_aboutus_feature4_title) . '" value="'.esc_attr( $zerif_aboutus_feature4_nr ).'" data-thickness=".2" class="skill4" tabindex="-1">';
249249

250250
echo '</div>';
251251

252252
endif;
253253

254254
if( !empty($zerif_aboutus_feature4_title) ):
255-
echo '<div class="section-legend">'.wp_kses_post( $zerif_aboutus_feature4_title ).'</div>';
255+
echo '<div class="section-legend"><label for="' . sanitize_title($zerif_aboutus_feature4_title) . '">'.wp_kses_post( $zerif_aboutus_feature4_title ).'</label></div>';
256256
elseif ( is_customize_preview() ):
257257
echo '<div class="section-legend zerif_hidden_if_not_customizer"></div>';
258258
endif;

‎sections/latest_news.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
$zerif_latest_loop = new WP_Query( apply_filters( 'zerif_latest_news_parameters', array( 'post_type' => 'post', 'posts_per_page' => $zerif_total_posts, 'order' => 'DESC','ignore_sticky_posts' => true )) );
3636

37-
$newSlideActive = '<div class="item active">';
37+
$newSlideActive = '<div class="item active" role="option">';
3838
$newSlide = '<div class="item">';
3939
$newSlideClose = '<div class="clear"></div></div>';
4040
$i_latest_posts= 0;
@@ -77,7 +77,7 @@
7777
$ismore = @strpos( $post->post_content, '<!--more-->');
7878

7979
if($ismore) {
80-
the_content( sprintf( esc_html__('[...]','zerif-lite'), '<span class="screen-reader-text">'.esc_html__('about ', 'zerif-lite').get_the_title().'</span>' ) );
80+
the_content( esc_html__('Read more', 'zerif-lite') .' <span class="sr-only">' . esc_html__('about ', 'zerif-lite').get_the_title() );
8181
} else {
8282
the_excerpt();
8383
}
@@ -95,7 +95,7 @@
9595

9696
if( $i_latest_posts == 1 ) $active = 'active'; else $active = '';
9797

98-
echo '<div class="item '.$active.'">';
98+
echo '<div class="item '.$active.'" role="option">';
9999
echo '<div class="col-md-3 latestnews-box">';
100100
echo '<div class="latestnews-img">';
101101
echo '<a class="latestnews-img-a" href="'.get_permalink().'" title="'.get_the_title().'">';
@@ -112,7 +112,7 @@
112112
$ismore = @strpos( $post->post_content, '<!--more-->');
113113

114114
if($ismore) {
115-
the_content( sprintf( esc_html__('[...]','zerif-lite'), '<span class="screen-reader-text">'.esc_html__('about ', 'zerif-lite').get_the_title().'</span>' ) );
115+
the_content( esc_html__('Read more', 'zerif-lite') .' <span class="sr-only">' . esc_html__('about ', 'zerif-lite').get_the_title() );
116116
} else {
117117
the_excerpt();
118118
}

0 commit comments

Comments
 (0)