Re: objects as links

Interesting subject. Could you make a Codepen (or JS fiddle or whatever) so we can play around with it a bit?

Kind regards,

Gijs

---
Gijs Veyfeyken
AnySurfer - towards an accessible internet
http://www.anysurfer.be/en <http://www.anysurfer.be/en>
Brussels - Belgium

> On 29 Nov 2016, at 16:16, Michael A. Peters <mpeters@domblogger.net> wrote:
> 
> 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.
>