Buttons not working in certain browser versions?

[OpenGlobe]

Are buttons like "sites with plastic passes" and "field trip sites" here not working in Firefox 40.0.3 or IE 11?

[egolubUMD]

Looking at the HTML one thing I noticed was that for the ones on that page, the anchor tags were inside the pair but on others that did work for me, the anchor tags surrounded the button tags and text.

I did a quick local modification and switching it so that it was changed from being:

       <button>
            <a href="/plan-your-trip/pass-exchange/">Sites with plastic passes</a>
       </button>

to being

       <a href="/plan-your-trip/pass-exchange/">
          <button>Sites with plastic passes</button>
       </a>

made it work for me on Firefox.

[toolness]

In IE11, it depends on where the click occurs--if it's within the <a>, e.g. on the text, then the link is activated; but if it's in the area around the text provided by the <button> styling, then the button is activated.

One disadvantage of nesting a functional link within a "purely decorative" button (or vice versa) is that, while it may be okay for visual users who use a mouse/touchpad, it still results in two separate interactive elements in the browser, which means that the decorative button can still be focused via the tab key, and accessed via screen readers, creating a confusing experience for non-mainstream users. A more accessible solution may be to simply allow <a>s to be styled like <button>s via a class, similar to what Bootstrap and other CSS frameworks do.

I could give this a try if you're interested.

[egolubUMD]

I guess my suggestion would be to make the short-term quick change I mentioned above to (hopefully) give mainstream Windows users working buttons with just a few minutes changing/testing (perhaps for Labor Day weekend site visitors) and then explore the approach of changing the anchor styles via a CSS class in case that change would take longer to implement and test.

However, looking at the HTML for the buttons at the top of the page (such as "How it Works" and "Get Your Pass") those appear to be anchors that get their button look via a CSS style, so it might not be too big a job to adapt that approach. The CSS file online had its formatting removed though, so I can't get a good feel of how easy or hard that might be to make that change (and then find all of the buttons that are currently done with the <button> tag).

[xtine]

The button link order on Plan Your Trip has been updated.