Search code examples
htmlcssaccessibility

Is it accessible to style button tags to look like links?

I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.

I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.

My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).

I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).

Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?

Here is the typical markup for single page apps

<div>
    <nav>
        <ul>
            <li>
                <button data-name="Skills">Skills</button>
            </li>
            <li>
                <button data-name="Projects">Projects</button>
            </li>
            <li>
                <button data-name="History">History</button>
            </li>
            <li>
                <button data-name="Employment">Employment</button>
            </li>
            <li>
                <button data-name="Contact">Contact</button>
            </li>
        </ul>
    </nav>

    <div id="content-panel">
        Home
    </div>

</div>

The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.

Solution

  • For those who stumble across this, please don't use <a> without an href, it results in an element that is not longer focusable with the keyboard.

    The following fiddle shows this. Try using Tab to focus the links.

    You could obviously add tabindex="0" to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.

    <div>
    <nav>
        <ul>
            <li>
                <a data-name="Skills">Skills</a>
            </li>
            <li>
                <a data-name="Projects">Projects</a>
            </li>
            <li>
                <a data-name="History">History</a>
            </li>
            <li>
                <a data-name="Employment">Employment</a>
            </li>
            <li>
                <a data-name="Contact">Contact</a>
            </li>
        </ul>
    </nav>

    <div id="content-panel">
        Home
    </div>

</div>

    If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.

    There are a few things you should consider:

    1. When each section is shown you should update the URL on the site via JavaScript.

    2. If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.

    3. On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()

    4. For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>

    I have a reasonably long answer with a bit more detail of this technique here that explains why.

    To answer the original question finally!

    You can style a button to look like a link. However consistency across a site is key.

    So make sure that if that is the styling you use for buttons that the majority of buttons look the same.

    Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.

    This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.

    However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.