Difference between revisions of "User:Soli/user-guide"

From wiki
Jump to navigation Jump to search
(Created page with "Test")
 
Line 1: Line 1:
−
Test
+
 
 +
= GCwiki User Guide =
 +
How to use this wiki framework.
 +
 
 +
== Structure ==
 +
# This wiki has been modularized, meaning we are using '''''transclusions'''''<nowiki> (notation as follows: {{:</nowiki>''AnyValidPageTitle''<nowiki>}}</nowiki>
 +
# The structure looks like this:
 +
 
 +
# '''Home''' (a single page view of all levels 1.x)
 +
 
 +
## '''Header'''
 +
## '''Spotlight''' (a single section view of all levels 1.2.x)
 +
### '''Spotlight-1-a'''
 +
### '''Spotlight-2-b'''
 +
## '''Main''' (a single section view of all levels 1.3.x)
 +
### '''Main-1''' (page summary)
 +
#### '''Page or article 1''' (full article)
 +
##### '''Header-small'''
 +
##### '''Page content'''
 +
##### '''Footer''' (same as Section 1.4)
 +
### '''Main-2''' (page summary)
 +
#### '''Page or article 2''' (full article, same as 1.3.1.1)
 +
### '''Main-3''' (page summary)
 +
#### '''Page or article 3''' (full article, same as 1.3.1.1)
 +
### '''Main-4''' (page summary)
 +
#### '''Page or article 4''' (full article, same as 1.3.1.1)
 +
### '''Main-5''' (page summary)
 +
#### '''Page or article 5''' (full article, same as 1.3.1.1)
 +
### '''Main-6''' (page summary)
 +
#### '''Page or article 6''' (full article, same as 1.3.1.1)
 +
### '''Main-7''' (page summary)
 +
#### '''Page or article 7''' (full article, same as 1.3.1.1)
 +
### '''Main-8''' (page summary)
 +
#### '''Page or article 8''' (full article, same as 1.3.1.1)
 +
### '''Main-9''' (page summary)
 +
#### '''Page or article 9''' (full article, same as 1.3.1.1)
 +
## '''Footer'''
 +
 
 +
# TBA
 +
 
 +
== Home, Header (call-to-action), and Footer ==
 +
# '''''Home''''' is also known as Section 1 or [[User:Soli]]
 +
# The '''''Home''''' page simply contains '''''transclusions''''' which “paste” page content into other pages, like so:
 +
{| class="wikitable"
 +
|<!-- -- -- OPTIONAL TOC -->
 +
 
 +
<nowiki>__NOTOC__</nowiki>
 +
 
 +
<nowiki>{{:User:Soli/header}}</nowiki>
 +
 
 +
<nowiki>{{:User:Soli/spotlight}}</nowiki>
 +
 
 +
<nowiki>{{:User:Soli/main}}</nowiki>
 +
 
 +
<nowiki>{{:User:Soli/footer}}</nowiki>
 +
|}
 +
These '''''transclusions'''''<nowiki> are used throughout the structure of this wiki framework. By using {{:</nowiki>''FullPageTitle''<nowiki>}}, GCwiki allows a user to include or transclude existing content.</nowiki>
 +
# '''''Header''''' is also known as Section 1.1 or [[User:Soli/header]]
 +
# The '''''Header''''' page contains the following 3 parts. These parts are unlikely to change often:
 +
## A transparent header image
 +
## An H2 header
 +
## A subtitle or caption
 +
# If ever a change is required, edit [[User:Soli/header]] and look for the following comments:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
Change HEADER IMAGE HERE!
 +
 
 +
-->
 +
|}
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
EDIT H2 HEADER here!
 +
 
 +
-->
 +
|}
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
EDIT HEADER CAPTION here!
 +
 
 +
-->
 +
|}
 +
# This page is bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
FRENCH content starts here!
 +
 
 +
-->
 +
 
 +
@fr|
 +
|}
 +
 
 +
== Spotlight ==
 +
# '''''Spotlight''''' is also known as Section 1.2 or [[User:Soli/spotlight]]
 +
# The '''''Spotlight''''' page does not require much change. It does contain 2 parts and/or '''''transclusions''''' that may require partially regular updates:
 +
