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

Commit 031bed9

Browse files
rodica-andronacherodica-andronache
authored
Merge pull request #408 from felixzapata/a11y
Changes due to accessibility issues: missing labels, text inside links...
2 parents af431a3 + 912a2fe commit 031bed9

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
@@ -164,10 +164,16 @@ function zerif_setup() {
164164

165165
add_action( 'zerif_primary_navigation', 'zerif_primary_navigation_function' ); #Outputs the navigation menu
166166

167+
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
168+
167169
}
168170

169171
add_action('after_setup_theme', 'zerif_setup');
170172

173+
function wpdocs_excerpt_more( $more ) {
174+
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>';
175+
}
176+
171177
function zerif_lite_is_not_latest_posts() {
172178
return ('posts' == get_option( 'show_on_front' ) ? true : false);
173179
}
@@ -669,41 +675,41 @@ function widget($args, $instance) {
669675

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

672-
<div class="service-icon">
673-
674-
<?php if( !empty($instance['link']) ) { ?>
675-
676-
<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>
677-
678-
<?php } else { ?>
679-
680-
<i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
678+
681679

682-
<?php } ?>
680+
<?php if( !empty($instance['link']) ) { ?>
681+
682+
<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>
683+
684+
<?php } else { ?>
685+
686+
<div class="service-icon" tabindex="0">
687+
<i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
688+
</div>
689+
690+
<?php } ?>
683691

684-
</div>
692+
685693

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

688696
$zerif_ourfocus_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
689697
if( !empty($zerif_ourfocus_custom_media_id) && !empty($zerif_ourfocus_custom_media_id[0]) ) {
690698
?>
691699

692-
<div class="service-icon">
700+
693701

694-
<?php if( !empty($instance['link']) ) { ?>
695-
696-
<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>
697-
698-
<?php } else { ?>
699-
700-
<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-->
701-
702-
<?php } ?>
703-
704-
</div>
705-
706-
<?php
702+
<?php if( !empty($instance['link']) ) { ?>
703+
704+
<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>
705+
706+
<?php } else { ?>
707+
708+
<div class="service-icon" tabindex="0">
709+
<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-->
710+
</div>
711+
712+
<?php }
707713
}
708714

709715
}
@@ -863,18 +869,20 @@ function widget($args, $instance) {
863869

864870
echo '<div class="client-image hidden-xs">';
865871

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

868874
echo '</div>';
869875

870876
} elseif( !empty($instance['custom_media_id']) ) {
871877

872878
$zerif_testimonials_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
879+
$alt = get_post_meta($instance['custom_media_id'], '_wp_attachment_image_alt', true);
880+
873881
if( !empty($zerif_testimonials_custom_media_id) && !empty($zerif_testimonials_custom_media_id[0]) ) {
874882

875883
echo '<div class="client-image hidden-xs">';
876884

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

879887
echo '</div>';
880888

@@ -1100,25 +1108,28 @@ function widget($args, $instance) {
11001108

11011109
<div class="col-lg-3 col-sm-3 team-box">
11021110

1103-
<div class="team-member">
1111+
<div class="team-member" tabindex="0">
11041112

11051113
<?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'Upload Image') ) { ?>
1114+
11061115

11071116
<figure class="profile-pic">
11081117

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

11111120
</figure>
11121121
<?php
11131122
} elseif( !empty($instance['custom_media_id']) ) {
11141123

11151124
$zerif_team_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
1125+
$alt = get_post_meta($instance['custom_media_id'], '_wp_attachment_image_alt', true);
1126+
11161127
if( !empty($zerif_team_custom_media_id) && !empty($zerif_team_custom_media_id[0]) ) {
11171128
?>
11181129

11191130
<figure class="profile-pic">
11201131

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

11231134
</figure>
11241135

@@ -1154,27 +1165,27 @@ function widget($args, $instance) {
11541165
?>
11551166

11561167
<?php if ( !empty($instance['fb_link']) ): ?>
1157-
<li><a href="<?php echo apply_filters('widget_title', $instance['fb_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1168+
<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
11581169
class="fa fa-facebook"></i></a></li>
11591170
<?php endif; ?>
11601171

11611172
<?php if ( !empty($instance['tw_link']) ): ?>
1162-
<li><a href="<?php echo apply_filters('widget_title', $instance['tw_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1173+
<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
11631174
class="fa fa-twitter"></i></a></li>
11641175
<?php endif; ?>
11651176

11661177
<?php if ( !empty($instance['bh_link']) ): ?>
1167-
<li><a href="<?php echo apply_filters('widget_title', $instance['bh_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1178+
<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
11681179
class="fa fa-behance"></i></a></li>
11691180
<?php endif; ?>
11701181

11711182
<?php if ( !empty($instance['db_link']) ): ?>
1172-
<li><a href="<?php echo apply_filters('widget_title', $instance['db_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1183+
<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
11731184
class="fa fa-dribbble"></i></a></li>
11741185
<?php endif; ?>
11751186

11761187
<?php if ( !empty($instance['ln_link']) ): ?>
1177-
<li><a href="<?php echo apply_filters('widget_title', $instance['ln_link']); ?>" target="<?php echo $zerif_team_target; ?>"><i
1188+
<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
11781189
class="fa fa-linkedin"></i></a></li>
11791190
<?php endif; ?>
11801191

‎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)