[html5] imagemap area with alt, without href

[Bill Barron]

Here is one resource that might help you get up to speed on css layout:
http://learnlayout.com/

I used to like image maps a too, but sadly (or happily) the web platform
has left them behind and has a bunch of options for laying out interesting
sites for a wide variety of user and device capabilities.

Personally, I would work this problem in several stages.

1: Start with a blank page and mock everything up in simple html and
content only with no images. Use paragraphs <p>, unordered lists <ul>,
links <a> and headers <h1> - <h7> as needed. This gives you accessibility,
but not much design.

2: Use block-level elements to group your content into meaningful sections
as necessary. Use semantic markup like <nav>, <header>, <footer>,
<section>, and <aside> to keep your content organized logically.

3: Use CSS to handle layout, position and alignment of your major content
groups and to style content within these groups.

4: Use background images (without text) to visually enhance the page for
those who are fortunate enough to be able to enjoy visual elements of a
page, and without leaving out people who are not.

5: Consider using interesting, but easy to read, fonts to achieve the text
styling you want without breaking accessibility.

6: Add images <img> as needed to enhance your content, and don't forget the
alt attribute (alt="alt text here").

Hope this helps!

Cheers,
Bill Barron



On Tue, Feb 23, 2016 at 1:09 PM, <darxus at chaosreigns.com> wrote:

> I have this page:  http://www.chaosreigns.com/
> It's one big imagemap.  My problem is handling the text in the image that
> is not links (usability for the blind / text browsers).  The obvious
> solution seems like it would be areas with alt attributes and no href
> attribute.  The spec says I can have areas without hrefs, but:
>
> "If the area element has no href attribute, then the area represented by
> the element cannot be selected, and the alt attribute must be omitted."
> https://html.spec.whatwg.org/#the-area-element
>
> Could the spec be changed, to allow an area with an alt and no href?
>
>
> I've also tried it with image slicing and a table:
> http://www.chaosreigns.com/index.slice.html
> It works, but seems more problematic (chrome glitches while zooming, at
> least).  And everybody says tables are terrible for layout, but I haven't
> figured out how to do this without tables:
>
> <Darxus> Is there some kind of guide to do this with a sliced image, and
>          CSS instead of a table?
> <preaction> no, since that's really not the point of CSS
> - #css on freenode (which I realize is far from authoritative)
>
>
> Also, the links to the web page for this mailing list, both from its own
> welcome message, and https://about.validator.nu/#reporting-bugs are
> broken.
> A usable URL is https://whatwg.org/mailing-list
>
> On 02/21, help-request at lists.whatwg.org wrote:
> > Welcome to the Help at lists.whatwg.org mailing list! You can feel free
> ...
> >   http://lists.whatwg.org/listinfo.cgi/help-whatwg.org
> _______________________________________________
> Help mailing list
> Help at lists.whatwg.org
> http://lists.whatwg.org/listinfo.cgi/help-whatwg.org
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20160223/5de3b27a/attachment.htm>