タブを実装する際のaria-labelledbyとaria-controlsを使うメリットがわかりません

WEBサイトでタブを実装する際にaria-labelledbyとaria-controlsを使うメリットがわかりません。

以下のURLで紹介されているタブの実装方法（下記コード）では、
タブのメニューとコンテンツそれぞれにaria-labelledbyとaria-controlsが使用されています。

しかし、これらの属性を付けた場合、付けなかった場合それぞれを試したのですが、
キーボードでの操作性やスクリーンリーダーの読み上げ内容も変わりませんでした。

そうなると、わざわざこれらの属性を付与するメリットが分からないのですが、
単純によりセマンティックなコードになり、検索エンジンから評価されやすいサイトになるということでしょうか？

よろしくお願いいたします。

参考コード


<div class="tabs">
  <div role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
          First Tab
        </button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
          Second Tab
        </button>
    <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
          Third Tab
        </button>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>