Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Samuel Fortunato
20,229 PointsWhy use a screen reader class instead of just display: none?
Why would you use a complicated looking .srt class? Why not just use display: none? The tag stays in the markup, but is just completely hidden. That accomplishes the desired result, no?
2 Answers
Aaron Loften
12,864 PointsIm guessing that display: none; would prevent a screen reader from reading it.
display: none; acts as if it is not there, even though it is part of the document creation.
Im assuming this means a screen reader would assume a user should not see it.
MDN mentions this pretty well under the display and none definition... "Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off."
Though they dont mention the screen-reader in their description, the goal of a screen reader is to read the screen and describe it to the user. If there is something not on a screen, it shouldnt be described....unless....it is on the screen but invisible. Because technically, something invisible is being displayed. When using display none, it is not invisible, it is actually rendering the page as if the element has been removed completely.
^^>>Its about mid-way down the page.
jlampstack
23,932 PointsI am guessing for two reasons. Firstly, so people who are using screen readers (perhaps they don't see the best), so that the screen reader can read the name of the logo to them. Atria attributes are good for this as well. I am also thinking it may help with SEO.
Samuel Fortunato
20,229 PointsSamuel Fortunato
20,229 PointsGotcha. Thank you. Was always under the impression that
display: none;just hides the element & takes away the space it occupies.Makes me think: why should CSS have control over whether or not a screen reader reads an element? CSS is a styling language, not a functional one. If anything, this functionality should be relegated to an HTML attribute, that defines something as a tag/content not to be read by screen readers.
Aaron Loften
12,864 PointsAaron Loften
12,864 PointsSamuel Fortunato - You are not wrong.
There are several ways to do it. Aome people will use a specific set of attributes that a lot of modern scren readers can recognize. The problem with that would be consistency. If you come on to a team who is not doing it all the time, you may have issues implementing the attribute approach since full pages would need evaluation.
I personally prefer the attribute method as its becoming a standard and is definietly a standard for ALL websites serving a government funded client. The government requires aria attributes.
You should look into it. :)
Its important to know both ways but even more important to be consistent in your approach.
Samuel Fortunato
20,229 PointsSamuel Fortunato
20,229 PointsAh, right. Aria attributes.
Would be great if all screen readers/assistive technologies worked so
display: none;was purely visual, andaria-hiddenmeans to not display content to screen readers. As I said before, CSS should remain strictly a styling language, and HTML would be in the realm of defining or describing content. Don't know if there's plans to standardize the hiding elements thing, though, and I'm not sure where to find out. :P