Updates to Authoring Practices Example Templates

APG TF members,

 

During Monday's meeting, I said I would stub out example subdirectories and
files for the incomplete example implementations. In preparing to do so, I
took a closer look at the templates themselves and saw several issues I
thought needed to be addressed.

 

I started by making some edits to the checkbox examples. Then, I rolled the
changes into two new template files: one for single implementations and one
for multiple implementations. I added a lot of comments to the source of the
template files, explaining how to use them.

 

If you are working on an example now, please update your clone and take a
look at the new templates in the coding-templates subdirectory.

 

The templates still point to Ian's repo for the coding guidelines; so that
is one issue to fix before I start stubbing out all the new example
implementations.

 

To checkout the updated format, review the checkbox examples. If you see
problems, please raise an issue.

http://w3c.github.io/aria-practices/#checkbox

 

For handy reference, my commit messages related to the above follow my name
below.

 

When I return from vacation, I will:

*        Integrate Ian's work on the coding guidelines into the wiki.

*        Address any issues raised with the templates.

*        Start stubbing out the incomplete examples.

*        Update completed examples to be consistent with the template.

 

Best,

Matt

 

commit 5378d4b09328ac371841e4072aa24f58c31f23f1

Author: Matt King <a11ythinker@gmail.com>

Date:   Mon Jul 18 19:08:09 2016 -0700

 

    simple checkbox example title, heading, and editorial changes

    

    In examples/checkbox/checkbox1.html:

    * Modified title ttag to "Simple Checkbox Example | WAI-ARIA Authoring
Practices 1.1"

    * Changed H1 text to match first part of title tag.

    * Moved H1 inside Main

    * Removed first H2 (it was redundant).

    * Modified first paragraph to be a sentence that explains the example
and links to the design pattern.

    * Changed the target of the design pattern link to reference the section
ID instead of the respec-generated heading ID.

    * Other minor editorial corrections to text.

    

    In aria-practices.html checkbox example section:

    * Changed link text for checkbox1.html to match the H1 in target file

    * Added brief explaination of the example.

 

commit c7eeab8b1174bad4690dc34e143cf48c6eb3b045

Author: Matt King <a11ythinker@gmail.com>

Date:   Tue Jul 19 07:29:28 2016 -0700

 

    Single implementation example template changes

    

    Refined the example coding template for example pages that include a
single implementation of a design pattern.

    

    Copied template-3.html into file
examples/coding-template/SingleImplementationExample-Template.html and made
following changes.

    * Added comments throughout the entire file to provide directions on
using the template.

    * Changed the page title element to:

      <title>EXAMPLE_NAME | WAI-ARIA Authoring Practices 1.1</title>

      This clearly indicates the name of the example and that it is part of
the APG.

    * Changed H1 text to match first part of the title tag.

    * Moved H1 inside Main

    * Removed first H2 (it was redundant).

    * Modified first paragraph to be a sentence that explains the example
and links to the design pattern.

    * Updated text describing the content of the example section.

    * Added link to coding standards for the person who will use the
template.

    * Modified the source code section to refer to example css and js stubs.

    * Moved the script element that loads the examples.js to the head.

    * Added a nav at the end with a link back to the APG design pattern.

    * Other minor editorial corrections to text.

    

    Other file changes:

    * Renamed examples/coding-template/css/codingtemplate.css to
example_name.css

    * Added js stub file examples/coding-template/js/

 

commit a1f0d1ecbc2b86202ea6428ca9a0638d9f3cb372

Author: Matt King <a11ythinker@gmail.com>

Date:   Tue Jul 19 12:22:10 2016 -0700

 

    New files for single-implementation example template

    

    The following files contain the updated example template for an example
implementation

    where the example page has only one implementation of the design
pattern.

    * new file:
examples/coding-template/SingleImplementationExample-Template.html

    * new file:   examples/coding-template/css/example_name.css

    * new file:   examples/coding-template/js/example_name.js

    

    In :
examples/coding-template/SingleImplementationExample-Template.html:

    * removed labels on sections inside main that made every section a
region.

    * Put regions only around  the example and the HTML source.

      This clarifies boundaries of the content, which, due to the content
