Landing page design pattern

[tamsinewing555]

Resource URL

https://wai-website.netlify.com/about/groups/

Description

Change landing page design to use linked (h2) headings instead of linked definition list.

The h2 user interface affordance is in my view a better user experience because:

• the h2 headings, which are page titles linking to the section's various information pages, use a larger font size and are visually distinguishable from the content and any links in the summaries beneath them (the links in the page summaries are not structurally at the same level of information as the links for the page titles but, in the definition list, both use the same font size).
• a screen reader user can quickly find the page they're looking for by either getting a screen reader to announce a list of headings on the page or a list of links on the page (screen reader users who are new visitors to the page are more likely to familiarise themselves with the content on a page by first checking for any headings).

Compare:

h2 affordance:

dl affordance:

Resource Shortname

wai-groups