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.

Other Items in css
Page Views

This page has been viewed 66 times.

Search Code
Search Code by entering your search text above.
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.

❤👩‍💻🕹