Following the rules to a well-structured web page
Web pages take many forms, but like species branching from a common ancestor, they share a basic structure.
The first web pages were simulacra of printed pages so it was natural that elements familiar from print were transcribed for the Internet. A web page is a document containing elements such as titles, headers, and paragraphs. These are used to structure and order its contents and they impart meaning.
The range of elements has since expanded to meet new demands. The original specification included markup for images; it now includes markup - or tags - for video, audio and canvas (used for animation).
Using elements correctly helps users create an accurate model of the page and its contents.
- h1 Following the rules to a well-structured web page
- p Web pages take many forms…
- h2 HTML elements and tags
An HTML element has an equivalent tag or set of tags which are used to decorate, or mark up text or other content. The P element - analogous to a paragraph - has opening and closing tags:
<p>This is a paragraph.</p>
This instruction is declarative; it specifies semantic intention, but it is not prescriptive. Specific representation is left to the discretion of web application authors (the people responsible for browsers like Chrome, Firefox, Edge, Tor, and Opera), and web developers.
Interpretation of an instruction need not be visual; an audio device or application, such as a screen reader represents the space before and after a paragraph in units of time, not space.
Separation of presentation and content
CSS can be used to control every aspect of a page from fonts, colours, the look and behaviour of buttons and links, to page layout.
CSS rules are used in all sorts of ways to enhance web pages, but used injudiciously they can be misleading.
Which button would you choose?
If you are using a screen reader you know the answer. There is only one button.
In practice, it is usually non-sighted users who suffer when there is a mismatch between the semantic value of an element and its use, or when meaning is conveyed by visual means alone.
Links, text input fields, checkboxes, dropdown menus, images and buttons are interactive elements. Users can navigate between them using either the keyboard or a screen reader.
Browsers support keyboard navigation between interactive elements primarily using the tab key. This is a quick form of navigation for expert users and another way to build up a mental model of the page. The appearance of an element changes to reflect that it has keyboard focus/pointer hover.
Headers are used by sighted and non-sighted readers to get the gist of a page in order to decide whether it is worth reading. Screen readers are also able to navigate between headers.
By convention headers decrease in size.
The specification recommends one H1 element per page and so it is often reserved for the title. The author may use as many of the other headers as they please provided they are nested correctly - H3 within H2, etc.
These headers are routinely resized, and their colours and fonts changed but it is bad practice to abuse their hierarchy or use other elements in their place. Doing so loses meaning, and disrupts navigation.
The back button
Pages don't exist in isolation. Hypertext allows pages to be connected across sites, and maintaining this connection is critical. Users need to move freely from page to page using links and the browser back and forward buttons.
Use of the keyboard, screen reader, or other assistive devices reveals the semantic structure of the page. They provide an alternative, and at times, improved way of navigating and interacting with a page.
Keyboard navigation is fast and easy because it skips passive content and relies on the interconnected structures which underpin the web.
If you don't know the keyboard shortcuts to move back and forwards between pages in the browser, here they are:
- Mac: ⌘ + left/right arrow key
- Windows & Linux: Alt + left/right arrow key
The primary goal of a page is to be understood
When we open a new page we immediately scan it for meaning, searching for answers or clues as to its purpose.
HTML elements are designed to help developers establish a semantic model for users.
Articles, blogs and posts need a relevant title, and quick access to headings which, taken together, provide an outline of the subject under discussion.
Ecommerce sites use headers for product categories, checkboxes and dropdown menus to filter items, links of additional information and buttons for purchasing.
Mental models, conventions, and preconceptions
When we visit a new page for the first time we do not bring a fresh eye to it; we have a stack of preconceptions fashioned by all the other pages we have seen. Upsetting our expectations makes us work harder to understand the basics when our attention should be focused on what makes the page unique.
Innovation and originality should not play fast and loose with existing models and conventions.
Movement is distracting, demands our attention, and is best used with caution. Once we have built a model of a page we object to our assumptions being upset. Images and blocks of text that appear from nowhere or move around are highly disruptive to the static model we are trying to build. Change should be initiated by the user and respect cause and effect. Buttons and links are good examples.
The primary aim of a page is to make itself understood, but it must also provide clues as to other pages on the same site. This is part of the context of the page, and as well as helping us navigate the site, helps us answer questions such as: Is this author reputable? Are there other interesting things here? Can I trust this site with my money?
If your model doesn't fit the user's model, change your model
Consider this example. The browser address bar was designed for users to type in the name of a web site they already knew. If they wanted to search for a web site, they used a search box like the one on the Google homepage. Many people confused the two. The Chrome address bar was adapted to return either the requested page or search for a match. The new model caught on, and all browsers now work this way.
Links to external references
- W3C | The World Wide Web Consortium
- W3C | Web Accessibility Laws & Policies
- W3C | Formal definition of the P element
- WebAIM | Semantic Structure: Regions, Headings, and Lists
- Abby Kingman | Finding the Way: screen reader strategies
- MDN | HTML elements reference
- WebAIM | Introduction to ARIA - Accessible Rich Internet Applications
- Smashing Magazine | I Used The Web For A Day Using A Screen Reader
- Smashing Magazine | I Used The Web For A Day With Just A Keyboard
- Deque University | VoiceOver Keyboard Shortcuts on a Mac
- WebAIM | Screen Reader User Survey #7 Results
- Heydonworks | Responses To The Screen Reader Strategy Survey 2016
- Jeremy Keith | Resilient Web Design