Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Setting headings and paragraphs

From: Web Accessibility Principles

Video: Setting headings and paragraphs

>> Marking up your text as headings and paragraphs is one of the simplest changes you can make to a webpage that has one of the greatest impacts on accessibility. Headings are the primary way that you can add structure to your text. They divide up the text into related pieces and provide information on the hierarchy of that information. Just as a sighted user can scan up and down the page to look for text that sticks out visually and get a sense of what topics are covered on the page. Screen readers can do the same sort of things if there are headings in the markup as we saw earlier with JAWS you can bring up a list of headings for a page and jump to each one of those.

Setting headings and paragraphs

>> Marking up your text as headings and paragraphs is one of the simplest changes you can make to a webpage that has one of the greatest impacts on accessibility. Headings are the primary way that you can add structure to your text. They divide up the text into related pieces and provide information on the hierarchy of that information. Just as a sighted user can scan up and down the page to look for text that sticks out visually and get a sense of what topics are covered on the page. Screen readers can do the same sort of things if there are headings in the markup as we saw earlier with JAWS you can bring up a list of headings for a page and jump to each one of those.

Another advantage to using headings is that it easier to keep them looking consistent through out the site using CSS. Finally headings are looked at by search engines as an indication of what words on the page are more important than others. By putting the important topics of your page into headings your making it easier for search engines to find your page for those words as well as making the page more accessible to both sided and screen reader users who can scan through the page and quickly get a sense of the content. If you are following along with the exercise files open the files visitors.doc from the chapter four folder.

The text in this document does not have any formatting applied to it, this is ideal for pasting into Dreamweaver because it insures that no excess formatting will be carried over into our webpage. Remember we are trying to keep all the visual formatting in the CSS not in the HTML. Hit control A or command A to select all the text on the page then control C or command C to copy it. Go back to Dreamweaver highlight over all of the context in the main content DIV then hit control V or command V to paste in the text.

By default Dreamweaver paste text from Word as paragraphs. You can verify this by clicking in any of the paragraphs of text that we just pasted in. If you look at the tag selector at the bottom of the document window you can see that the current tag is a P tag meaning this text is marked up as a paragraph. You can also verify this in the property's inspector by looking at the format menu, again its set to paragraphs so we know that this text is correctly set. What you do want to check however is that the text hasn't been pasted in as one big paragraph but that each chunk of text on the page is a distinct paragraph with its own opening and closing tag.

An easy way to do that in design view is to try to place your cursor in the blank spaces in each line, if you are able to do so then that means the chunks of text are being separated with break elements not with the margins on each individual paragraph. Let's check this page, scroll up to the top try to place your cursor underneath the word visitors on the blank line. We're not able to click there because visitors is a separate paragraph from the text below. That space is not actually a blank line but simply a margin gap, we'll try to do this after the first paragraph as well and again we can't click there, that's what we want to happen.

Scroll through the rest of the page and try to click between each of the paragraphs, you'll see that you can't place your cursor in those gaps because Dreamweaver has correctly preserved the paragraphs in the Word document. If you also have headings set up in your Word document Dreamweaver will also paste in those same headings. This is really useful if your content providers are using headings correctly, but if there not using them correctly in the source document you may not want Dreamweaver to preserve them so you can change how it paste in text by going edit and then clicking on paste special, you'll see that you have that you have four options listed under paste as, the default option is text with structure this is why Dreamweaver pasted in the text with paragraphs intact and if we have any headings in our Word document those would have also been preserved when we pasted in the text.

If a word document has a lot of excess formatting that you need to get rid of an easy way is to simply paste it in as text only, click cancel. Now we need to change some of the pieces of text on this page from paragraphs into headings. We'll use this doing the format menu on the properties inspector. First let's scroll up to the top of the document. Most pages have only one main topic so you will usually only have one heading one or H1 tag, all others will be sub headings of this.

Usually you will set your H1 to be the title of your page, on this page our title is visitors. Highlight over that text then go down to the property inspector and click on the arrow of the format window, select the option heading one, the appearance of the text changes to reflect the default settings of the H1 tag, we'll customize that later. We now need to set the sub headings. Scroll down and select the words Lake Wordscott, this is a sub heading of our titles visitors, so go down to the format menu on the property inspector, click on the menu and select heading two from the list.

Again the text changes because of default formatting, we need to decide if the next piece of text on the page is a sub heading of that H2 Lake Wordscott or if it is a subheading for the title of the page visitors. Basically when you are deciding what headings to set on your page you are going to be thinking about your page as an outline document. If this is an outline downtown Wordscott would come underneath the heading of visitors, so this should also be a heading to. Highlight over downtown Wordscott click on the format menu in the properties inspector and choose heading two.

Scroll further down the page and highlight over events, click on the format menu and choose heading two for this text as well. If we read the text underneath events you can see that there are basically two sections annual events and upcoming events, both of these are sub sections of the events header so these should be H3 elements. If we highlight over annual events and choose heading three from the format menu, you will see that the entire paragraph changes its appearance. This is because that entire chunk of text was marked up as a single paragraph.

Annual events was not a separate paragraph from the text below so before we set it as a heading we need to make sure that it's a completely separate paragraph. Go up to edit and select undo text format to remove the formatting that we just applied. Next place your cursor at the start of the line below the annual events text and hit backspace to remove the line break between annual events and the next sentence then hit enter or return. This creates a new paragraph and keeps the annual events text separate.

Now we can highlight over annual events and go to the format menu on the properties inspector and select heading three and only that piece of text is affected. We need to do the same thing for the up coming events heading. Place your cursor on the start of the line below the upcoming events text, hit backspace to remove the line break and then enter a return to create a new paragraph. Highlight over up coming events, go to the format menu and select heading three. If we scroll down the page we'll see that we've now formatted all of our headings.

