No edit summary |
No edit summary |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{breadcrumb | |||
| link1=[[FamilySearch Wiki:Manual of Style|Wiki Manual of Style]] | |||
| link2=[[FamilySearch Wiki:WCAG Required Changes to Wikitext Code|WCAG Required Changes to Wikitext Code]] | |||
| link3= | |||
| link4= | |||
| link5=[[FamilySearch Wiki:Manual of Style-Tables|Manual of Style-Tables]] | |||
}} | |||
==Purpose== | |||
*Below describes the process of updating old wiki tables to new ones in an effort to comply to [https://www.w3.org/TR/WCAG21/ WCAG 2.1 AA guidelines]. | |||
*The [https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial Wikipedia Manual of Style] that describes accessibility best practices was used to clarify what is allowed and not allowed when creating tables on the Research Wiki. | |||
*See [[FamilySearch Wiki:Manual of Style-Table Examples|Manual of Style-Table Examples]] for examples of approved tables with wikitext. | |||
==Checklist== | |||
*Defined as Wikitable | |||
*Scope defined | |||
*Row defined | |||
*Remove color | |||
==Color== | |||
*To solve contrast color of a table and the black and blue text, use [https://www.w3schools.com/colors/colors_picker.asp Color picker] at W3schools | |||
*Typically, the color must be at least 90% | |||
*Known colors that pass [https://www.w3.org/TR/WCAG21/ WCAG 2.1 AA guidelines] can be found below and on [[FamilySearch Wiki:WCAG Acceptable Table Colors|WCAG Acceptable Table Colors]] Wiki page. | |||
**Light pink: #FEE8E8 | |||
**Light lavender: #FCE6FE | |||
**Light violet: #F3ECFE | |||
**Light Cyan: #DBFBFD | |||
**Light blue: #E6F0FE | |||
**Light magenta: #F1EBF1 | |||
**Light peach: #FCECCC | |||
**Light green: #E2FCE0 | |||
== Creating New Tables == | == Creating New Tables == | ||
| Line 18: | Line 49: | ||
| 3 || scope="row" || First Officer || Commander || Spock || Leonard Nimoy | | 3 || scope="row" || First Officer || Commander || Spock || Leonard Nimoy | ||
|- | |- | ||
| | | 4 || scope="row" || Chief Medical Officer || Lt Commander || Leonard "Bones" McCoy || DeForest Kelley | ||
|- | |- | ||
| | | 5 || scope="row" || Chief Engineer || Lt Commander || Montgomery "Scotty" Scott || James Doohan | ||
|} | |} | ||
| Line 114: | Line 145: | ||
* '''Replace with:''' <span style="background:#E9EEF6> \1\n| </span> | * '''Replace with:''' <span style="background:#E9EEF6> \1\n| </span> | ||
* '''Action:''' Click '''Replace All'''. | * '''Action:''' Click '''Replace All'''. | ||
== Updating Existing Tables == | |||
These instructions use Notepad++'s "Replace" function with "Regular expression" search mode. There are two steps to reformat the header row and one step for the data rows. Make sure your cursor is at the beginning of the file before starting this process, or make sure the "Wrap Around" checkbox in the '''Replace''' window is checked. | |||
To edit the table in Notepad++ first copy the existing table from the FSRW using '''Edit Source''', use your cursor to highlight the table, press '''Ctrl+C''' to copy it, then create a new file in Notepad++ '''(CTRL+N)''' and paste the table '''(Ctrl+V)''' into the new file. | |||
=== Reformatting the Header Row === | |||
Perform these two steps in order: | |||
;Step 1: Change the first "!!" to "|" | |||
* '''Purpose:''' To correctly format the first header element. | |||
* '''Open Replace Dialog:''' Press Ctrl + H. | |||
* '''Search Mode:''' Select Regular expression. | |||
* '''Find what:''' <span style="background:#E9EEF6> ^! (.*?) !! </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> ! scope="col" | \1\n! scope="col" | </span> | |||
* '''Action:''' Click '''Replace All'''. | |||
;Step 2: Break up the remaining "!!" and add "! scope="col" |" | |||
* '''Purpose:''' To format the subsequent header elements onto new lines. | |||
* '''Open Replace Dialog:''' (If not already open) Press Ctrl + H. | |||
* '''Search Mode:''' Ensure Regular expression is still selected. | |||
* '''Find what:''' <span style="background:#E9EEF6> !! </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> \n! scope="col" | </span> | |||
* '''Action:''' Click '''Replace All'''. | |||
=== Reformatting Data Rows === | |||
This is a single step: | |||
* '''Purpose:''' Change each data row to add prefix text "! scope="row"", and the FSHI template with alternate text to the DGS number in the first column. | |||
*'''Open Replace Dialog:''' Press Ctrl + H. | |||
*'''Search Mode:''' Select Regular expression. | |||
*'''Find what:''' <span style="background:#E9EEF6>^\| (\d+) \|\|(.*)$ </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> ! scope="row" | <nowiki>{{FSHI|DGS=\1|alt=\1}}</nowiki>\n|\2 </span> | |||
*'''Action:''' Click '''Replace All'''. | |||
==Simple Table Design== | ==Simple Table Design== | ||
| Line 164: | Line 228: | ||
==Examples of Code for Tables== | ==Examples of Specialized Code for Tables== | ||
===Left-aligning code for cells=== | ===Left-aligning code for cells=== | ||
| Line 197: | Line 261: | ||
| [[GuidedResearch:Lombardia Region|Lombardia (Lombardy)]] | | [[GuidedResearch:Lombardia Region|Lombardia (Lombardy)]] | ||
|} | |} | ||
[[Category:Wiki Administration]] | |||
edits