HTMLのマークアップクイズをチームでやったら意外と盛り上がった

マネジメント

私の携わっているプロダクトの開発チームは、バックエンドもフロントエンドも分かれておらず、どちらもこなしていくという開発を行っています。

なので、バックエンドが得意な人でもフロントエンドのソースをいじりますし、逆も然りです。

そうなってくると、得意がない方の技術は動けばまあいいかな、みたいな意識がでてきていました。

特にhtmlのマークアップは間違えていても動いてしまうので、かなり雑な感じで作られていました。

なかなかマークアップへの意識ずけをするのが長年できていなかったのですが、改善すべくチーム内でマークアップクイズをやってみることにしました。

スポンサーリンク

どんなクイズにしたのか

ただマークアップどうしたらいいでしょう、みたいなクイズだと課題感を感じてもらえないと思ったので、関わっているプロダクトのTOPページのマークアップを題材にクイズを出してみました。

ここは違いそうというところを抜き出して、どうしたらよいでしょうか?みたいなクイズにしました。

こんなクイズを出しました

<ul>
  <article>
    <p>タイトル</p>
    <p>本文本文</p>
  </article>
  <article>
    <p>タイトル</p>
    <p>本文本文</p>
  </article>
</ul>

こんなマークアップが実際に行われていました。これのどこが間違えているでしょう。といったクイズを出していきました。

答えは、uiの直下にはliしか入れられないのに、articleが使われているです。

やってみた効果

関わっているプロダクトのマークアップを題材としたことで、自然とマークアップへの意識が生まれてきました。

やる前はこんなに間違えがあるとは思っていなかったようですが、TOPだけで6問も作れたのでやばいと思ったようでした。

また、このクイズを出した後に、マークアップの必要性の説明も行ったので、より意識してもられるようになりました。

このクイズをやった直後にメンバーからマークアップを見直す時間を作ってもいいですか?と聞かれたので、やってよかったなと思いました。

まとめ

マークアップは絶対的な正解はありませんが、間違えはあります。人によって文章構造の解釈が変わるとマークアップが変わってくることがあり得ると思います。それは解釈の違いなので、相談しながらベストなマークアップを目指していくのがよいと思います。しかし、ulの中にliがないなど、間違えとなるマークアップはあります。そこだけでも潰していくことが、マークアップへの意識を向ける一歩になるかと思います。

マークアップが正しければ、自然とアクセシビリティの向上につながります。少しマークアップへの意識ずけができるだけで変わってくると思うので、マークアップがなかなかうまくいかないなと思っているチームは試してみてはいかがでしょうか。