私の携わっているプロダクトの開発チームは、バックエンドもフロントエンドも分かれておらず、どちらもこなしていくという開発を行っています。
なので、バックエンドが得意な人でもフロントエンドのソースをいじりますし、逆も然りです。
そうなってくると、得意がない方の技術は動けばまあいいかな、みたいな意識がでてきていました。
特にhtmlのマークアップは間違えていても動いてしまうので、かなり雑な感じで作られていました。
なかなかマークアップへの意識ずけをするのが長年できていなかったのですが、改善すべくチーム内でマークアップクイズをやってみることにしました。
どんなクイズにしたのか
ただマークアップどうしたらいいでしょう、みたいなクイズだと課題感を感じてもらえないと思ったので、関わっているプロダクトのTOPページのマークアップを題材にクイズを出してみました。
ここは違いそうというところを抜き出して、どうしたらよいでしょうか？みたいなクイズにしました。
こんなクイズを出しました
<ul>
<article>
<p>タイトル</p>
<p>本文本文</p>
</article>
<article>
<p>タイトル</p>
<p>本文本文</p>
</article>
</ul>
こんなマークアップが実際に行われていました。これのどこが間違えているでしょう。といったクイズを出していきました。
答えは、uiの直下にはliしか入れられないのに、articleが使われているです。
やってみた効果
関わっているプロダクトのマークアップを題材としたことで、自然とマークアップへの意識が生まれてきました。
やる前はこんなに間違えがあるとは思っていなかったようですが、TOPだけで6問も作れたのでやばいと思ったようでした。
また、このクイズを出した後に、マークアップの必要性の説明も行ったので、より意識してもられるようになりました。
このクイズをやった直後にメンバーからマークアップを見直す時間を作ってもいいですか？と聞かれたので、やってよかったなと思いました。
まとめ
マークアップは絶対的な正解はありませんが、間違えはあります。人によって文章構造の解釈が変わるとマークアップが変わってくることがあり得ると思います。それは解釈の違いなので、相談しながらベストなマークアップを目指していくのがよいと思います。しかし、ulの中にliがないなど、間違えとなるマークアップはあります。そこだけでも潰していくことが、マークアップへの意識を向ける一歩になるかと思います。
マークアップが正しければ、自然とアクセシビリティの向上につながります。少しマークアップへの意識ずけができるだけで変わってくると思うので、マークアップがなかなかうまくいかないなと思っているチームは試してみてはいかがでしょうか。