Scrolling back up the page we can see that the font sizes of each of the headings differs based on there level. This is default formatting that we'll talk about how to change in a later movie but first we are going to set a couple more headings on this page. You can also use headings as labels for the main sections of your pages. This allows screen readers users to quickly jump to a particular section. It may also help sighted users make better sense out of the page if the interface is complicated or different from standard visual conventions that most are use to.

We are going to use the sidebar of this page for our section navigation. So we can add a header to this DIV that provides that information. Highlight over the sidebar one content text that is already there and type in section navigation. With your cursor still in that text if you look down at the properties inspector at the format setting you will see that it is currently set to a heading three. We are going to set it as a heading two since it's one of the major sections of the site just under the main topic if the entire page.

So highlight over the text section navigation then go back down to the format menu in properties inspector and choose heading two. We can also delete the paragraph text in this section. We'll add the content for the actual section navigation in a later chapter. Highlight over the paragraph text and hit delete the other section of the page we may want to label is the footer. Scroll down to the bottom of the page and place you cursor in front of the copyright notice, hit enter or return to create a new paragraph above that existing text.

On that new paragraph line type footer then highlight over this text and using the format menu in the properties inspector select heading two. These sections will then show up in the list of headings that a screen reader user may bring up in order to navigate the page. They'll immediately be able to tell where to go if they are looking for the section navigation or if they are looking for the footer in order to get copyright information or link to a privacy policy. Again we'll later talk about how to style these headings, even how to remove some of them from view so they are available to screen readers but not to sighted users but for now we've created the base markup that is so important for creating the structure of our page.

Show transcript

This video is part of

Image for Web Accessibility Principles
Web Accessibility Principles

68 video lessons · 25983 viewers

Zoe Gillenwater
Author

 
Expand all | Collapse all
  1. 2m 0s
    1. Welcome
      1m 3s
    2. Using the exercise files
      57s
  2. 33m 15s
    1. What does accessibility mean?
      5m 51s
    2. How does accessibility help your users?
      3m 30s
    3. Experiencing a website via a screen reader
      5m 46s
    4. How does accessibility help you and your clients?
      3m 9s
    5. Overview of Section 508 standards
      5m 51s
    6. Overview of WCAG standards
      6m 4s
    7. Understanding consistency and semantic markup
      3m 4s
  3. 54m 31s
    1. Understanding screen readers and accessibility tools
      6m 12s
    2. Getting accessible browsers
      5m 41s
    3. Customizing Firefox for accessibility testing
      5m 53s
    4. Using custom accessibility toolbars
      5m 28s
    5. Using Fangs and the Color Contrast Analyzer
      5m 30s
    6. Accessibility tools to bookmark
      5m 53s
    7. Using automated accessibility checking tools
      4m 57s
    8. Setting up the JAWS screen reader on Windows
      6m 42s
    9. Using the VoiceOver screen reader on Mac OS X
      5m 52s
    10. Setting Dreamweaver accessibility preferences
      2m 23s
  4. 26m 12s
    1. Avoiding tables for layout
      3m 30s
    2. Using CSS for layout
      2m 40s
    3. Creating a fixed-width layout
      5m 51s
    4. Creating an elastic layout
      3m 51s
    5. Creating a liquid layout
      3m 4s
    6. Customizing a liquid layout
      7m 16s
  5. 1h 6m
    1. Specifying the language
      3m 43s
    2. Setting page titles
      2m 16s
    3. Setting headings and paragraphs
      9m 55s
    4. Styling headings
      9m 56s
    5. Hiding section headings from sighted users
      6m 41s
    6. Styling text for readability
      6m 41s
    7. Ensuring proper color contrast
      6m 36s
    8. Creating text emphasis
      4m 29s
    9. Indicating quotations
      4m 29s
    10. Creating basic lists
      4m 16s
    11. Styling lists
      7m 15s
  6. 1h 15m
    1. Using lists for navigation
      6m 45s
    2. Creating a horizontal navigation bar
      13m 25s
    3. Creating a vertical navigation bar
      11m 44s
    4. Adding skip navigation links
      12m 0s
    5. Hiding skip navigation links
      6m 17s
    6. Proper link text and title attributes
      6m 11s
    7. Opening new windows
      4m 28s
    8. Accessibility limitations of fly-out menus
      6m 30s
    9. Creating an accessible fly-out menu
      8m 38s
  7. 27m 55s
    1. Proper ALT text for navigation images
      4m 57s
    2. Proper ALT text for decorative images
      5m 19s
    3. Adding ALT text to an existing site
      6m 9s
    4. Adding ALT text to image maps
      5m 58s
    5. Describing complex graphics
      5m 32s
  8. 34m 1s
    1. Using tables for data
      3m 0s
    2. Creating header cells
      4m 5s
    3. Adding table captions and summaries
      9m 9s
    4. Styling tables
      5m 19s
    5. Applying header cells to complex tables
      6m 52s
    6. Adding id and headers attributes
      5m 36s
  9. 42m 7s
    1. Understanding form accessibility issues
      3m 7s
    2. Labeling form fields
      6m 9s
    3. Adding fieldsets and legends
      4m 42s
    4. Moving forms out of tables
      3m 44s
    5. Cleaning up a form's appearance
      4m 53s
    6. Aligning labels and fields using CSS
      9m 39s
    7. Indicating required fields
      6m 15s
    8. Dealing with CAPTCHA
      3m 38s
  10. 7m 29s
    1. The Text-Only technique
      3m 21s
    2. The Access Keys technique
      2m 35s
    3. The Tab Index technique
      1m 33s
  11. 18s
    1. Goodbye
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Accessibility Principles.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.