I’m not even sure that this is possible, but I’ve been asked to use this graphic library in a page, and in an attempt to make it screen reader friendly, I’m trying to find some way to describe each image. As a screen reader user myself it would be rather nice to have alt tags or aria labels associated with each image. Here’s an example of what I’ve done so far. Needless to say it doesn’t work:
Is it just not possible, or have I done something wrong.
As always many thanks for any help.
I just started getting into this myself as I want to expand my users/visitors.
<i class="ph ph-smiley" style="font-size:20em" aria-label="Smiley face"></i>
<i class="ph-fill ph-heart" style="color: hotpink" aria-label="Heart icon"></i>
<i class="ph-thin ph-cube" aria-label="Cube icon"></i>
Maybe something like this?
Hi @pepster64,
That didn’t work I’m afraid, but people like yourself who are trying to make their material more accessible should be actively encouraged. Get back in touch if you need your site tested with a screen reader from someone who uses one all the time.
Thanks again.
I would add the text as normal html in perhaps a span and then use the visually hidden class to hide from prying eyes.
Screen readers read the text but those with eyes see the icon only.
This might be the solution, but not entirely sure how you’d implement it in the context of my current code. As I arrow through the controls, I need it to speak the description of the graphic as I focus, so can I insert the visually-hidden text into the syntax for the graphic. Once done, this won’t be a problem, as I’m writing a function to display such graphics. Learning curve moment, never realized this class existed. Thanks.
The basics are just like you had but with a span in the middle.
<i class="ph ph-smiley" style="font-size:20em" ><span class=“visually-hidden”> Smiley Face Icon</span></i>
Then add the css for that class.
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
The screen reader will behave as if that was normal text.
(Note that the alt attribute is only for images or elements that show replaced content. )
@PaulOB, This works perfectly. It remains for me just to wrap this in a <a Href tag, and I can make my menus graphical, and I can test them myself.
@pPaulOB,
Sadly, when I wrapped this in a link, it doesn’t seem to work. With no sight, I can’t really see what’s going on, but:
www.ethelwivic.uk/graphtest.php
will show you what happens. It might not be down to the code you advised me to add, more likely, it’s the script which processes the graphics.
Any hints as to what might be wrong would be much appreciated.
That link doesn’t seem to exist.
Not Found
The requested URL was not found on this server.
I’d need to see what html you have produced to see whats going on.
Sorry, should be:
www.ethelwivic.uk/Graphtest.php
Thanks.
Ok I’ll take a look tomorrow as not on my desktop at the moment
OK, I captured the html generated by the script. I can’t see anything wrong myself, but may help.
<a href="index.php"><i class="ph ph-smiley" style="font-size:20em" ><span class=“visually-hidden”>large smiley face</span></i></a>
<a href="index.php"><i class="ph-fill ph-heart" style="font-size:15em" ><span class=“visually-hidden”>Medium sized heart</span></i></a>
<a href="index.php"><i class="ph-thin ph-cube" style="font-size:10em" ><span class=“visually-hidden”>Small cube</span></i></a>
On your link above you have no styles for the visually hidden class, Also you have a large font-size for the icons and I don’t think they will display correctly at that size.
It is declared in the CSS. It is right, I think…
It wasn’t applied in the link you sent previously
The codepen seems to be working but you need to add display:block to the anchor or you wont see the icons.
Yup, my bad. Where should I place the display:block, as part of the visually hidden class, or as part of a separate class for links?
Add a special clases to those anchors only and use that for the display rule. l
I also note that you had set speak:none on that other page for anchors. You may need to override that.
OK, I’ve altered the a:link definition like so:
I hope that fixes it. Had it been left to me, I wouldn’t have had graphics, but the customer is always right… I have difficulty testing such things, and once it’s right, I’ll write a function to deal with each graphic. Your patience is epic!
You are using the wrong quotation marks so the class is not being implemented.
Use this:
class="visually-hidden"
Also add speak:normal
to the visually-hidden class as you have the parent i
element set to speak:never
.
e.g.
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
speak: normal;
}
OK, I’ve now made those changes. YOu shouldn’t see any text, and specifically with graphics, you should see a smiley face followed by a heart followed by a cube.
The speech side of things appears to work. For future reference, you can test alt aria and hidden text by firing up narrator with contorl-windows-enter. When you use the arrow keys to focus an image or link coded in this way, you should hear the descriptive text spoken.
According to MY AI assistant, the heart and the smiley show up fine, but it struggles with the cube.
Very many thanks.