WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: mailto labels?

for

From: Jukka K. Korpela
Date: Jun 9, 2011 11:45PM

9.6.2011 21:34, Rick Hill wrote:

> Scenario: a page that lists information about many people.
> Each person's entry would have their name, title,
> phone number and email address.

I'd say that crucial issues around accessibility (and usability) in this
case revolve around making it clear at the start of the page (and its
title element) that the page contains such information; omitting other
content, except navigation etc., if possible; making it easy to find
information by name; and making it clear what the parts of the
information are. The more detailed setup of each person's entry is less
important, as long as it it consistent across the page and somewhat logical.

> Joe Doe
> 123-1234
> maillink

Well, your examples lack the title, and instead of specific email
addresses, you have just "maillink", but I suppose that's because you're
asking how to present the email address. Primarily, it should be simply
the address, for example
<EMAIL REMOVED>
Titles, if present, should preferably be given for all people; even a
dash, indicating lack of information about title, might be better than
simple omission, which makes the entries structurally different.

The items in the entry have no labels, saying that Joe Doe is a name
(you might think this is self-evident, but thinking of all the names
people have in the world, it's not always evident that a name is a
name), etc. For email address, its format might indicate that it is an
email address. Phone numbers are less evident, as their format varies
(by country, and by style of writing), and for all I could guess without
having seen an explanation, "123-1234" could be an employer number.

It's a matter of judgement how much labels you add to information, as
labels (like "Name:") may look foolish when looking at a large
compilation of personal data, but on the other hand, they may help people.

When there are just four fields of information per person, and no field
is particularly long (no postal addresses etc.), a table could be a good
option. After all, this is tabular data, and the column headers would
associate each cell with explanatory information. Tables aren't
inherently bad; a simple, structural table can be good for accessibility.

> If the mailink information is all related to the person's name, what
> would be the appropriate mail link text?

I would say that the email address, or mailto link, isn't really related
to a person's name but to a person. But I don't think it is important
here what the information is related to. We would have the same issue
even if the email addresses weren't personal but many people would share
the same address.

> In this case, I'm thinking it would make best sense to use
" <EMAIL REMOVED> "
> rather than "Sally Smith" since the latter is repetitive and the
former informative?

The important thing is to include the email address, as normal text
content. Some people may argue against this, saying that email addresses
on web page cause a spamming problem. (They don't. Spammers cause the
spamming problem, and people who buy from spammers. And the spamming
problem is with us anyway, and needs to be handled using filters and
other methods.)

Making the email address into a mailto link is just a convenience, and
not even without risks. Someone clicking on such a link might get upset
when he realizes that he has launched an email program he doesn't
normally use, or doesn't like, or doesn't know how to use. Usually the
added convenience to many people outweighs this risk. But the risk
emphasizes the need to use a link text that corresponds to the meaning
of the link.

And the meaning of a mailto link is really to allow sending email to a
specific address. If the link text is a person's name, then the natural
assumption is that the link points to information about the person,
typically her personal home page.

> And, how best to associate all of the person's info to their name? Headers good enough?
>
> <h3>Joe Doe</h3>
> <p>123-1234</p>
> <a href="mailto: <EMAIL REMOVED> "> <EMAIL REMOVED> </a>

I don't think the specific markup is very important, as long as it is
clear where an entry begins and where it ends. Using headings sounds
like one nice way to achieve that. I don't think it's relevant to put
the phone number inside a <p> element, and it may in fact cause
unpleasant features in rendering, like default top and bottom margins
you need to override, and perhaps a pause in speech rendering... a pause
you probably can't even override, as aural CSS is still mostly just an
unfinished and unimplemented specification.

So (assuming we're not using a table), I'd just put a forced line break,
<br>, between the phone number and the email address. It's just to make
the visual appearance better.

--
Yucca, http://www.cs.tut.fi/~jkorpela/