[html5] imagemap area with alt, without href
bill.r.barron at gmail.com
Tue Feb 23 12:15:05 PST 2016
Here is one resource that might help you get up to speed on css layout:
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!
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."
> 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:
> 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
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the Help