HTML5で<a>要素内に<button>要素をネストできる？アクセシビリティやセマンティックを踏まえた解説

2024-05-23

HTML5 で <a> 要素内に <button> 要素をネストできるのか？

アクセシビリティ

<a> 要素は、通常、ハイパーリンクを作成するために使用されます。一方、<button> 要素は、ユーザーがアクションを実行できるボタンを作成するために使用されます。

<button> 要素を <a> 要素内にネストする場合、スクリーンリーダーなどの補助技術が、ユーザーがボタンを正しく認識できるように適切にマークアップされていることを確認する必要があります。

これを実現するには、以下の属性を使用できます。

aria-label: ボタンのラベルを指定します。
role: ボタンの役割を指定します。この場合、"button" を設定します。
tabindex: ボタンがフォーカス可能であることを示します。

例

<a href="#" aria-label="送信" role="button" tabindex="0">
  <button type="submit">送信</button>
</a>

セマンティック

<a> 要素は、通常、別のページへのリンクを作成するために使用されます。<button> 要素を <a> 要素内にネストする場合、ユーザーは、クリックすると別のページに移動するのか、それともアクションを実行するのかを混同する可能性があります。

そのため、<button> 要素を <a> 要素ではなく <form> 要素内にネストすることを推奨**します。

<form action="/submit" method="post">
  <button type="submit">送信</button>
</form>

その他の注意点

<button> 要素を <a> 要素内にネストする場合、<button> 要素のデフォルトスタイルが <a> 要素のスタイルに上書きされる可能性があります。
JavaScript を使用して、<a> 要素のデフォルト動作（ページ遷移）を無効にする必要があります。

HTML5 では、<a> 要素内に <button> 要素をネストすることは可能ですが、アクセシビリティ、セマンティック、その他の注意点を考慮する必要があります。

HTML5 で <a> 要素内に <button> 要素をネストするサンプルコード

単純なボタン

この例では、<a> 要素内に <button> 要素をネストし、ボタンをクリックすると JavaScript アラートが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>単純なボタン</title>
</head>
<body>
  <a href="#" onclick="alert('ボタンがクリックされました')">
    <button>ボタン</button>
  </a>
</body>
</html>

フォーム送信ボタン

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム送信ボタン</title>
</head>
<body>
  <form action="/submit" method="post">
    <a href="#">
      <button type="submit">送信</button>
    </a>
  </form>
</body>
</html>

アクセシビリティを考慮したボタン

この例では、<a> 要素内に <button> 要素をネストし、aria-label 属性と role 属性を使用して、スクリーンリーダーなどの補助技術がボタンを正しく認識できるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アクセシビリティを考慮したボタン</title>
</head>
<body>
  <a href="#" aria-label="送信" role="button" tabindex="0">
    <button type="submit">送信</button>
  </a>
</body>
</html>

補足

上記の例はあくまでも基本的な例であり、状況に合わせて自由にカスタマイズすることができます。
アクセシビリティを考慮した Web サイトを作成するには、WCAG 2.1 などのガイドラインを参照することをお勧めします。

HTML5 で <a> 要素内に <button> 要素をネストするその他の方法

JavaScript フレームワークを使用する

React や Vue.js などの JavaScript フレームワークを使用すると、<a> 要素と <button> 要素をより柔軟に組み合わせることができます。

これらのフレームワークでは、仮想 DOM を使用して、HTML 要素を動的に作成および更新することができます。そのため、<a> 要素のデフォルト動作を無効化したり、 <button> 要素の状態に応じて <a> 要素のスタイルを変更したりすることが容易になります。

React

import React, { useState } from 'react';

const ButtonLink = () => {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(true);
  };

  return (
    <a href="#" onClick={handleClick}>
      <button>ボタン</button>
    </a>
  );
};

export default ButtonLink;

Vue.js

<template>
  <a href="#" @click="handleClick">
    <button>ボタン</button>
  </a>
</template>

<script>
export default {
  data() {
    return {
      isClicked: false,
    };
  },
  methods: {
    handleClick() {
      this.isClicked = true;
    },
  },
};
</script>

CSS を使用する

CSS を使用して、<a> 要素と <button> 要素のスタイルをカスタマイズすることで、 <a> 要素内に <button> 要素をネストしたように見せることもできます。

a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

a button {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

SVG を使用する

SVG を使用して、<a> 要素と <button> 要素をより柔軟に組み合わせることができます。

SVG では、 <path> 要素などのベクターグラフィックを使用して、ボタンのような形状を作成することができます。また、JavaScript を使用して、これらの形状にクリックイベントをアタッチすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG ボタン</title>
</head>
<body>
  <a href="#" onclick="alert('ボタンがクリックされました')">
    <svg width="100" height="40">
      <path d="M 0 0 L 100 0 L 100 40 L 0 40 Z" fill="#007bff" />
      <text x="50" y="25" fill="#fff" text-anchor="middle">ボタン</text>
    </svg>
  </a>
</body>
</html>