[TB] Improved use of HTML

[toni-sharpe]

Problem/Concern

A large amount of code found here in the code/src/ui/src uses <div> only. The div tag is a generic layout tag for dividing up page areas. Tags like article and section tags provide the same function in HTML5 but with a bit more meaning (for example, an article can be provided with a header and footer and dividided up into sections).

However, accessibility improving by using good HTML. The full list of improvements is unclear but plenty of different tech. reads web-pages, so the advantages work for accessibility and SEO just to start with.

An example: this code here is all divs but it's much more like an ordered list (<ol><li> ...). MDN explain here that while you can use aria-roles, using the correct HTML is better. Two advantages are that there is less HTML, no aria-role properties are needed, leading to faster loading pages and improiving global accessibility on slower devices; and the devloper accessibility, when debugging, they see a list marked up, not a sea of divs, making it easier for them to find the right code to edit.

Proposed Solution

The solution is that devs should learn and use HTML more fully. If you're writing efficient, accessible front-end code on the web then HTML should be well known and used carefully. MDN is a good place to start.

[toni-sharpe]

Help wanted?

Let MDN do some of that.

My opinion: I highly recommend donating time and/or money to their organisation.