Learn Accessibility by Building a Quiz

HTML-CSS
1

As I was writing the html for the first part of the quiz where we gather student’s info, I needed to add a text (Date of Birth) next to D.O.B in such a way that only a screen reader could read it and it wasn’t visible on the screen.

This was the HTML code:

<div class="info">
            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>

I was straightaway provided with the following properties to use in CSS:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Now, I understand that this was done so that the text (Date of Birth) is not visible on the screen and only readable by a screen reader. But the problem is I just copied a block of code without understanding what I was doing. I understand why height and width = 1px, padding and border = 0px and margin = -1px. I’d assume it’s so that we can’t see it. But beyond that, I haven’t come across any other properties in my projects so far and really can’t understand what white-space: nowrap, position: absolute and clip: rect(0, 0, 0, 0) are doing. Is it something I am meant to study later? if not, please help! :pray:

2

Do you absolutely need to understand what every property is doing in order to hide the text visually? Probably not. This is a common thing to do and there is an accepted, standard method of doing it that has been well tested over the years. So you can be confident that it works and don’t technically need to know every detail about how it works.

But if you are interested in how this works, here are a few articles that will explain it.

The anatomy of visually-hidden
Inclusively Hidden

1 Like
3

Ah okay, got it! It’s just that most of the times I heard interviewers say they’d have programmers who were writing code but didn’t know why they were writing it. So, I thought I am being one of those people by just copying the code :slight_smile:
But, I get what you’re saying. If anything, it’s a little comforting, haha. And also, thanks for still providing me with the explanation. Perhaps, by brainstorming it, I’ll be able to have it at the back of my head. Just noob mistakes :sweat_smile:

4

Definitely don’t stop being one of those people who wants to understand everything they code. Curiosity is one of the most important traits a programmer can have. I think your question in this thread was excellent. I don’t think FCC likes to link to outside sources in their curriculum, otherwise I would push to add a link to the first article I gave you. Also, FCC tries to limit the amount of content in each step, so they just don’t have room to add a complete explanation for all the properties used to visually hide text.

I think the important thing here is that you understand the concept of visually hiding text and that there is a standard accepted method for doing it. I’ll be honest, I don’t have all the properties used in this class memorized. Whenever I need to create the sr-only class for my project I always pull up the first article I gave you and copy/paste from that. I don’t think that makes me a bad programmer. And if I was ever asked in an interview to create the sr-only class from memory I would forget several of them and I would be asking the interviewer why they thought it was important I have this memorized (implying that it is not).

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.