Usability
- Do not provide instructions on how to use a page – if your page requires instructions, redesign it. In addition, your visitors already know how forms work, there’s no need to use language like, “fill in the form below.”
- Do not open links in new windows – research indicates that new windows make it harder for your visitor to browse your site.
- Use plain language – simple and positive language makes it easier for the public to read and understand our website. Consider visitors who aren’t fluent in English or otherwise struggle with reading.
- Never describe where elements appear – on your big monitor, something might be on the right, but on a smaller screen, it may appear below. Either link directly to the resource or reference it without describing its location.
- Test your pages on a small screen – many web pages are primarily viewed on a phone. Your page must work well on small screens. Tip: design first for a phone, second for a larger display.
- Use engaging link text – a good link informs the visitor what it is without reading the content around it. It can be a few words. Try to include a verb in your link text. Do not use “click,” “tap,” or any other hardware reference.
Follow correct syntax
The way we format text affects more than the appearance and layout of the page. For example, it’s easy to make a header bold and it can have the desired look and feel, but formatting the same text as a header signals gives meaning in relationship to any text that follows. Consistent syntax helps signal what type of content users are reading. This is particularly helpful for viewers who use assistive technology to access your content, and is also helpful for search engine optimization.
- Use proper headings – assistive technology relies on heading elements to navigate a page’s content hierarchy, use them properly. Be sure that your heading blocks follow a nested pattern.
HTML syntax is organized like an outline:
<h1>Title</h1>
<h2>Topic 1</h2>
<h3>Subtopic A</h3>
<h3>Subtopic B</h3>
<h2>Topic 2</h2>
<h2>Topic 3</h2>