1. Link text is descriptive
It’s common bad practice to use the words “click here”, “read more”, or just “here” or “more” for link text. This is problematic for several reasons:
- Users look for shortcuts when scanning the page. “Click here” or similar doesn’t provide any detail on what the user will get when they click.
- Screen reader users also often check what links are present on the page, in the form of a list provided by their software.
- The “click” in “click here” puts too much emphasis on the mechanics of the action. We can’t presume that users are interacting with the site using a mouse.
- Search engines ascertain the value of a page based on the headings, the page title, and link text. Not providing descriptive link text will result in a lower ranking in search engine results.
Example
- Don't say "Find details of proposed changes to UK airspace by clicking here"
- Do say "Find details of proposed changes to UK airspace"
2. Page is structured using descriptive headings
Descriptive headings help users to orient themselves within a page and find the content they’re looking for.
They should appear in the page in the correct order. For example, a heading level 2 (h2) should only be placed beneath a heading level 1 (h1), level 3 for a subsection under level 2 etc.
Example
<h1>Aviation safety</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Commercial airline safety</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>General aviation safety</h2>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2>Drone safety</h2>
<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Licensing your drone</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
3. Headings aren’t used to style content
Headings should only be applied to structure the content, not to add styling. To emphasise text, use bolding (<strong>…</strong>) or emphasis (<em>…</em>).
Equally, bolding shouldn't be used to denote a heading.
4. Tables have captions and header cells applied
A caption acts as a heading for a table – it describes the content, and in doing so, helps users to find the table in the page and understand what it contains.
A header cell acts as a heading for the cells below it.
Example
Please refer to the following example when constructing a table in HTML. You’ll note that:
- it includes a caption
- it includes a row of header cells placed within a <thead/> element
- each header cell its scoped to the column that it heads
<table>
<caption>Events</caption>
<thead>
<tr>
<th scope=”col”>Date</th>
<th scope=”col”>Event</th>
<th scope=”col”>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>26 July</td>
<td> Lifting the Lid - Space Regulation</td>
<td>Aviation House</td>
</tr>
[…]
</tbody>
</table>
Provide page feedback
Please enter your comments below, or use our usual service contacts if a specific matter requires an answer.
Fields marked with an asterisk (*) are required.