Screen readers dont say what buttons are


(BIlly) #1

Ive set the role to “button” and added Alternate text “Click here to continue” in the Accessibility options for a textured button inside a symbol. But screen readers just says “button”. Why isn’t it saying the alternative text?

Do I need to put “Click here to continue” in role as I tried that and it worked but it invalidates w3c.


What screen reader are you using? I think the reader can ‘read’ either the role or the Alt text based on its settings.

(BIlly) #3

Sorry for late reply. Christmas hols and all that! Currently using Macs (10.10.5) built in screen reader (Apple key & F5 to start it). It happens in Windows 10 too though.

It’ll just say “button”, then after about 8 seconds or so hovering it, it’ll then say "You are currently on a button, inside of HTML content. To click this button, press Control-Option-Space. , The help tag is: Continue

Is there a way to have it just read the alt tag? The role needs to be button as it calls it “group” instead of button.

Cheers for any help.

(Mark Hunte) #4

To ensure users making use of screen readers can ‘tab’ to your elements, use the Tab Index value in the identity inspector.

For screen readers -> Tab Index value in the identity inspector

This will use the InnerText/HTML of the Button

So if you button is ‘Submit’

It will say ‘Submit, Button’ …blah,blah,blah

For image-based content, make sure you add a description in the ‘Alternate Text’ field for that element in the Identity Inspector.

For image-based content -> ‘Alternate Text’

(BIlly) #5

Hi Mark. I already have set the tab index and alt tags. The buttons dont use images, and the button doesnt have text, its an html code of an arrow eg: ›

(Mark Hunte) #6

This html code →
for a → works for me?

It says right arrow


(BIlly) #7

Doesnt say anything for my arrow as its a custom font. I think Ill have to make it an svg image instead. Thanks.

(Mark Hunte) #8

I just tested again with a custom font, worked. I am not sure why a font would hinder this?

Can you share an example project with the font?

(BIlly) #9

The text in my button is a unicode: 

I didnt replace the standard arrow in the standard font map. Svg will be ok, just have to lose smooth colour transition of hover.

(Mark Hunte) #10

Why do you need to use that unicode?.

You can also use HTML enities, Which as with the Html code picks up the font

↓ = ↓