Headings
Presenter: Makoto Ueki
Educational video taken from the W3Cx Introduction to Web Accessibility course.
Transcript
Hi everyone! 皆さん こんにちは Now let's move on to headings.
Web pages often have sections of information separated by visual headings. Usually heading text is bigger and bolder than the surrounding text. Adding these kinds of styles are a good indicator of the importance of each section. But to make headings work for everyone, they need to be coded as headings, not just styled. A lot of people benefit from proper heading structure.
Check headings.
Who does this help?
Keyboard-only users.
People using screen readers.
People with some types of learning disabilities such limited short-term memory.
If headings are descriptive enough, it is helpful for users who have limited short-term memory. Because it allows them to predict what each section contains.
To determine if a page is using headings marked up semantically or just with styles, you can use tools like the Web Developer toolbar.
At first, go to the Outlines tab, then select Show Element Tag Names and then select Outline Headings. This will put a colored outline around each heading on the page.
Another way to view the heading structure of the page is to use the View Document Outline feature in the toolbar.
In the toolbar, select Information, then View Document Outline. The headings on the page will be listed.
Some things we are checking for include making sure the page has a heading. In almost all pages, there should be at least one heading. All text that looks like a heading is marked up as a heading. All text that is marked up as a heading is really a section heading. The heading hierarchy is meaningful. Ideally the page starts with an h1 which is usually similar to the page title and does not skip heading levels.
I'll see you again. では またお会いしましょう
