Screen readers dont say what buttons are

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.

2

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

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.

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’

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: ›

6

This html code →
for a → works for me?

It says right arrow

Codes

7

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

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?

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.

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

↓ = ↓