## Spotlight 1 (Section 1.2.1), also known as [[User:Soli/spotlight-1]] (“Lend a hand!”)
 +
## Spotlight 2 (Section 1.2.2), also known as [[User:Soli/spotlight-2]] (“Access. statement”)
 +
# If ever a change is required, edit either [[User:Soli/spotlight-1]] or [[User:Soli/spotlight-2]] and look for the following comments:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
EDIT CONTENT here!
 +
 
 +
-->
 +
|}
 +
'''NOTE:''' Regular wiki markup may be used. Be sure to remain between the previous EDIT comment and the following:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
END CONTENT here!
 +
 
 +
-->
 +
|}
 +
# These pages are bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
FRENCH content starts here!
 +
 
 +
-->
 +
 
 +
@fr|
 +
|}
 +
 
 +
== Main ==
 +
# '''''Main''''' is also known as Section 1.3 or [[User:Soli/main]]
 +
# The '''''Main''''' page does not require much change. It does contain 9 parts and/or '''''transclusions''''' that may require partially regular updates. '''''Main''''' requires 1 part for each new addition:
 +
## '''''Main-1…2...3''''' (Section 1.3.1...2...3), caption or leader text and a link to a page, also known as [[User:Soli/main-1]] (main-2, main-3, etc.)
 +
# If ever a change is required, edit of the [[User:Soli/main-1]] (main-2, main-3, etc.) page and look for the following comments:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
EDIT CONTENT here!
 +
 
 +
-->
 +
|}
 +
'''NOTE:''' Regular wiki markup may be used. Be sure to remain between the previous EDIT comment and the following:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
END CONTENT here!
 +
 
 +
-->
 +
|}
 +
# As mentioned earlier, this page would normally contain a title, leader text, and a valid link. This link will be a link to '''''any page.''''' If this page does exist, create it first and note and replace the full title in the link. Due to certain '''''limitations''''' enforced by GCwiki, it is important to be careful replacing '''''only existing content''''', avoiding changes to the existing '''<nowiki><div></nowiki>''' and '''<nowiki><span></nowiki>''' framework setup, for example, replace only content in the highlighted areas (image (yellow), header/link (aqua), and caption/leader text (green)):
 +
{| class="wikitable"
 +
|<!-- -- --
 +
 
 +
Change IMAGE HERE! -->
 +
 
 +
<nowiki>[[File:Man-in-an-assistive-chair.jpg|none|350px|link=Accessibility-confident organizations|alt=A man on an assistive scooter.]]</nowiki>
 +
 
 +
<'''span''' style="color:rgb(28,48,47); width=350px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; height:auto; text-size-adjust:100%;">
 +
 
 +
<!-- -- --
 +
 
 +
Change LINK AND TITLE HERE! -->
 +
 
 +
<'''h4'''>[[Accessibility-confident organizations|<'''span''' style="color:rgb(28,48,47);">
 +
 
 +
Accessibility-confident organizations</'''span'''>]]</'''h4'''></'''p'''>
 +
 
 +
<!-- -- --
 +
 
 +
Change CAPTION HERE! -->
 +
 
 +
<'''p''' style="max-width:350px;">Learn how your department and agency can prepare to meet or exceed the requirements of the Accessible Canada Act.</'''p'''>
 +
 
 +
</'''span'''>
 +
 
 +
<!--
 +
 
 +
END CONTENT here!
 +
 
 +
-->
 +
|}
 +
'''NOTE:''' Line-breaks (pressing ''Enter'' once or more anywhere in a wiki page) can affect how the page is drawn. Extra line-breaks will often change the look of a wiki page. '''''Be careful not to add any new or unnecessary line-breaks.'''''
 +
# These pages are bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:
 +
{| class="wikitable"
 +
|<!--
 +
 
 +
FRENCH content starts here!
 +
 
 +
-->
 +
 
 +
@fr|
 +
|}
 +
 
 +
== New Pages ==
 +
# '''''Page''''' is also known as Section 1.3.1.1 or any valid page address using [[User:Soli/page-template]]:
 +
# The '''''Page''''' is new content. It contains 3 parts and/or '''''transclusions'''''. '''''Page''''' requires 3 parts for each new addition:
 +
## A small header
 +
