How to format <section> elements in HTML5 to provide meaningful insight to assistive device users?

Question 1

If I understand what you are after, you should add role="region" to the section elements, like so:

<section role="region">

This will tell the screen reader that the section is indeed a section, and will provide the correct accessibility information to the user. This role is an WAI-ARIA role. Ideally it would not be needed, as the section element has implied semantics, but there is better support for ARIA in screen readers than there is for HTML5 elements, so this plugs the gaps until support is widespread.

You can add the aria-labelledby attribute to the section element and associate it with the ID of the h* if you want the heading to be announced by the screen reader when it is announcing the section, such as “Example 1 region” in Jaws.

For each of your headings in the sections, it could be a good idea to include them in a header element too, like so, although not strictly needed (I often do it just for the main article heading)

<article role="article" aria-labelledby="title">
    <header>
        <h1 id="title">An article about markup!</h1>
   </header>
   <section role="region" aria-labelledby="eg1">
        <header>
             <h1 id="eg1">Example 1</h1>
        </header>
   </section>
   <section role="region" aria-labelledby="eg2">
        <header>
            <h1 id="eg2">Example 2</h1>
        </header>
    </section>
    <section role="region" aria-labelledby="eg3">
         <header>
            <h1 id="eg3">Example 3</h1>
         </header>
    </section>

For more information see http://blog.paciellogroup.com/2011/03/html5-accessibility-chops-section-elements/, http://blog.paciellogroup.com/2010/10/using-wai-aria-landmark-roles/ and http://blog.paciellogroup.com/2013/10/using-html5-section-element/

Question 2

I addition to dstorey's excellent advice, I would say that you should not use <h1> at each section level.

Although it was previously recommended, that recommendation has changed in HTML5 and now the advice is to use the <h?> level that works for the whole document. i.e. if the top level article uses an <h1> then the sections should use <h2>, the same as you would have done in HTML 4.

The reason is that using <h1> throughout depends on the implementation of the HTML5 outline algorithm. Unfortunately, it seems that browsers are unwilling to implement the algorithm, and the screen readers are either unwilling or unable to do so correctly. So nowhere in the accessibility tool chain is the outline being correctly processed and assistive device users will not be able to understand the heading levels correctly.

Question 3

Possible styling solution via CSS3 is shown below; you can modify it up to your needs. Here is a link to jsfiddle for your convenience: http://jsfiddle.net/M6mpt/

HTML

<!DOCTYPE html>
<body>
<article class="article1">
<h1>An article about markup!</h1>
<section  class="section1">
<h1>Example 1</h1>
</section>
<section class="section2">
<h1>Example 2</h1>
</section>
<section class="section3">
 <h1>Example 3</h1>
 </section>
 </article>
 </body>

CSS3

.article1 {
    font-family: Arial;
}

.article1 h1 {
    text-transform:uppercase;
    font-size:1.2em;
}

.section1 h1 {
    font-size:1.1em;
    color:#606060;
}

.section2 h1 {
    color:#909090;
}

.section3 h1 {
    color:#a0a0a0;
    font-size:0.9em;
}