This page is an accessible web page template.
It is meant to be a guide for VC Finance website editors, AVCs, and directors on how to make web pages more accessible and inclusive to people with disabilities and those who use assistive technologies, as well as compliant to Web Content Accessibility Guidelines (WCAG) 2.1.
Page Title
All web pages should have an appropriate title that describe the topic or purpose of what is on the page.
A Word or Google doc would work very well as a draft, backup, and archive of a web page.
WCAG Compliance
WCAG Success Criterion 2.4.2 Page Titled:
- Web pages have titles that describe topic or purpose
Headings and Sections
Web pages should have headings to define the sections of information that are contained within the web page.
Section
Definition from WCAG 2.1:
- A section is a self-contained portion of written content that deals with one or more related topics or thoughts
Headings are Navigational Tools
Headings are not only organizational tools, but are navigational tools as well.
When it comes to accessibility, the use of headings provide a way for screen reader users to quickly navigate from heading to heading, or between sections of information.
Example
For example, let's say that a web page had 5 sections of information, and each section had multiple paragraphs of information, and a screen reader user only wanted to know what information was in the 5th section.
The use of headings would allow them to tab from the page title, to the first heading, to the second heading, and so on through each of the 5 headings. Without the use of headings, they would have to listen to everything in the first 4 sections in order to get to the 5th section.
Screen readers work in a linear fashion, and both categorizing the information and labeling the sections of information with headings allows screen reader users to find and navigate more directly to the information they are searching for.
Heading Fonts
Heading fonts for UC Berkeley websites using Open Berkeley are determined by Public Affairs and Communications.
WCAG Compliance
WCAG Success Criterion 2.4.6 Headings and Labels:
- Headings and labels describe topic or purpose
WCAG Success Criterion 2.4.10 Section Headings:
- Section headings are used to organize the content
Heading Level 2
The web page title is automatically attributed to heading level 1, and so heading level 2 should be used for creating the main sections within the web page.
Heading level 2 is identified by the HTML <h2> tag.
Heading Level 3
Heading level 3 should be used to create a sub-section to heading level 2, or to further categorize information that is related to information contained within heading level 2.
Heading level 3 is identified by the HTML <h3> tag.
Heading Level 4
Heading level 4 should be used to create a sub-section to heading level 3, or to further categorize information that is related to information contained within both heading levels 2 and 3.
Heading level 4 is identified by the HTML <h4> tag.
Links
Adding a link within a paragraph or list should be done in a way such that the purpose of each link can be determined from the link text alone.
For example, when linking to the Chartstring web page in this sentence, the link applies to the word "Chartstring," which is also the same title of the web page being linked to.
Use the Page Title as the Link Description
When in doubt, it is best to use the page title as the link description, which removes any ambiguity as to where the link goes.
Avoid Using Multiple Links to the Same Location
It is also good practice to avoid excessive linking, or using multiple links that point to the same URL.
Example
For example, in the second paragraph of this Links section, there is a link to the Chartstring web page.
If referring to a chartstring again were necessary, whether in this section or other sections on the page, it would not be necessary to link to the web page again since it has been linked to already.
WCAG Compliance
WCAG Success Criterion 2.4.4 Link Purpose (In Context)
- The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general
WCAG Success Criterion 2.4.9 Link Purpose (Link Only)
- A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general
Lists
- Lists are an accessible way to present a list of items
- Screen readers are able to announce each time there is a new list item
- Each item in the list does not need to be a complete sentence
- The first letter of each list item should generally be capitalized
- List items do not require a period (.) at the end
Unordered List
- Most lists can be unordered
- An unordered list displays bullet icons for the list items
- An unordered list is identified by the HTML <ul> tag
Ordered List
- Lists can also be ordered
- An ordered list displays numbers and letters for the list items
- An ordered list should be used when there is a specific order to follow
- An ordered list is identified by the HTML <ol> tag
Tables
Using tables to present information should be avoided whenever possible.
Tables Can be a Barrier to Access
Screen Readers
Please consider that for people using screen readers, navigating tables will generally be more difficult than navigating content sectioned out using headings.
This is primarily because screen reader users will have to do extra work, both in listening and remembering, whenever they encounter a table.
This is from the Top 10 Tips for Making Your Website Accessible page:
"Using tables for page layout adds additional verbosity to screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page."
Phones and Tablets
Please also consider that while a table may look fine on a desktop monitor or laptop, tables are usually not fully displayed on smaller screens such as phones and some tablets.
Avoiding the use of tables also provides a more equal experience for people using phones and tablets to access websites.
Tables Should Never be Used for Layout
Tables should never be used for layout purposes.
Other Ways to Present Information
There are usually mulitple ways to present the same information, and it will generally be more accessible to present the information without the use of a table.
Examples
For example, instead of using a table for the following information, it would be more accessible to present the same information by using headings.
Example of a traditional table:
| Business Unit | Location |
|---|---|
| 10000 | UC Berkeley |
| J0000 | UC Office of the President |
What this table would look like on a phone, and similar to how a screen reader user might hear the information:
Business Unit:
10000
Location:
UC Berkeley
Business Unit:
J0000
Location:
UC Office of the President
Example of a more accessible way to present the same information by using headings:
Business Unit
UC Berkeley
10000
UC Office of the President
J0000