508 - alt text for the same icon

Question

I am working on a 508 compliant site and have the same icon used multiple times. If the user is a certified business owner, they have this icon next to their name. Currently, a screen reader reads it as certified business owner. However, if a user sets their screen reader to only listen to the images, they will just hear certified business owner over and over again.

Is there a way for them to hear Certified Business Owner - [individual's name]? I know that with read more links, it's easy to hide the information you want the screen reader to read but not have a sighted person see the same text using span tags and hidden CSS but I can't really use that code for images.

Is this possible? Or is there another way to make this work? Thanks in advance for the help!

For those of us outside your country (I'm guessing?): what's a "508 compliant site"? — Matt Gibson, Jul 28 '14 at 18:06
@MattGibson A site that is mostly compatible to the [W3C Web Content Accessibility Guidelines (WCAG)](http://www.w3.org/TR/WCAG20/). There is a similar law in Germany – the [BITV](https://de.wikipedia.org/wiki/Barrierefreie-Informationstechnik-Verordnung) which also is a subset of the WCAG. — feeela, Jul 28 '14 at 18:07
Gotcha. I know WCAG, and I guessed it was something like that, but I'd never heard of 508 (I suppose that'll be roughly equivalent to the UK's Disability Discrimination Act...) Thanks! — Matt Gibson, Jul 28 '14 at 18:09
@feeela That's a perfect government homepage: it's all about section 508, but at the same time it completely fails to tell you what section 508 actually *is* :) — Matt Gibson, Jul 28 '14 at 18:19
Hehe, yeah you need to dig a bit deeper – I guess we are talking about http://www.section508.gov/section-508-standards-guide#Web; but I always stick to the WCAG, knowing that any local laws are always subsets of that guideline… — feeela, Jul 28 '14 at 18:21
Sorry to confuse everyone. I wasn't even thinking when I posted that not everyone would be aware of what 508 compliance was! — Danielle Sheffler, Jul 28 '14 at 22:57
@feeela Section 508 from 1998 isn't also a subset of WCAG 2.0 like BITV (or [RGAA 2.2 in France and others](http://blog.powermapper.com/blog/post/Government-Accessibility-Standards.aspx)). [Differences and similarities of Section 508 with WCAG 1.0](http://www.jimthatcher.com/sidebyside.htm) (note: 1.0 has been replaced by 2.0 and is now way too old) — FelipeAls, Jul 30 '14 at 01:23
What is your current HTML markup? Why would a screen reader user choose to only listen to images? (in links or in the whole page?) Is this particular to JAWS or also other screen readers? — FelipeAls, Jul 30 '14 at 01:34
@FelipeAls The person testing will be using JAWS. And since there's a way to pull out images only, I'm trying to be prepared for all use cases, no matter how rare. And in general, a page isn't technically supposed to have the same alt text multiple times for accessibility. But in this case, it's just difficult (or at least it is in my mind). — Danielle Sheffler, Jul 30 '14 at 02:03
IMO don't worry about the image-only pull. The chances a person would pull images only is low. I would say pulling images would be a bit over-zealous on the testers side. You are right that multiple alts shouldn't be used. You can do two things 1- if some subset of the list only has this badge, you could say they are unique even though they are the same. 2- if 100% has the cert, add text above the list saying all these people have it, then null alt all the icons — Ryan B, Aug 01 '14 at 13:48

feeela · Answer 1 · 2014-07-28T18:12:45.207

-1

One way is to not use individual elements for icons, but create them as pseudo elements and set any metadata (title, ARIA roles) to the element that has the name in it.

In that case the icon is not an image or other content, but only a decoration on an already existing element.

Simplified example:

<p title="Certified Business Owner" class="icon icon-certified-business-owner">Karl Koch</p>

.

icon:before {
    font-family: FontAwesome;
    content: '\e000';
    speak: none;
}

edited Jul 28 '14 at 18:12

answered Jul 28 '14 at 18:06

feeela

29,399
7
59
71

Thank you so much for the help! I'm running into the same issue with social media icons like Twitter, Facebook, etc. since each business owner can include their social media presence. I'm assuming that I can't use the same solution in that case, correct? – Danielle Sheffler Jul 28 '14 at 22:56
@DanielleSheffler Why not? – feeela Jul 28 '14 at 22:57
I should have mentioned that I'm an accessibility analyst and not a programmer (and just learning ARIA). :) I was assuming that the code listed above was more for an icon/decoration being placed next to existing text as opposed to an actual icon. Just looking for a solution that will work everywhere since everything will be coded dynamically where it's pulling a list of people and their social media URLs from a CMS and then it will list them all out so the alt text probably needs to be created dynamically/on the fly of [person's name] FB account. – Danielle Sheffler Jul 28 '14 at 23:43
3

Be aware that the title attribute is not reliably announced by AT. – steveax Jul 29 '14 at 14:30
1

@steveax …by what? AT? – feeela Jul 29 '14 at 15:14
1

@feeela sorry, Assistive Technology. See: http://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/ – steveax Jul 29 '14 at 20:20

508 - alt text for the same icon

1 Answers1