Applied Accessibility - Screen reader only css

This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.

HTML

<p class='sr-only'>Hi I should only be accessible by screen readers.</p>
<p class='alert alert-primary' role="alert">Pro Tip (?) : You won't be able to see the text above unless you are a screen reader.</p>

CSS

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

Demo

Hi I should only be accessible by screen readers.

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