Janet and John stuff

Semantics

hints and tips
In the case of designing for a digital medium, whether in a browser or a native app, the first step to take is to pay attention to the semantic layout. If you do this, you cater for all users regardless of ability

Make every effort to be semantically correct throughout the design. This is simple and is 80% of the battle.

Using appropriate tags like:

<button>This is a button</button>
<input type=”text” />

will always pay dividends over the bastardised

<div tags type=”button” role=”button”>Try and tab this ya bugger</div>
<div contenteditable="true">Please Die if you use this</div>

If you use the correct tags, the user can tab between the elements and use the return key. It works across all browsers and doesn’t require any JS to sort its nonsense out. Appropriate tags are a web standard.

Semantics don’t just end with buttons and input fields. h1, h2, h3, h4, h5, p tags are equally important. These help screen readers.

Semantically correct sites are going to be lighter in weight (most, if not all of the functionality is done for you), better for mobile ands probably, although I am loathed to say this, better for SEO.

hints and tips
Please don’t …
Everybody understands that you don’t like the ‘fuzzy blue outline’ that surrounds an element when it is in focus in Chrome, etc. but please don’t remove it (or if you have to, replace it with the same outline, in another colour). Without this, nobody can see where they are tabbing and … well … it’s just naughty.