FamilySearch Wiki

FamilySearch Wiki:WCAG Required Changes to Wikitext Code

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 Web Content Accessibility Guidelines (WCAG) 2.1 website.

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

  • 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.
  • Use of indention on a Wiki page. Wiki pages can no longer with a colon to indent (i.e., :* or :: 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. We can no longer use :* or ::*
    • Example: Proper use of template to indent text:{{Block indent|Clerk of the Senate}}
  • 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.
    • 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.
  • Alt Text. All images are to include alt text within the link of the image describing what the image.
    • Example: [[Image:Akershus-Norway.jpg|thumb|200px|alt=Akershus locator map]]
  • 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.
  • <ul> lists. Any Wiki page that uses <ul> 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:
    • 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 |+ directly below the class of the table. Or can be a heading or text directly above the table.
    • 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 WCAG Acceptable Table Colors for more information.
    • Identify columns and rows. Additional code must be added to a table to identify to the screen 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
|}

Lighthouse Does Not Check - Do Manually

  • 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.
  • 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"
  • 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.
    • 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.



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