Skip to content

Instantly share code, notes, and snippets.

@DougCrossDesign
Last active November 26, 2017 00:00
Show Gist options
  • Select an option

  • Save DougCrossDesign/2960e08dd49ae6b5afe36158670e233d to your computer and use it in GitHub Desktop.

Select an option

Save DougCrossDesign/2960e08dd49ae6b5afe36158670e233d to your computer and use it in GitHub Desktop.
Web Accessibility - Skip Links
<header id="header">
<a id="skip-main-content" class="screenreader-text" href='#main-content'>
Skip to Main Content
</a>
<a id="skip-more-content" class="screenreader-text" href='#more-content'>
Skip to More Content
</a>
<a id="skip-footer" class="screenreader-text" href='#footer'>
Skip to Footer
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Page</li>
<li>Contact</li>
</ul>
</header>
<body id="body">
<main id="main-content" class="example-wrapper">
<p style="color: red;">On page load, click in the example area and press tab. A skip link should area when focused. You can continue to tab through these skip links and on spacebar or enter, the scroll will jump to that content block.</p>
<h1>Mission Statement</h1>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
</p>
<p>
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
</p>
</main>
<main id="more-content" class="example-wrapper">
<h1>Process</h1>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
</p>
<p>
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
</p>
</main>
</body>
<footer id="footer">
<p>
<h4>ABC Company, Inc.</h4>
123 Main Street, Suite 404<br/>
Philadelphia, PA 19104
</p>
</footer>
/*Example Reset*/
html, body{
padding: 0;
margin: 0;
font-family:'Helvetica', Arial, sans-serif;
}
.screenreader-text {
position: absolute;
left: -999px;
width:1px;
height: 1px;
top: auto;
&:focus {
color: rgba(255, 255, 255, 1);
display: block;
height: auto;
width: auto;
position: static;
margin: auto;
}
}
header{
margin: 0;
padding: 0.25em 3em;
color: rgba(255, 255, 255, 1);
background-color: rgba(0,0,0,1);
width: 100%;
position:fixed;
top: 0;
z-index: 1;
ul{
list-style: none;
li{
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
padding: 0.5em;
}
}
}
.example-wrapper{
max-width: 900px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
main{
border-width: 1px;
border-color: rgba(0,0,0,1);
border-style: solid;
margin-bottom: 5em;
padding: 1em 2.5em;
&#main-content{
margin-top: 8em;
}
}
footer{
margin: 0;
padding: 2em 5em;
color: rgba(255, 255, 255, 1);
background-color: rgba(0,0,0,1);
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment