Skip to main content
CSS is fun and cool and I like it.
Article

How to Create a “Skip to Content” Link

Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

In fact, you can find one right here on CSS-Tricks if you crack DevTools open.… Read article “How to Create a “Skip to Content” Link”

Article

The `hidden` Attribute is Visibly Weak

There is an HTML attribute that does exactly what you think it should do:

<div>I'm visible</div>
<div hidden>I'm hidden</div>

It even has great browser support. Is it useful? Uhm. Maybe. Not really. … Read article “The `hidden` Attribute is Visibly Weak”

Link

Inclusively Hidden

Link

See No Evil: Hidden Content and Accessibility

Link

Beware Smushed Off-Screen Accessible Text

Snippet

Accessibility/SEO Friendly CSS Hiding

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

This class can remove an item from the page, taking it out of flow and doesn’t cause overflow scrolling.

It’s better than display: none; or even visibility: hidden; when the goal is to hide the element visually but leave it accessible for screen readers.

Snook has a walkthrough of a more robust class taking into account more situations.

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 
Read article “Accessibility/SEO Friendly CSS Hiding”