Context
When we talk to a person face to face, content is often put into context. In this way misunderstandings can be avoided. The same is applicable to content on the web. If the context is not given, users cannot classify the meaning of individual elements.
Consistency and standards
Recognition rather than recall
Aesthetic and minimalist design
Table of contents
- Why the context on a website is important
- Set titles, everywhere
- Make meaningful labels
- Active and inactive status
Why the context on a website is important
Page titles are essential to enable all users to identify the content of a website. On the one hand, pages must be marked with the <title> element, so that pages in browser tabs can be quickly identified. On the other hand it makes sense to give each page a content describing <h1> title (main title), so that people with visual impairments or withlimited short-term memory can put the pages into context.
A website without title and context can be problematic for subsequent persons:
- People who are blind and navigate with a screen reader
- User with impaired vision
- People with limited short-term memory
This simple example shows the meaning of titles and context. Without context, the user does not know what product it is and what the slider is for.
Set titles, everywhere
That means for us as designers, titles are essential to improve the usability of a website. Therefore it makes sense to give each new section of a website or app a title that is appropriate to its content, in addition to the <h1> title. This has the following advantages.
- Blind users notice the change to a new section within a page and can associate the content.
- Users who navigate using the keyboard can easily skip from one section to another.
- The risk of creating misunderstandings on the site through unclear sections is minimized.
Make meaningful labels
Not only pages and sections need titles that match the content. Also for links and buttons it is important that they show the action behind them. So all users and especially blind users can skip links that are not interesting for them.
The following examples illustrate the importance of meaningful labels:
For the user such labels are meaningless, even in the context of the content it is difficult to see what is behind the button or link. It should be avoided that the user has to read additional text to understand simple buttons and links.
Learn more about accessibility
start your project now
With a content describing label it is now clear what kind of action is behind the button or link. The user can even see what is triggered by the elements without reading the content. This is useful for people who navigate through a page with a screen reader.
In addition to meaningful labels, it is also important to adapt the labels to the contents. This means that the labels should have the same wording as in the previous dialog.
This example clearly shows why labels should be put into context and labelled according to their actions. The usability improves for all users.
Active and inactive status
It is also a matter of context if we only show certain contents of a page by interaction. The user must be able to determine the connection between trigger and appearing content at any time. Active elements should therefore always be highlighted. See also chapter nested content to get more detailed information on this topic.
For tabs it is very important to create the context visually so that the user knows which tab is currently active.
Links
W3C – Page Titled
W3C – Section Headings
W3C – Link Purpose
W3C – Accordion