0

So I've made this element using htmls/css

enter image description here

Now the html for this is just a div containing five spans

<div>
  <span>Design</span>
  <span>Implement</span>
  <span>Test</span>
  <span>Optimize</span>
  <span>We are here</span>
</div>

However, this won't be understandable for a screen reader as it won't know where "we are here" is pointing.

If this was an image, I could have just added an alt attribute like alt="we are in the test phase" but since I can't use alt on a div, what do I then do?

Boris Grunwald
  • 2,602
  • 3
  • 20
  • 36
  • Use some semantic HTML that will add value to your items. and add the message inside the container that is your current item so that it reads naturally out. That's way better than adding an aria title here – Dominik Dec 12 '20 at 23:53
  • What I did now was add role="text" on the div and then an arial-label describing which phase we are in. – Boris Grunwald Dec 12 '20 at 23:58
  • 1
    `role="text"` is not official and has pretty poor support. Your better bet would be to hide the div containing the spans entirely from screen readers using `aria-hidden="true"` and then use a paragraph with some [visually hidden text](https://stackoverflow.com/a/62109988/2702894) to describe the current phase. – GrahamTheDev Dec 13 '20 at 12:11
  • 1
    @GrahamRitchie After googling a bit around, that is actually exactly what I ended up doing. Since bootstrap is part of the project, I could use the handy "sr-only" class. – Boris Grunwald Dec 13 '20 at 20:19
  • 2
    [The answer I linked in my previous comment](https://stackoverflow.com/a/62109988/2702894) explains why you should use that class that I added rather than `sr-only` class. You could always just update the bootstrap `sr-only` class with the missing items and remove the negative margin from it. Either way though glad you got a solution, kind of annoying this got closed as I don't think the linked answer covers the actual best way for you to do this. Good luck in the project. – GrahamTheDev Dec 13 '20 at 20:34
  • I saw that. I've instead used your class now. – Boris Grunwald Dec 13 '20 at 21:10

0 Answers0