## Content
 +
## A footer
 +
# [[User:Soli/page-template]] - use the following template, which includes a small header, some sample text, and the site footer.
 +
 
 +
== Accessibility Testing, and Special Notes ==
 +
These tools will more or less test for and provide similar results. It is important to test for the “basics”. Not all tools work in all operating systems or browsers. These tools will examine the entire wiki. In most cases, a user will not be able to alter the wiki styles and code, so focus can be directed to testing new content.
 +
 
 +
=== Page Contents ===
 +
# Page title (H1 provided in the wiki page title)
 +
# Image text alternatives ("alt text") (pictures, illustrations, charts, etc.)
 +
# Text
 +
## Headings (all H2 through H6 headers)
 +
## Contrast ratio ("color contrast")
 +
## Resize Text
 +
# Interaction
 +
## Keyboard access and visual focus
 +
## Forms, labels, and errors (including Search fields)
 +
# General
 +
## Moving, Flashing, or Blinking Content
 +
## Multimedia (video, audio) alternatives
 +
## Basic Structure Check
 +
 
 +
=== Tools and best practices ===
 +
# '''WAVE Browser Extensions''' (for Google Chrome and Mozilla Firefox) - once installed, this extension can run tests for errors on any single page and will alert the author if any missing, broken, or inappropriately set attributes (i.e. image alt text, headings, contrast, etc.)
 +
 
 +
# '''Accessibility Insights''' by Microsoft (for Google Chrome and Microsoft Edge) - once installed, the powerful tools can guide you through a series of automatic and manual single page tests. It is recommended that the following test be run. With the page in question open, open Accessibility Insights. A new window will open. Follow these steps:
 +
## '''FastPass''' - select FastPass and allow:
 +
### '''Automated Checks''' - these will run and report automatically. Follow instructions for resolving any found issues.
 +
 
 +
### '''Tab stops''' - once automated checks have competed, select “Tab Stops” from the left menu and set “Show tab stops” to “On”. Click back on the browser window containing the site to be tested and click “Tab” and “Shift+Tab”.
 +
NOTE: A page refresh may be required.
 +
### Ensure that the tab order follows the expected order.
 +
 
 +
## '''Assessment''' - from the pulldown menu at the top left, select “Assessment”. While there are many tests that could be considered, it is important to test the following:
 +
### '''Headings'''
 +
 
 +
## Others?
 +
 
 +
# Help:Contents - MediaWiki - general wiki markup and best practice
 +
# Accessibility - MediaWiki - general accessibility wiki markup and best practice
 +
# Accessibility guide for developers - MediaWiki - advanced best practices
 +
 
 +
=== Advanced testing ===
 +
# '''SiteImprove''' (for Google Chrome and Mozilla Firefox) - another single page test that offers a summary of top-level tests.
 +
 
 +
# '''NVDA''' by NV Access (free text-to-speech tool; Windows only) - a popular text-to-speech tool that works in all browsers. Please consult the following user guide: NVDA User Guide
 +
# '''High Contrast''' extension for Google Chrome (for browser-only high contrast testing) - once installed, allows for high contrast testing without setting the OS global setting to “High Contrast”
 +
# '''Browser Inspector and the “Accessibility” tab''' (advanced; for most browsers) - in most browsers, clicking “F12” will open the browser inspector (also available from a right-click and select “Inspect” on any webpage). Under the “Elements” tab, select the “Accessibility” tab. This view will report on the “Accessibility Tree”, “ARIA Attributes”, and “Computed Properties”. This  can be useful if other tools cannot provide enough information to find the cause of an issue.
 +
 
 +
# '''Browser Inspector and the aXe - Web Accessibility Testing extension''' (advanced; for Google Chrome and Mozilla Firefox) - in most browsers, clicking “F12” will open the browser inspector. Once installed, “axe” will be available in the main inspector window. Click on it to analyse a single page.
 +
# Videos and other external data?
 +
# PDFs and other documents?

Revision as of 17:37, 27 January 2020

GCwiki User Guide

How to use this wiki framework.

