Skip to content

Instantly share code, notes, and snippets.

@DougCrossDesign

DougCrossDesign/Web Accessibility - Skip Links

Last active November 26, 2017 00:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DougCrossDesign/2960e08dd49ae6b5afe36158670e233d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DougCrossDesign/2960e08dd49ae6b5afe36158670e233d to your computer and use it in GitHub Desktop.
Download ZIP
Web Accessibility - Skip Links
Raw
index.html
<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>
Raw
style.scss
/*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