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

CSS CSS Selectors Advanced Selectors The attr() CSS Function

jocelyn alsdorf
jocelyn alsdorf
22,454 Points

How are advanced selectors like attr() handled by screen-readers? Will they negatively affect a site's accessibility?

I am wondering if the content would be read by the screen reader like any other html content. Any info would be super appreciated!

Liam Maclachlan
Liam Maclachlan
22,805 Points

I would say not. I would consider it to be a variable with a value and I'm confident to say that the screen reader would be able to get the value from what is rendered on screen (even though it is not part of the DOM).

I'll set up a test page and check if it works later (off to work) and let you know 100% :)

EDIT:

Wow. Turns out I'm wrong. It really does affect the accessibility of a site. They cannot select it as an element to read out, even if you try to insert it between 2 tags. Probably best to not use it if it is am integral part of the experience then :)

jocelyn alsdorf
jocelyn alsdorf
22,454 Points

That would be excellent. I appreciate you taking the time!!

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey again.

Check my appended response above. I don't think think it is possible for a screen reader to see that data. Safe to assume, if it is not on the HTML page source it cannot be picked up by a reader :)

jocelyn alsdorf
jocelyn alsdorf
22,454 Points

Thank you for figuring it out! I'm trying to build good habits from the start so knowing this is important!! :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

By the way, this topic has been incredibly useful in another are of coding

I was trying to run an integer through a jQuery application, from a value within some h3 tags. After having some issues with the % sign being in the tags. Just set an ::after rule and all my troubles were gone.

The jQuery didn't pick it up, so making a sting an integer was much easier, and it is automatically added exactly where I needed it to be :)

So thanks for the question as it really solidified the purpose of the ::after pseudo class in CSS for me :)

Joshua Graber
Joshua Graber
11,785 Points

I had the same question, thank you!