Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Accessibility - 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
Tim Knight
28,863 Points

Gonzalo,

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
Gonzalo Blasco
11,927 Points

Thanks, Tim Knight. I'll try it tomorrow when I'll get to work. I'll let you know.

Tim Knight
Tim Knight
28,863 Points

No 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
Gonzalo Blasco
11,927 Points

Good, 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
Tim Knight
28,863 Points

Gonzalo,

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
Gonzalo Blasco
11,927 Points

Tim, it works. You are my savior. Thanks. :)

That last tip just nailed it.

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Tim, it works. You are my savior. Thanks. :)

That last tip just nailed it.

Tim Knight
Tim Knight
28,863 Points

No problem at all. I'm glad that worked for you!