itself, may not always be clear.

 

commit eb723758c2a92069697adfac11a08069d66a324e

Author: Matt King <a11ythinker@gmail.com>

Date:   Tue Jul 19 12:47:17 2016 -0700

 

    Updated simple 2-state checkbox example page

    

    modified:   examples/checkbox/checkbox-1.html to:

    * Add "Two-State" to name of example.

    * Added regions for example and html source

    * Added nav region with link back to APG checkbox design pattern

    

    Now this example matches the updated single implementation example
template.

 

commit 9f74279f0151d9bfd5ce913f487d4ab8e8af5200

Author: Matt King <a11ythinker@gmail.com>

Date:   Tue Jul 19 12:47:17 2016 -0700

 

    Update template of and links to checkbox examples

    Finished updating two-state  checkbox example to revised template format

    modified:   examples/checkbox/checkbox-1.html to:

    * Add "Two-State" to name of example.

    * Added regions for example and html source

    * Added nav region with link back to APG checkbox design pattern

    Now this example matches the updated single implementation example
template.

    

    Update mixed checkbox example to revised template format

    modified:   examples/checkbox/checkbox-2.html:

    * Change title to "Tri-State Checkbox With Grouping Label Examples |
WAI-ARIA Authoring Practices 1.1

    * Changed H1 to "Tri-State Checkbox With Grouping Label Examples"

    * Rewrote intro section to describe the behavior of the example in
simple, non-technical  terms.

    * Moved note about screen reader group label announcement to beginning
of example section.

    * Modified each of the 3 example implementations to:

      -Simplify wording of the heading that titles the implementation.

      - put the example in a landmark region.

      - put the notes after the example.

      - Make editorial revisions  to notes for understandability.

    * Added regions to HTML source for each example.

    * Added navigation region with link back to APG checkbox pattern

    

    modified:   aria-practices.html in checkbox design pattern section:

    * Updated link text for simple two-state checkbox example.

    * Updated link text for tri-state checkbox example and provided a
summary of the example page.

 

commit fdc53d4afc6f330cbb35a8577cd1f43830871fba

Author: Matt King <a11ythinker@gmail.com>

Date:   Tue Jul 19 18:18:50 2016 -0700

 

    Tri-state checkbox example - editorial revision

    

    modified:   examples/checkbox/checkbox-2.html.

    Minor editorial revision to last sentence of second intro paragraph.

 

commit 83fa92c5cf597b37a56ba227633ee41d4c8b5cb1

Author: Matt King <a11ythinker@gmail.com>

Date:   Wed Jul 20 22:18:42 2016 -0700

 

    Fixed aria-practices.html links in 3 files.

    

    In following files, Changed href attributes referring to
../../aria-practices.html#ID; removed the file name so they are ../../#ID.

    examples/coding-template/SingleImplementationExample-Template.html

    examples/checkbox/checkbox-1.html

    examples/checkbox/checkbox-2.html

 

commit ed19f7dfda2d7ea08d23d8a086ab8e47898e994d

Author: Matt King <a11ythinker@gmail.com>

Date:   Thu Jul 21 08:11:43 2016 -0700

 

    New example template formatted for multiple implementations

    

    Added file
examples/coding-template/MultipleImplementationExample-Template.html.

    This version of the template is useful when demonstrating multiple
implementations of the same design pattern on a single page.

 

commit ae0a9ce2b5cc1655dbc8d899c9b13e8b2ed54d9d

Author: Matt King <a11ythinker@gmail.com>

Date:   Thu Jul 21 08:38:50 2016 -0700

 

    Fixed heading levels in tri-state checkbox example

    

    modified:   examples/checkbox/checkbox-2.html.

     in the HTML source code section, the headings were h3 and h4 instead of
h2 and h3.

 

commit 1cbcb6fb08793b2c3ebac384431c386e810b4724

Author: Matt King <a11ythinker@gmail.com>

Date:   Thu Jul 21 08:47:40 2016 -0700

 

    deleted:    examples/coding-template/template3.html

    This file is now an out-of-date template.

    It is replaced by the two new implementation templates.

 

Received on Thursday, 21 July 2016 19:52:32 UTC