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

Sean Warrener
Sean Warrener
4,398 Points
Posted by Sean Warrener
Sean Warrener
4,398 Points

Is there another attribute that could be used instead of title for the attr() pseudo class?

I thought of this while going through the attr() portion of this lesson:

While we were using the title attribute for this demonstration, are there any alternate attributes that would yield the same results, but not make your content look shoddy if you were to say roll over a hyperlink.

This became apparent to me when I was on the test page from the workspace and when I let my cursor roll over the hyperlink displaying " - JPG" or " - ZIP". Now I really like the concept of using a pseudo element to display the download type rather than typing out the extensions every time there's a download (I had to do that at my old job in some instances, and in hindsight: it looked rough).

There was one problem I had with using this method with the title attribute: Usability. Not having a descriptive title or alt text on your hyperlinks are amateur and are certainly not 508 compliant (i.e. people who need screen-readers to view content will have a bad time on your site).

Is there any alternative attribute to use instead of the title? My first guess was using the ID if you mostly use classes to design, but I also know that you can only use one ID on a page then that may be problematic.

Any suggestions?

1 Answer

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Since your post isn't tied to a specific video or challenge, it's hard to say specifically. You can take a look at this list of attributes, but I don't think there's a tooltip kind of attribute that is specifically hidden from screen readers.

You could try something like the following CSS to prevent an overlay element with the tooltip from being seen by such assistive devices. Support seems kind of spotty though.

@media reader, speech, aural {
    exampleElement {
        display: none;
        visibility: hidden;
    }
}

Sorry I don't have a better answer. You're right that it's important to consider the implications your coding choices have on those who require assistive devices.