Re: objects as links

On 11/29/2016 03:41 AM, Joe Chidzik wrote:
>
>> If #topbanner bad is wider than the image, a usability bug is introduced.
>> Because the image is a child of the anchor, the anchor is not limited to physical
>> screen space of the image and (at least in some
>> browsers) empty white space to the right and left of the image will trigger the
>> anchor.
>
> Have you styled the <a href> element as a CSS block level element? This would cause it to include white space around the image, but inside the <a> element, as clickable and part of the link. To resolve, just make sure <a href> is styled as CSS display: inline.
>
> Otherwise, as per Chaals' reply, this sounds like a browser bug issue. What does the browser inspector say about the whitespace around the element; is it selectable as part of the <a href> element when using the inspector object selector?
>
> Joe
>
>

Not sure what happened to my reply to the list but the image is styled 
as a block level element, that's needed to get the margin: auto; to work 
because CSS is a crappy language for layout. Great for styles, horrible 
for layout.

But in my response that got eaten, this is only an issue because HTML 
does not allow the link to be a property of the object the user is 
interacting with but requires the link be a propery of a parent of the 
object the user is interacting with (specifically an a element)

The white space on either side of the image is also seen as a child of 
that parent, hence the UX issue.

If I fix the flaw in HTML by using JavaScript to make the link a 
property of the object, it then causes an accessibility issue because 
pop-up blockers don't treat onkeydown the same as they treat onclick.

That's the issue I'm trying to solve.

Personally I'd just like to get rid of the a element all together and 
just allow href to be an attribute of any object a user can interact 
with (including span to cover text links) but I doubt that will ever happen.

Received on Tuesday, 29 November 2016 15:17:11 UTC