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.


<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>


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

Hi I should only be accessible by screen readers.

Other Items in css
Page Views

This page has been viewed 307 times.

Search Code
Search Code by entering your search text above.

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.


Random Quote
time you enjoyed wasting is not wasted time