Structure

  1. This wiki has been modularized, meaning we are using transclusions (notation as follows: {{:AnyValidPageTitle}}
  2. The structure looks like this:
  1. Home (a single page view of all levels 1.x)
    1. Header
    2. Spotlight (a single section view of all levels 1.2.x)
      1. Spotlight-1-a
      2. Spotlight-2-b
    3. Main (a single section view of all levels 1.3.x)
      1. Main-1 (page summary)
        1. Page or article 1 (full article)
          1. Header-small
          2. Page content
          3. Footer (same as Section 1.4)
      2. Main-2 (page summary)
        1. Page or article 2 (full article, same as 1.3.1.1)
      3. Main-3 (page summary)
        1. Page or article 3 (full article, same as 1.3.1.1)
      4. Main-4 (page summary)
        1. Page or article 4 (full article, same as 1.3.1.1)
      5. Main-5 (page summary)
        1. Page or article 5 (full article, same as 1.3.1.1)
      6. Main-6 (page summary)
        1. Page or article 6 (full article, same as 1.3.1.1)
      7. Main-7 (page summary)
        1. Page or article 7 (full article, same as 1.3.1.1)
      8. Main-8 (page summary)
        1. Page or article 8 (full article, same as 1.3.1.1)
      9. Main-9 (page summary)
        1. Page or article 9 (full article, same as 1.3.1.1)
    4. Footer
  1. TBA

Home, Header (call-to-action), and Footer

  1. Home is also known as Section 1 or User:Soli
  2. The Home page simply contains transclusions which “paste” page content into other pages, like so:

__NOTOC__

{{:User:Soli/header}}

{{:User:Soli/spotlight}}

{{:User:Soli/main}}

{{:User:Soli/footer}}

These transclusions are used throughout the structure of this wiki framework. By using {{:FullPageTitle}}, GCwiki allows a user to include or transclude existing content.

  1. Header is also known as Section 1.1 or User:Soli/header
  2. The Header page contains the following 3 parts. These parts are unlikely to change often:
    1. A transparent header image
    2. An H2 header
    3. A subtitle or caption
  3. If ever a change is required, edit User:Soli/header and look for the following comments:
  1. This page is bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:

@fr|

Spotlight

  1. Spotlight is also known as Section 1.2 or User:Soli/spotlight
  2. The Spotlight page does not require much change. It does contain 2 parts and/or transclusions that may require partially regular updates:
    1. Spotlight 1 (Section 1.2.1), also known as User:Soli/spotlight-1 (“Lend a hand!”)
    2. Spotlight 2 (Section 1.2.2), also known as User:Soli/spotlight-2 (“Access. statement”)
  3. If ever a change is required, edit either User:Soli/spotlight-1 or User:Soli/spotlight-2 and look for the following comments:

NOTE: Regular wiki markup may be used. Be sure to remain between the previous EDIT comment and the following:

  1. These pages are bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:

@fr|

Main

  1. Main is also known as Section 1.3 or User:Soli/main
  2. The Main page does not require much change. It does contain 9 parts and/or transclusions that may require partially regular updates. Main requires 1 part for each new addition:
    1. Main-1…2...3 (Section 1.3.1...2...3), caption or leader text and a link to a page, also known as User:Soli/main-1 (main-2, main-3, etc.)
  3. If ever a change is required, edit of the User:Soli/main-1 (main-2, main-3, etc.) page and look for the following comments:

NOTE: Regular wiki markup may be used. Be sure to remain between the previous EDIT comment and the following:

  1. As mentioned earlier, this page would normally contain a title, leader text, and a valid link. This link will be a link to any page. If this page does exist, create it first and note and replace the full title in the link. Due to certain limitations enforced by GCwiki, it is important to be careful replacing only existing content, avoiding changes to the existing <div> and <span> framework setup, for example, replace only content in the highlighted areas (image (yellow), header/link (aqua), and caption/leader text (green)):

[[File:Man-in-an-assistive-chair.jpg|none|350px|link=Accessibility-confident organizations|alt=A man on an assistive scooter.]]

<span style="color:rgb(28,48,47); width=350px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; height:auto; text-size-adjust:100%;">


<h4><span style="color:rgb(28,48,47);"> Accessibility-confident organizations</span></h4></p>


<p style="max-width:350px;">Learn how your department and agency can prepare to meet or exceed the requirements of the Accessible Canada Act.</p>

</span>

NOTE: Line-breaks (pressing Enter once or more anywhere in a wiki page) can affect how the page is drawn. Extra line-breaks will often change the look of a wiki page. Be careful not to add any new or unnecessary line-breaks.

  1. These pages are bilingual. Change to French content is made on the same page (at the bottom, just following the @fr| tag), like so:

@fr|

New Pages

  1. Page is also known as Section 1.3.1.1 or any valid page address using User:Soli/page-template:
  2. The Page is new content. It contains 3 parts and/or transclusions. Page requires 3 parts for each new addition:
    1. A small header
    2. Content
    3. A footer
  3. User:Soli/page-template - use the following template, which includes a small header, some sample text, and the site footer.

Accessibility Testing, and Special Notes

These tools will more or less test for and provide similar results. It is important to test for the “basics”. Not all tools work in all operating systems or browsers. These tools will examine the entire wiki. In most cases, a user will not be able to alter the wiki styles and code, so focus can be directed to testing new content.

Page Contents

  1. Page title (H1 provided in the wiki page title)
  2. Image text alternatives ("alt text") (pictures, illustrations, charts, etc.)
  3. Text
    1. Headings (all H2 through H6 headers)
    2. Contrast ratio ("color contrast")
    3. Resize Text
  4. Interaction
    1. Keyboard access and visual focus
    2. Forms, labels, and errors (including Search fields)
  5. General
    1. Moving, Flashing, or Blinking Content
    2. Multimedia (video, audio) alternatives
    3. Basic Structure Check

Tools and best practices

  1. WAVE Browser Extensions (for Google Chrome and Mozilla Firefox) - once installed, this extension can run tests for errors on any single page and will alert the author if any missing, broken, or inappropriately set attributes (i.e. image alt text, headings, contrast, etc.)
  1. Accessibility Insights by Microsoft (for Google Chrome and Microsoft Edge) - once installed, the powerful tools can guide you through a series of automatic and manual single page tests. It is recommended that the following test be run. With the page in question open, open Accessibility Insights. A new window will open. Follow these steps:
    1. FastPass - select FastPass and allow:
      1. Automated Checks - these will run and report automatically. Follow instructions for resolving any found issues.
      1. Tab stops - once automated checks have competed, select “Tab Stops” from the left menu and set “Show tab stops” to “On”. Click back on the browser window containing the site to be tested and click “Tab” and “Shift+Tab”.

NOTE: A page refresh may be required.

      1. Ensure that the tab order follows the expected order.
    1. Assessment - from the pulldown menu at the top left, select “Assessment”. While there are many tests that could be considered, it is important to test the following:
      1. Headings
    1. Others?
  1. Help:Contents - MediaWiki - general wiki markup and best practice
  2. Accessibility - MediaWiki - general accessibility wiki markup and best practice
  3. Accessibility guide for developers - MediaWiki - advanced best practices

Advanced testing

  1. SiteImprove (for Google Chrome and Mozilla Firefox) - another single page test that offers a summary of top-level tests.
  1. NVDA by NV Access (free text-to-speech tool; Windows only) - a popular text-to-speech tool that works in all browsers. Please consult the following user guide: NVDA User Guide
  2. High Contrast extension for Google Chrome (for browser-only high contrast testing) - once installed, allows for high contrast testing without setting the OS global setting to “High Contrast”
  3. Browser Inspector and the “Accessibility” tab (advanced; for most browsers) - in most browsers, clicking “F12” will open the browser inspector (also available from a right-click and select “Inspect” on any webpage). Under the “Elements” tab, select the “Accessibility” tab. This view will report on the “Accessibility Tree”, “ARIA Attributes”, and “Computed Properties”. This  can be useful if other tools cannot provide enough information to find the cause of an issue.
  1. Browser Inspector and the aXe - Web Accessibility Testing extension (advanced; for Google Chrome and Mozilla Firefox) - in most browsers, clicking “F12” will open the browser inspector. Once installed, “axe” will be available in the main inspector window. Click on it to analyse a single page.
  2. Videos and other external data?
  3. PDFs and other documents?
Retrieved from "https://wiki.gccollab.ca/index.php?title=User:Soli/user-guide&oldid=16778"