niu/wordpress-theme-niu
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve Web accessibility compliance (WCAG 2.0 AA)

Browse Source 
- Remove no-js class and fix duplicate src attribute on header image
- Use get_header_image() instead of header_image() to avoid invalid HTML
- Improve header image alt text from 'header' to 'Site header banner'
- Add screen-reader text for external links (opens in a new tab)
- Change text-align from justify to left for better readability
- Improve span.notice color contrast (red -> #a00)
- Add focus styles for keyboard navigation
- Add screen-reader-text class definitions
This commit is contained in:
Yoshihiro OKUMURA
2026-05-31 01:57:05 +09:00
parent 2b311fb88a
commit 7bf9a29b86
3 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
footer.php
+2 -2
View File
@@ -42,8 +42,8 @@
<?php endif; ?>
<div class="site-links">
<a href="https://www.riken.jp/" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2019/11/banner-riken.png" alt="RIKEN" /></a>
<a href="https://cbs.riken.jp/" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2019/11/banner-riken-cbs.png" alt="RIKEN Center for Brain Science" /></a><!-- .site-banner -->
<a href="https://www.riken.jp/" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2019/11/banner-riken.png" alt="RIKEN" /><span class="screen-reader-text"><?php _e( '(opens in a new tab)', 'niu' ); ?></span></a>
<a href="https://cbs.riken.jp/" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2019/11/banner-riken-cbs.png" alt="RIKEN Center for Brain Science" /><span class="screen-reader-text"><?php _e( '(opens in a new tab)', 'niu' ); ?></span></a><!-- .site-banner -->
</div>
<div class="site-info">
header.php
+1 -1
View File
@@ -99,7 +99,7 @@
?>
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="header">
<img src="<?php echo esc_url( get_header_image() ); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php esc_attr_e( 'Site header banner', 'niu' ); ?>">
</a>
</div><!-- .header-image -->
<?php endif; // End header image check. ?>
style.css
+40 -2
View File
@@ -44,12 +44,12 @@ p.member {
margin-bottom: 1em;
}
p {
text-align: justify;
text-align: left;
}
span.notice {
font-size: 60%;
margin-left: 3px;
color: red;
color: #a00;
font-weight: 700;
}
span.byline {
@@ -136,6 +136,44 @@ div.site-links img {
float: right;
}
}
/* Accessibility: Focus styles */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* Accessibility: Screen reader text */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
}
.screen-reader-text:focus {
clip: auto;
width: auto;
height: auto;
display: block;
font-size: 1em;
font-weight: bold;
padding: 15px 23px 14px;
background: #f1f1f1;
color: #1a5e7a;
z-index: 100000;
top: 5px;
left: 5px;
line-height: normal;
text-decoration: none;
border-radius: 2px;
}
@media screen and (min-width: 61.5625em) {
.site-main {
margin-bottom: 4.5em;