結論

個人的最適解です。

See the Pen hamburgerMenu by Men_Tori (@ueda-kio) on CodePen.

ポイント

デザインである横棒は擬似要素で実装
ボタン内にテキストを持たせ、ボタンの目的を表す
type="button"をしっかり書く

よくあるやつ

見た目・機能は全く同じです。

See the Pen hamburgerMenu__notGood by Men_Tori (@ueda-kio) on CodePen.

よくないポイント

デザインを空要素（span）で実装している
button要素にアクセシブルなテキストがセットされていない
デフォルトのtype="submit"になっている

気をつけたいポイント

1. デザインの実装はCSS or 擬似要素で行う

よくある実装の方では、デザインである横棒をspan要素で実装しています。が、基本的にデザインの実装はcssのみで行い、それでは実装が難しい場合でも、空要素をおくのではなく擬似要素で実装するようにしましょう。
HTMLの仕様上では、ほぼすべての要素が該当するパルパブルコンテンツは、空要素ではいけないという仕様となっています。
HTML Standard - パルパブルコンテンツ

…コンテンツ内に少なくとも1つのノードを持つべきである。これがパルパブルコンテンツであり、hidden属性が指定されていない。

ということで、空のspan要素でデザインを実装することは避けましょう。

【余談】

div.spacerみたいな空divで余白を取る実装があると考えてみてください。とっても違和感＆奇妙に感じますよね👀
空のspanでハンバーガーを実装することもこれくらい奇妙に私は感じます。

2. `button`要素にアクセシブルなテキストを挿入する

button要素やa要素などには、その目的を表すアクセシブルな（識別可能な）テキストが必要です。テキストが含まれていないbutton要素はいけませんよ〜、ということですね。
ということで、button要素内は空っぽにせず「メニューを開く」などのテキストを入れておきましょう。
（詳細は避けますが、アクセビリティAPIに伝わればよいので、aria-labelでもよきです）

▼ devtoolによってはおこってくれます

3. `button`の`type`属性を省くと`type="submit"`扱いになる

button要素のtype属性は3種類あり（参考）、初期値はsubmitとなっています。
ハンバーガーメニューはもちろん送信ボタンではないので、type="button"を明示したほうがよいでしょう。

とはいえ、親要素にform要素が存在しないbutton要素の場合は処理が自動でreturnされますが、それでも明示した方がよいと考えています。

A button element element's activation behavior is:

If element is disabled, then return.

If element does not have a form owner, then return.

If element's node document is not fully active, then return.

Switch on element's type attribute's state:

おわりに

個人的ベストプラクティスでした。
「仕様の解釈ちがうぞ！」「もっとこっちのほうがいいぞ！」「そんなんじゃぜんぜんだめだ！」
などありましたらどしどしくださいませ。