adding skip to content link

also improves a11y with .screen-reader-text class not hiding elements from a screen reader Fixes elmastudio#2
2ndkauboy · Jul 18, 2022 · 108cbe7 · 108cbe7
1 parent 3e467f3
commit 108cbe7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/header.php b/header.php
@@ -47,6 +47,8 @@
 <body <?php body_class(); ?>>
 
 	<div id="site-nav-wrap" class="clearfix">
+		<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'waipoua' ); ?></a>
+
 		<div id="site-nav-container">
 			<?php if ( has_nav_menu( 'primary' ) ) : ?>
 			<a href="<?php echo home_url( '/' ); ?>" id="home-btn"><?php _e('Home', 'waipoua') ?></a>

diff --git a/style.css b/style.css
@@ -27,7 +27,6 @@ a:hover, a:active, a:focus { outline: none; -moz-outline-style: none;}
 :-moz-placeholder {color:#787974;}
 ::placeholder {color:#787974; opacity: 1;}
 .placeholder {color:#787974;}
-.screen-reader-text {display: none;}
 .bypostauthor {}
 .sticky {}
 
@@ -3549,3 +3548,41 @@ img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
 .left{float:left;}
 img{page-break-inside:avoid;page-break-after:avoid;}
 }
+
+/*-----------------------------------------------------------------------------------*/
+/*	Screen reader text & skip link
+/*-----------------------------------------------------------------------------------*/
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	-webkit-clip-path: inset(50%);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+	word-break: normal;
+}
+.skip-link:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgb(0 0 0 / 60%);
+	clip: auto !important;
+	-webkit-clip-path: none;
+	clip-path: none;
+	color: #21759b;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 15px;
+	text-decoration: none;
+	top: 7px;
+	width: auto;
+	z-index: 100000;
+}