結論
個人的最適解です。
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:
おわりに
個人的ベストプラクティスでした。
「仕様の解釈ちがうぞ！」「もっとこっちのほうがいいぞ！」「そんなんじゃぜんぜんだめだ！」
などありましたらどしどしくださいませ。