FamilySearch Wiki:WCAG Required Changes to Wikitext Code: Difference between revisions

From FamilySearch Wiki
VisualWikitext
(summary)
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{breadcrumb
| link1=[[FamilySearch Wiki:Manual of Style|Wiki Manual of Style]]
| link2=
| link3=
| link4=
| link5=[[FamilySearch Wiki:WCAG Required Changes to Wikitext Code|WCAG Required Changes to Wikitext Code]]
}}
==Changes to Wiki Pages==
==Changes to Wiki Pages==
As a result of the European Union requirement to implement changes to all websites to improve accessibility, the Research Wiki has made changes to comply and provide a better experience to those that use accessibility readers. For more information, visit the [https://www.w3.org/TR/WCAG21/ Web Content Accessibility Guidelines (WCAG) 2.1] website.
As a result of the European Union requirment to implement changes to all website to improve accessibility, the Research Wiki has gone under massive changes to comply and provide a better experience to those that use accessibility readers.
*See [[FamilySearch Wiki:WCAG Checklist|WCAG Checklist]] for a quick review of necessary changes.
==Summary of New Requirements==
Certain wikitext coding previously used for Wiki articles can no longer be used and must be changed. Some of these changes include:


===Checked by Lighthouse===
==Contributing to the Wiki==
Certain wikitext coding used for articles in the past can no longer be used. Some of these changes include:
*'''Headings.''' Wiki pages now require a heading 2 before any free text on a Wiki page. (breadcrumbs and SEO paragraphs do not count).  
*'''Headings.''' Wiki pages now require a heading 2 before any free text on a Wiki page. (breadcrumbs and SEO paragraphs do not count).  
**Example: Replace all Heading 3s found as the first heading on a Wiki page to Heading 2.
<br>
*'''Use of indention on a Wiki page.''' Wiki pages can no longer with a colon to indent (i.e., <nowiki>:*</nowiki> or <nowiki>::</nowiki> on a Wiki page. This also includes indenting a bullet. The use of a indent template is required. For more information go to: [[Template:Block indent]].
Example: Replace all Heading 3s found as the first heading on a Wiki page.
**Example: <nowiki>**</nowiki> used to indent an asterisk. We can no longer use <nowiki>:* </nowiki> or <nowiki>::* </nowiki>
<br>
**Example: Proper use of template to indent text:<nowiki>{{Block indent|Clerk of the Senate}}</nowiki>
*'''Use language template.''' To signify to a screen reader that the word it is reading is in a different language, a template must be added around each foreign language word.
*'''Font Color.''' Font on a page should be either black (text) or blue (URL links). All other colors of font interfere with contrast ratio and will not pass.
<br>
**'''Red links.''' Any red links on a Wiki page bring up the error: "Background and foreground colors do not have a sufficient contrast ratio." The goal is to remove all red links.
Example: ''We do not have a template in the Wiki to support this endeavor. For now it is on hold.''  
*'''Alt Text.''' All images are to include alt text within the link of the image describing what the image.
<br>
**Example: <nowiki>[[Image:Akershus-Norway.jpg|thumb|200px|alt=Akershus locator map]]</nowiki>
*'''<nowiki><ul></nowiki> lists.''' There is incorrect wikitext code on Wiki pages incorrectly using the <nowiki><ul></nowiki> class.  
*'''Navigation boxes.''' Although used heavily in the beginning of the Wiki, navigation boxes present difficultly in providing enough space between links to allow ease in clicking on the link. They do not pass WCAG guidelines. Thus, all navigation boxes will be removed from Wiki pages.
<br>
*'''<nowiki><ul></nowiki> lists.''' Any Wiki page that uses <nowiki><ul></nowiki> class must to be checked to make sure it is correct.*'''Update Tables.''' All tables must be updated to the correct wikitext coding to display the content. These changes include:
*'''Update Tables.''' All tables must be updated to the correct wikitext coding to display the content. These changes include:
**'''Title of Table.''' All tables should have a title to help explain the purpose of the table. It can be added to the table using <nowiki>|+ </nowiki> directly below the class of the table. Or can be a heading or text directly above the table.
**'''Wikitable Class.''' All tables should be changed to wiki wikitable class. Additional guidance can be found on [[FamilySearch_Wiki:Manual_of_Style-Tables|Manual of Style-Tables]].
***Example: [[FamilySearch Wiki:Manual of Style-Tables#Wikitext|Wikitext of a wikitable]]
<br>
**'''Colors of cells in tables.''' Colors can enhance the readability of a table. However, the color must have a proper contrast for those with color blindness. Hyperlinks (blue text) must also pass the contrast test in addition to the black text. See [[FamilySearch Wiki:WCAG Acceptable Table Colors|WCAG Acceptable Table Colors]] for more information.
Examples: <nowiki>class="wikitable"</nowiki>; <nowiki>class="wikitable sortable"</nowiki>
**'''Identify columns and rows.''' Additional code must be added to a table to identify to the screen reader column headings and row headings.
**'''Colors of cells in tables.''' Colors can enhance the readability of a table. However, the color must have a proper contrast for those with color blindness. Hyperlinks (blue text) must also pass the contrast test in addition to the black text. Use [https://www.w3schools.com/colors/colors_picker.asp Color picker] at W3schools for assistance.
***Example: Below is a sample of a table with the correct wikitext code for column and row headings:
<br>
<nowiki>{| class="wikitable"</nowiki>
**'''Tables given a title.''' All tables should have a title to help explain the purpose of the table. It can be added to the table using <nowiki>|+ </nowiki> directly below the class of the table.
<nowiki>|+ Main Characters of Star Trek: The Original Series</nowiki>
<br>
<nowiki>|-</nowiki>
Example: [[FamilySearch Wiki:Manual of Style-Tables#Wikitext|Wikitext of a wikitable]]
<nowiki>! scope="col" | Rating</nowiki>
<br>
<nowiki>! scope="col" | Rank</nowiki>
**'''Identify columns and rows.''' Additional code must be added to a table to identify to the reader column headings and row headings.
<nowiki>! scope="col" | Name</nowiki>
<br><br>
<nowiki>! scope="col" | Actor</nowiki>
Example: Below is a sample of a table with the correct wikitext code for column and row headings:
<nowiki>|-</nowiki>
<nowiki>{| class="wikitable"</nowiki><br>
<nowiki>! scope="row" | Captain</nowiki>
<nowiki>|+ Main Characters of Star Trek: The Original Series</nowiki><br>
<nowiki>| Captain || Kirk, James T || William Shatner</nowiki>
<nowiki>|-</nowiki><br>
<nowiki>|-</nowiki>
<nowiki>! scope="col" | Rating</nowiki><br>
<nowiki>! scope="row" | First Officer</nowiki>
<nowiki>! scope="col" | Rank</nowiki><br>
<nowiki>| Commander || Spock || Leonard Nimoy</nowiki>  
<nowiki>! scope="col" | Name</nowiki><br>
<nowiki>|-</nowiki>
<nowiki>! scope="col" | Actor</nowiki><br>
<nowiki>! scope="row" | Chief Medical Officer </nowiki>
<nowiki>|-</nowiki><br>
<nowiki>| Lt Commander || Leonard McCoy || DeForest Kelley</nowiki>
<nowiki>! scope="row" | Captain</nowiki><br>
<nowiki>|-</nowiki>
<nowiki>| Captain || Kirk, James T || William Shatner</nowiki><br>
<nowiki>! scope="row" | Chief Engineer</nowiki>
<nowiki>|-</nowiki><br>
<nowiki>| Lt Commander || Montgomery Scott || James Doohan</nowiki>
<nowiki>! scope="row" | First Officer</nowiki><br>
<nowiki>|}</nowiki><br>
<nowiki>| Commander || Spock || Leonard Nimoy</nowiki><br>  
<nowiki>|-</nowiki><br>
<nowiki>! scope="row" | Chief Medical Officer </nowiki><br>
<nowiki>| Lt Commander || Leonard McCoy || DeForest Kelley</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>! scope="row" | Chief Engineer</nowiki><br>
<nowiki>| Lt Commander || Montgomery Scott || James Doohan</nowiki><br>
<nowiki>|}</nowiki><br>


===Lighthouse Does Not Check - Do Manually===
<br><br>
*'''Use of color on a table to indicate information.''' Because of the limitations of a screen reader, color cannot be distinguished to the user. Thus, there is no communication of what the color represents. The table should be revamped to add text to convey the information.
**'''Use of color on a table to indicate information.''' Because of the limitations of a screen reader, color cannot be distinguished to the user. Thus, there is no communication of what the color represents.  
**Example: incorrect=[[England_Church_Records#Major_Resources|England Church Records table]]
<br>
*'''Wikitable Class.''' All tables should be changed to wiki wikitable class. Additional guidance can be found on [[FamilySearch_Wiki:Manual_of_Style-Tables|Manual of Style-Tables]].
Example: [[England_Church_Records#Major_Resources|England Church Records table]]
**Examples: <nowiki>class="wikitable"</nowiki>; <nowiki>class="wikitable sortable"</nowiki>
<br>
*'''ON HOLD UNTIL TEMPLATE CREATED! Use language template.''' To signify to a screen reader that the word it is reading is in a different language, code must be added around each foreign language word to indict language.
*'''Use of indention on a Wiki page.''' Wiki pages can no longer with a colon to indent on a Wiki page. This also includes indenting a bullet. The use of a indent template is required. For more information go to: [[Template:Block indent]].
**Example: ''We do not have a template in the Wiki to support this endeavor. For now it is on hold.''
*'''"Click here" or "Link".''' All links in the Wiki must identify where the link is going. Do not use "click here" or "Link" as the label of a link.
 
===Not Passing in Lighthouse:===
*'''Internal Links.''' Blue internal links are not passing because of "Links rely on color to be distinguishable." However, after extensive research and testing, it was determined MediaWiki makes all internal links underlined when hovering over the link. Screen readers recognize this as a link and inform the users. No action required.
<br>
<br>
Example: <nowiki> ** </nowiki> used to indent an asterisk.
Example: Proper use of template to indent text:<nowiki>{{Block indent|Clerk of the Senate}}</nowiki>
<br>
<br>
[[Category:Wiki Administration]]

Revision as of 15:25, 11 August 2025

Changes to Wiki Pages[edit | edit source]

As a result of the European Union requirment to implement changes to all website to improve accessibility, the Research Wiki has gone under massive changes to comply and provide a better experience to those that use accessibility readers.

Contributing to the Wiki[edit | edit source]

Certain wikitext coding used for articles in the past can no longer be used. Some of these changes include:

  • Headings. Wiki pages now require a heading 2 before any free text on a Wiki page. (breadcrumbs and SEO paragraphs do not count).


Example: Replace all Heading 3s found as the first heading on a Wiki page.

  • Use language template. To signify to a screen reader that the word it is reading is in a different language, a template must be added around each foreign language word.


Example: We do not have a template in the Wiki to support this endeavor. For now it is on hold.

  • <ul> lists. There is incorrect wikitext code on Wiki pages incorrectly using the <ul> class.


  • Update Tables. All tables must be updated to the correct wikitext coding to display the content. These changes include:
    • Wikitable Class. All tables should be changed to wiki wikitable class. Additional guidance can be found on Manual of Style-Tables.


Examples: class="wikitable"; class="wikitable sortable"

    • Colors of cells in tables. Colors can enhance the readability of a table. However, the color must have a proper contrast for those with color blindness. Hyperlinks (blue text) must also pass the contrast test in addition to the black text. Use Color picker at W3schools for assistance.


    • Tables given a title. All tables should have a title to help explain the purpose of the table. It can be added to the table using |+ directly below the class of the table.


Example: Wikitext of a wikitable

    • Identify columns and rows. Additional code must be added to a table to identify to the reader column headings and row headings.



Example: Below is a sample of a table with the correct wikitext code for column and row headings: {| class="wikitable"
|+ Main Characters of Star Trek: The Original Series
|-
! scope="col" | Rating
! scope="col" | Rank
! scope="col" | Name
! scope="col" | Actor
|-
! scope="row" | Captain
| Captain || Kirk, James T || William Shatner
|-
! scope="row" | First Officer
| Commander || Spock || Leonard Nimoy
|-
! scope="row" | Chief Medical Officer
| Lt Commander || Leonard McCoy || DeForest Kelley
|-
! scope="row" | Chief Engineer
| Lt Commander || Montgomery Scott || James Doohan
|}



    • Use of color on a table to indicate information. Because of the limitations of a screen reader, color cannot be distinguished to the user. Thus, there is no communication of what the color represents.


Example: England Church Records table

  • Use of indention on a Wiki page. Wiki pages can no longer with a colon to indent on a Wiki page. This also includes indenting a bullet. The use of a indent template is required. For more information go to: Template:Block indent.


Example: ** used to indent an asterisk. Example: Proper use of template to indent text:{{Block indent|Clerk of the Senate}}

Retrieved from "https://integration-ru.familysearch.org/en/wiki/index.php?title=FamilySearch_Wiki:WCAG_Required_Changes_to_Wikitext_Code&oldid=6384505"