Page Structure
Properly structuring web pages can go along way towards mitigating many accessibility issues, and not just for blind people.
Headings
A great example of structuring web pages is using headings. Not only do they help the section titles stand out visually, they can aid in navigation for screen reader users.
How Headings Should Work
Headings on web pages come in different levels. Headings at level 1 should reflect the main heading for the page and, sometimes, will also refer to the title of the site as is done on this site.
Any headings used should use the appropriate level number to help indicate their heirarchy, forming an outline of the page's content. Sections within a page's content should be at level 2, with subsections at level 3, etc.
Heading text will be sized according to it's level, with a heading at level 3 being smaller than one at level 2, etc.
How Headings Help Screen Reader Users
For screen reader users, headings provide a quick and easy way to get a feel for the content on the page and navigate to the section they want. They can use a key combination to navigate by heading or another key combo to pull up a list of all headings and their levels.
Lists
A properly formatted list can provide the following benefits:
- When screen readers encounter a list, they will usually identify it as a list and state how many items are in the list.
- Lists can be structured, including nested lists.
- A nested list is basically a list within a list, and would usually indicate items that would fall under that list item.
- Screen readers will identify a list as being nested and may provide a level number.
- Lists come in three types:
- Ordered: These lists are either numbered or lettered.
- Unordered: These lists are usually bulleted, but may contain no marking at all at the beginning of an item.
- Description: A list of items with one or more descriptions for each item. For these, screen readers will announce it as a description list and how many "terms" there are will be the item count.
- Lists provide a visual cue that makes them easily identifiable as a list compared to standard paragraphs of text
- Screen readers will announce when they have reached the end of a list.
Example: Ordered list
- Item 1.
- Item 2.
- Sub-item 1.
- Sub-item 2.
- Item 3.
Example: Description List
- Term 1
- Description 1.
- Term 2.
- Description 2
- Another description.
Page Regions
Page regions help segment the different areas in a page and can be navigated similar to how headings are. The four main region types are:
- Header.
- Navigation.
- Main.
- Footer.
Many screen readers now will only identify navigation and main regions when reading a page, but will allow you to jump between all the types of regions.
Navigation
Navigation regions may appear multiple times on a page and should contain links or other items that help navigate a site.
- If there are multiple navigation regions on a page, best practice is to name the regions so they can be identified.
- The pages on this site have two navigation regions. The one at the top is named "header," and the one at the bottom "footer."
Main
Each page should only have one main region that contains the content unique to that page. On this page, the main region is the section with the white background.
Other Considerations
While these don't technically fall into the realm of page structure, the following are also good practices.
Links
Links can be accessed in a list just like headings. Because of this, ideally you should be able to tell what's being linked to by the text of the link. However, it's generally acceptable as long as what's being linked to can be determined based on adjacent content to the link itself.
Using Color to Convey Meaning
Color should never be used alone to convey meaning. This doesn't mean that you can't use color, it should just be supplimented with other things that will provide that same meaning.
Example: Navigation Links on This Site
A great example of supplimenting color as a way to provide meaning is the navigation links at the top and bottom of this page. They help to identify which page you're on in the following ways:
- The links are styled to look like tabs, The active tab has a white background with blue text where the other tabs have a blue background with white text.
- The text for the current page's link is bolded. This will help it stand out if a user is using a high contrast mode setting on their computer.
- The link for the current page has a designator that tells a screen reader to identify it as the current page.
Language
HTML, the language of the web, allows content developers to mark the language of a page as well as specific content within a page that may be different. Screen readers will base how they pronounce content on these language indications.
Example: Language Indication for a Phrase in a Sentence
Let's look how these two otherwise identical sentences are read. The first option has no language indicator, the second does.
- He asked for pico de gallo on his burrito.
- He asked for pico de gallo on his burrito.