WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Do Web developers tend to dislike the button element?

for

Number of posts in this thread: 7 (In chronological order)

From: jeffgutsell
Date: Wed, Aug 12 2020 1:09PM
Subject: Do Web developers tend to dislike the button element?
No previous message | Next message →

My credit union has had a fairly accessible Web site for several years. So,
I was surprised recently when a site update included replacing the login
button with a span "button" that was inaccessible. They fixed this after I
complained, but it once again got me to wondering why so many developers
like to use a span for this. Aside from accessibility concerns, it seems
like the button element is less work for the developer.

So, why do span buttons refuse to die? Is it that developers have some
dislike of buttons elements?

Jeff Gutsell

From: glen walker
Date: Wed, Aug 12 2020 1:16PM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | Next message →

Most developers are lazy (I'm one), although "efficient" is probably a
better term than "lazy". I will always use code that's simpler and that
typically means using a button. However, if I had code that used a <span>
for a button and I copy/paste that code to my new page rather than writing
a button from scratch, that would be one reason it keeps propagating. But
I wouldn't intentionally change a real button to a span button.

On Wed, Aug 12, 2020 at 1:09 PM < = EMAIL ADDRESS REMOVED = > wrote:

> My credit union has had a fairly accessible Web site for several years. So,
> I was surprised recently when a site update included replacing the login
> button with a span "button" that was inaccessible. They fixed this after I
> complained, but it once again got me to wondering why so many developers
> like to use a span for this. Aside from accessibility concerns, it seems
> like the button element is less work for the developer.
>
> So, why do span buttons refuse to die? Is it that developers have some
> dislike of buttons elements?
>
> Jeff Gutsell
>
> > > > >

From: Jeremy Echols
Date: Wed, Aug 12 2020 2:03PM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | Next message →

I'm extremely lazy myself, and I tend to just argue against the use of "custom widget" types of buttons. Because not only are they hard to make accessible, but they're extra work to make them clickable in the first place. A button just works as is.

If I had to guess, I'd say perhaps as Glen suggests it's a copy and paste issue. If not, maybe it's a JS framework that attaches lots of behaviors to custom elements, and is behind the times, so it just tosses spans everywhere and uses classes and data attributes to implement functionality. A third possibility is that the dev discovered some crazy CSS trick that seemed difficult to implement on a button, so they coded a span element instead.

I guess there are a variety of reasons why a developer might do this... but every reason I can think of seems pretty iffy even if a dev doesn't know anything about accessibility.

From: Patrick H. Lauke
Date: Wed, Aug 12 2020 2:35PM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | Next message →

Historically, <button> elements used to be very stubborn against
restyling cross-browser. One of the last annoying issues nowadays is in
IE11 (where still supported by a site), where by default <button> has a
visible "dipping" behaviour of one or two pixels when active, and it
needs a lot of fiddling (last time I looked, including an additional
wrapper element) to get rid of that.

There also used to be some funky behaviour when it came to events,
bubbling, etc in some browsers. That has luckily gone by the wayside now...

Because of this history, a lot of articles, how-tos, libraries, etc used
other elements like <a href="#"> or <span>s and <div>s...and this
tradition stuck.

--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Swift, Daniel P.
Date: Thu, Aug 13 2020 7:00AM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | Next message →

I also remember running into functional problems with older versions of IE and the button element. I can't remember what the specific problems were (going back 5 or so years), but it was enough of a show stopper that we could not use them.

Dan Swift
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Wednesday, August 12, 2020 4:36 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Do Web developers tend to dislike the button element?

Historically, <button> elements used to be very stubborn against
restyling cross-browser. One of the last annoying issues nowadays is in
IE11 (where still supported by a site), where by default <button> has a
visible "dipping" behaviour of one or two pixels when active, and it
needs a lot of fiddling (last time I looked, including an additional
wrapper element) to get rid of that.

There also used to be some funky behaviour when it came to events,
bubbling, etc in some browsers. That has luckily gone by the wayside now...

Because of this history, a lot of articles, how-tos, libraries, etc used
other elements like <a href="#"> or <span>s and <div>s...and this
tradition stuck.

--
Patrick H. Lauke

https://www.splintered.co.uk/<https://www.splintered.co.uk> | https://github.com/patrickhlauke<https://github.com/patrickhlauke>
https://flickr.com/photos/redux/<https://flickr.com/photos/redux> | https://www.deviantart.com/redux<https://www.deviantart.com/redux>
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Mallory
Date: Fri, Aug 14 2020 6:20AM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | Next message →

One issue I remember with IE and buttons was a thick black outline which was difficult to remove. It only appeared in a certain state or situation, but it had plenty of its own threads in forums.
Another issue which hit IE7 and 8 (but I don't think 9+) was most buttons are inline-block but in IE they'd be full width like a block. The solution was to add two lines of CSS (overflow: visible plus width: auto), but if you didn't know it would work with those 2 lines, it was a lot of frustration, lol.

cheers,
_mallory

On Thu, Aug 13, 2020, at 3:00 PM, Swift, Daniel P. wrote:
> I also remember running into functional problems with older versions of
> IE and the button element. I can't remember what the specific problems
> were (going back 5 or so years), but it was enough of a show stopper
> that we could not use them.
>
> Dan Swift
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: Wednesday, August 12, 2020 4:36 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Do Web developers tend to dislike the button
> element?
>
> Historically, <button> elements used to be very stubborn against
> restyling cross-browser. One of the last annoying issues nowadays is in
> IE11 (where still supported by a site), where by default <button> has a
> visible "dipping" behaviour of one or two pixels when active, and it
> needs a lot of fiddling (last time I looked, including an additional
> wrapper element) to get rid of that.
>
> There also used to be some funky behaviour when it came to events,
> bubbling, etc in some browsers. That has luckily gone by the wayside now...
>
> Because of this history, a lot of articles, how-tos, libraries, etc used
> other elements like <a href="#"> or <span>s and <div>s...and this
> tradition stuck.
>
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/<https://www.splintered.co.uk> |
> https://github.com/patrickhlauke<https://github.com/patrickhlauke>
> https://flickr.com/photos/redux/<https://flickr.com/photos/redux> |
> https://www.deviantart.com/redux<https://www.deviantart.com/redux>
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > http://list.webaim.org/<;http://list.webaim.org>;
> List archives at
> http://webaim.org/discussion/archives<;http://webaim.org/discussion/archives>;
> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> > > > >

From: Patrick H. Lauke
Date: Fri, Aug 14 2020 11:00AM
Subject: Re: Do Web developers tend to dislike the button element?
← Previous message | No next message

One additional minor consideration: by default at least, content/text
inside a <button> can't be highlighted/selected with the mouse.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke