Reformatted and revamped the checklist pages in both EN and FR

Close #628

Author: Silverhustle

src/pages/en/microsoft-document-compliance-checklist.md

@@ -30,105 +30,91 @@ tags:
 
 Below are questions that will help you establish if your Microsoft Office document is accessible. We provide the Success Criteria in reference with WCAG 2.1: [How to Meet WCAG - Quick Reference](http://www.w3.org/WAI/WCAG21/quickref/) and the [Canada.ca Content Style Guide](https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html).
 
-Remember to answer NA (not application) if a question is not relevant to your document. For example, there are no table of content in Excel documents.
+Remember to answer NA (not applicable) if a question is not relevant to your document. For example, there is no table of content in Excel documents.
 
 If you answer ‘No’ to one of the following questions, then your document IS NOT accessible.
 
-## A. General information
+## General
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A1 (2.4.2) &ndash; Are document Properties filled out properly (title, author, subject)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A2 (3.1.1) &ndash; Is the language of the document properly set?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A3 (4.1.1) &ndash; Did the document fully pass the Accessibility Checker ?<sup id="fn1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup></li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A4 (1.3.1) &ndash; Is the document free from content such as comments, track changes, and highlight?</li> <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A5     (1.3.2) &ndash; Is the order of the content accurate and logical (instructions or introduction first) ?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A6 (1.4.4) &ndash; Can all the text be resized and still be considered readable when magnified to 200%?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A7 (3.3.2) &ndash; Is the document free from electronically fillable forms?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A8 &ndash; Does the readability grade level meet the target audience: up to grade 8 for public audience and up to grade 10 for internal to ESDC?  <sup id="fn2-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Footnote </span>2</a></sup></li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A9 (3.1.4) &ndash; Are all acronyms provided in full words (or spell out) the first time they are in usage in the document?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>A10 (1.4.12) &ndash; Is the textual content line spacing a minimum of 1.5 (line spacing)?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are document Properties filled out properly (title, author, subject)? (2.4.2)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the language of the document properly set? (3.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Did the document fully pass the Accessibility Checker? (4.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from content such as comments, track changes, and highlight? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the order of the content accurate and logical (instructions or introduction first)? (1.3.2)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from electronically fillable forms? (3.3.2)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Can all the text be resized and still be considered readable when magnified to 200%? (1.4.4)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the readability grade level meet the target audience: up to grade 8 for public audience and up to grade 10 for internal to ESDC?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are all acronyms provided in full words (or spelled out) the first time they are used in the document? (3.1.4)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the spacing between lines of text a minimum of 1.5? (1.4.12)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the text free of any tabs or spaces to align or centre the text? Use the feature indent and spacing of the paragraph instead.</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the text aligned left or right, and never justified (aligned on both sides)?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the text free of empty new lines or hard returns to create space between the paragraphs? Use page break or before and after paragraph option instead.</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Use italics only as recommended by the Canada.ca Content Style Guide.</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Use Strong paragraph style text and only for certain words and short phrases not full sentences or paragraphs.</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Use only sans-serif styles like Verdana, Tahoma, Arial, Helvetica.</li>
 </ul>
 
-## B. Color
+## Colour
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span> B1 (1.4.1) &ndash; Does any information conveyed with color have a non-color method for understanding (is the information available when you remove the colors)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span> B2 (1.4.3) &ndash; Does all text (with the exception of logos) have a contrast ratio of 4.5:1 or greater no matter the font size?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does any information conveyed with color have a non-color method for understanding (is the information available when you remove the colors)? (1.4.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do all non-text objects like graphs or drawings (with the exception of logos and photographs) have a contrast ratio of 3:1 or greater? (1.4.3)</li>
 </ul>
 
-## C. Links
+## Links
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>C1 (1.4.1) &ndash; Links are identified with a method other than color (such as underline and bold)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>C2 (2.4.4) &ndash; Does the hypertext links alone defines the context? </li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>C3 (2.4.4) &ndash; Does generic link text have sufficient context (not using the words Link or click here)?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are links identified using the Hyperlink paragraph style? (1.4.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do hyperlinks provide link text that identifies the purpose of the link without needing additional context? (2.4.4)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does generic link text have sufficient context (not using the words Link or click here)? (2.4.4)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are all links properly linked (no broken links)?</li>
 </ul>
 
-## D. Images
+## Images
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D1 (1.1.1) &ndash; Do all informational images have alt text that provides the same level of understanding a visual user would gain?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D2 (1.1.1) &ndash; Do all decorative images have “ “ in the alt text field (or alt=’decorative’)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D3 (1.1.1) &ndash; Are multi-layered objects grouped (or flattened) into one (object) and the group use only alternative text description?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D4 (1.1.1) &ndash; Do complex informational (not decorative) images have an alternate accessible means of understanding (usually a long description)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D5 (1.4.5) &ndash; Is the document free from any content that should not be included as an image? (Picture of a table with text, image of text)</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>D6 (2.3.1) &ndash; Is the document free from content that flashes more than 3 times per second?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do all informational images have alt text that provides the same level of understanding a visual user would gain? (1.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are all decorative images marked decorative (containing “ ” or the word “decorative” in the alt text field)? (1.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are multi-layered objects grouped into one object and appropriate alternative text applied, if required? (1.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do complex informational (not decorative) images have an alternate accessible means of understanding (usually a long description or caption)? (1.1.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from any content that should not be included as an image? (Picture of a table with text, image of text) (1.4.5)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from content that flashes more than 3 times per second? (2.3.1)</li>
 </ul>
 
-## E. Tables
+## Tables
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>E1 (1.3.1) &ndash; Was the table created with the built in table styles (not with spaces or indent)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>E2 (1.3.1) &ndash; Does the table structure match the visual table layout (simple layout structure – no merge or split cells)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>E3 (1.3.1) &ndash; Do all tables have define header row(s)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>E4 (1.3.1) &ndash; Is the document free from tables used for content that is not a data (tables used for layout only)?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>E5 (1.3.1) &ndash; Is the document free from data tables with merged cells, both column and row header cells?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Were tables created with the built in table styles (not with spaces or indent)? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the table structure match the visual table layout (simple layout structure – no merged or split cells)? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do all tables have defined header row(s) and/or header column(s)? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from tables used for content that is not a data (tables used for layout only)? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the document free from data tables with merged cells, both column and row header cells? (1.3.1)</li>
 </ul>
 
-## F. Lists
+## Lists
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>F1 (1.3.1) &ndash; Does the document contain only lists built with list styles?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>F2 (1.3.1) &ndash; Are multiple lists in the same document properly organized (grouped or at levels)?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the document contain only lists built with list styles? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are multiple lists in the same document properly organized (grouped or at levels)? (1.3.1)</li>
 </ul>
 
-## G. Headings
+## Headings
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>G1 (1.3.1) &ndash; Is all the text that acts as a visual heading marked with the proper heading style?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>G2 (1.3.1) &ndash; Do headings follow a logical hierarchical progression? (for example, H1-H2-H3)</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>G3 (1.3.1) &ndash; Are all the headings visually modified via the Heading Style?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>G4 (2.4.6) &ndash; Does the heading text accurately describe the following content?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>G5 (2.4.6) &ndash; Does the document contain a heading style for each section identified?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is all text that acts as a visual heading marked with the proper heading style? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Do headings follow a logical hierarchical progression? (for example, H1-H2-H3) (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are all the headings visually modified via the heading style? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the heading text accurately describe the following content? (2.4.6)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the document contain a heading style for each section? (2.4.6)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Does the Navigation pane from the View menu show all the headings, and nothing more (including no empty lines)?</li>
 </ul>
 
-## H. Other elements
+## Other elements
 
 <ul class="list-unstyled mrgn-tp-lg mrgn-lft-lg">
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>H1 (1.3.1) &ndash; Is the table of contents (<abbr>TOC</abbr>) generated with the built in office styles? </li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>H2 (1.3.1) &ndash; Are citations and footnotes/endnotes created with the built in office styles?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>H3 (3.1.2) &ndash; Is the language properly set for foreign words or phrases?</li>
-    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>H4 (1.3.1) &ndash; Is information in the header, footer, watermark, speaker notes, etc. available in the main body of the document (except page numbering)?</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the table of contents (TOC) generated with the built in office styles? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Are citations and footnotes/endnotes created with the built in office styles? (1.3.1)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is the language properly set for the corresponding language of words or phrases? (3.1.2)</li>
+    <li class="mrgn-bttm-md"><span class="far fa-square mrgn-rght-md" aria-hidden="true"></span>Is information in the header, footer, watermark, speaker notes, etc. available in the main body of the document (except page numbering)? (1.3.1)</li>
 </ul>
-
-## Resources
-
-- This checklist was built using information on [Making Files Accessible](https://www.hhs.gov/web/section-508/accessibility-checklists/index.html) from the Digital Communications Division (<abbr>DCD</abbr>).
-- Success criteria refer to [How to Meet WCAG 2.1 - Quick Reference](http://www.w3.org/WAI/WCAG21/quickref/)
-- For more information on using plain language, refer to [Canada.ca Content Style Guide](https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html).
-- Microsoft has numerous FREE videos on their Youtube channel [MSFTEnable](https://www.youtube.com/user/MSFTEnable) with good learning tool.
-
-<aside class="wb-fnote" role="note">
-    <h2 id="fn">Footnotes</h2>
-    <dl>
-        <dt>Footnote 1</dt>
-        <dd id="fn1">
-            <p>The Accessibility Checker is a useful tool found in Word, Excel and PowerPoint. It will really assist you in making your document accessible by telling you what is not accessible and how to fix it. To learn more about this tool, consult Microsoft <a href="https://support.office.com/en-en/article/r%C3%A8gles-pour-le-v%C3%A9rificateur-d-accessibilit%C3%A9-651e08f2-0fc3-4e10-aaca-74b4a67101c1">Rules  for the Accessibility Checker</a>.</p>
-            <p class="fn-rtn"><a href="#fn1-rf"><span class="wb-inv">Return to footnote </span>1<span class="wb-inv"> referrer</span></a></p>
-        </dd>
-        <dt>Footnote 2</dt>
-        <dd id="fn2">
-            <p>Refer to <a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html#toc6">Canada.ca Content Style Guide - Plain language</a>.</p>
-            <p class="fn-rtn"><a href="#fn2-rf"><span class="wb-inv">Return to footnote </span>2<span class="wb-inv"> referrer</span></a></p>
-        </dd>
-    </dl>
-</aside>