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
Gonzalo Blasco
11,927 PointsAccessibility - Reader tip
Hi everybody. Please, I need a little help.
I'm trying to create a reader tip to a heading. What I mean is:
- Using Voice Over on Mobile, I'm trying to allow the user to lisent a description of the section without being all that text being display (just the header). I was able to use this practice inside forms (using the label moved way out of side), but it doesn't look to be working with a Heading 1 (or any element that contain text).
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Accessibility Test<span class="hidden">Hidden Test</span></h1>
Phone number:
(
<label for="area" class="hidden">Area Code</label>
<input name="area" id="area" type="text" size="3" maxlength="3">
)
</body>
</html>
This is an example about what I'm trying to do.
The tip reading 'Area Code' it's being read, but the tip reading 'Hidden Test' it's only read when I pass to the next element.
Any help?
2 Answers
Tim Knight
28,888 PointsGonzalo,
So I just wanted to be clear... you want "Accessibility Test Hidden Test" to be read as one line is that correct? I don't think you're going to be able to get it to read as one sentence like that because the user is going to have to navigate through the Accessibility Tree. Where hidden text like this can really be helpful would be on links or buttons. You'll noticed that if you change your h1 to a button or a link it'll read everything collectively. Also I don't tend to position screenreader text off-screen. Something like this below leaves the item in the same position in the DOM while basically making it invisible.
.hidden {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Gonzalo Blasco
11,927 PointsTim, it works. You are my savior. Thanks. :)
That last tip just nailed it.
Tim Knight
28,888 PointsNo problem at all. I'm glad that worked for you!
Gonzalo Blasco
11,927 PointsGonzalo Blasco
11,927 PointsThanks, Tim Knight. I'll try it tomorrow when I'll get to work. I'll let you know.
Tim Knight
28,888 PointsTim Knight
28,888 PointsNo problem Gonzalo, just keep in mind that my CSS suggestion won't actually change out the information is being read because the information is still going to be read down the structure of the accessibility tree.
Gonzalo Blasco
11,927 PointsGonzalo Blasco
11,927 PointsGood, but not what I'm looking for. Thanks, anyway.
What I need is to 'extend' the readable text (with the content inside the span) without making the user have to change to other element. Invisible text you can call it.
Tim Knight
28,888 PointsTim Knight
28,888 PointsGonzalo,
I understand what you're asking for. What I'm saying is... as structured most voiceover or screenreaders will not read something from another element within the parent without user interaction. The Accessibility Tree in how screenreaders parse content is basically the same thing as navigating through the DOM and it navigates each node at a time. Depending on the context of the accessibility specific content you're trying to add however what about adding a title attribute to your h1 to describe more information? That content is typically read prior to assistive tech identifying the type of field you're looking at. So for example:
<h1 title="Hidden Test">Accessibility Test</h1>Would produce the auto on desktop readers like:
"Heading level 1, Accessibility Test. Hidden Test, you are currently on a heading level 1, inside of HTML content."
Using the iOS Accessibility Tools for iPhone it reads:
"Accessibility Test, Heading level 1, Hidden Test"
Gonzalo Blasco
11,927 PointsGonzalo Blasco
11,927 PointsTim, it works. You are my savior. Thanks. :)
That last tip just nailed it.