Write good link and form control names

For: Content, Design

Link Purpose (In Context) (2.4.4 level A)

https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Link text should always make sense if read out in isolation. Check the following:

  • Does link text match the heading of the target page?
  • Are there any ambiguous phrases such as click here, read more?
  • Do any links open a new window?
  • If there is a link to a document for example, PDF or Word, does the link name include the file type and size. for example: City Plan for Liverpool (PDF 475KB)?

If the visible text alone is not sufficient to convey meaning, designers should use advanced techniques to provide additional meaning, such as ARIA attributes, screen reader only text, or the title attribute.

Multiple Ways (2.4.5 level AA)

https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways.html

  • Each website should include at least two of the following: a list of related pages; table of contents; site map; search; or list of all pages.

Headings and Labels (2.4.6 level AA)

https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html

Ensure that on each page, headings, landmark labels, and form labels are clear and unique unless the structure provides adequate differentiation between them.

For example:

  • A good clear heading would be Find a school
  • A poor heading would be Schools
  • A good clear field label would be First name
  • A poor field label would be Name