|
|
| Line 1: |
Line 1: |
| __notoc____NOEDITSECTION__
| | We're redoing this page, be back soon! |
| This '''accessibility checklist''' is designed to be a fun tool to help you make this wiki more accessible, a starting place if you will. It doesn't cover absolutely everything you can do, but some key areas that could make a big difference to your readers.
| |
| | |
| ==How to use this checklist==
| |
| * Try to use this list as you add content, as making content accessible as you go is easier.
| |
| * This could be daunting though as you grow your wiki with thousands of pages. To make it easier, try targeting:
| |
| ** Pages for '''new releases''' which readers will visit more
| |
| ** '''Policy pages''' the community visit to help them contribute to your wiki
| |
| ==Images==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example'''
| |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="alt text" | Ensure '''alt text''' is added to informative images. This means screenreader users won't miss out on important information the image gives when reading your content.
| |
| | [https://spongebob.fandom.com/wiki/File:Band_Geeks_175.png For this image from Encyclopedia SpongeBobia], alt text could read "SpongeBob standing in front of a packed audience with a spotlight on him. He's wearing a red hat and suit with gold decoration on the hate, shoulders, arms and body."
| |
| | rowspan="4" | [[Help:Adding images#Accessibility_considerations|Read more about image accessibility]]
| |
| |-
| |
| | data-row-id="Captions" | '''Captions''' should not duplicate alt text, and should add context to the image described in the alt-text. This is so screenreader users are not receiving the same information twice, slowing down their reading of the page.
| |
| | [https://spongebob.fandom.com/wiki/File:Band_Geeks_175.png For this image from Encyclopedia SpongeBobia from above], the caption could read "SpongeBob starts singing, to Squidward's surprise."
| |
| |-
| |
| | data-row-id="Charts" | For images of '''charts or graphs''', provide a text alternative explaining the data. Users with visual impairments or those using screenreaders won't be able to get the data from the image alone. This data may also be too long for alt text.
| |
| | For a graph displaying decreasing viewership, a paragraph or data table either before or after it should give the numbers and trends the graph shows.
| |
| |-
| |
| | data-row-id="Text images" | For '''images containing text''', explain what the text in the image is using alt text. Screenreaders won't read the text in the image as it's part of the file itself.
| |
| | [https://spongebob.fandom.com/wiki/File:SB173-SC.018.png For this image of a watch from Encyclopedia SpongeBobia], alt text could read "Squidward's watch, with a pink strap, lavender background, and digital display reading 8:34."
| |
| |}
| |
| | |
| ==Design and color==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example'''
| |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="text-contrast" | Ensure '''contrast''' of at least '''4.5:1''' between the text and wiki and template background. This ensures those with visual impairments or are standing in bright sunlight can read your content.
| |
| |
| |
| * Pass (5.58): <div style="background:#9f3526; width:28px; color:white">Test</div>
| |
| * Fail (3.2): <div style="background:red; width: 28px; color:white">Test</div>
| |
| | [[Help:Contrast|Read more about color contrast]]
| |
| |-
| |
| | data-row-id="themes" | Use a dedicated '''light and dark theme'''. This ensures readers can choose a theme that's most comfortable for them.
| |
| | Light theme uses lighter colours for the background and content area, and text is is black by default. Dark theme uses darker colours, and text is white be default.
| |
| | [[Help:Theme Designer|Read more about setting themes in Theme Designer]]
| |
| |-
| |
| | data-row-id="colorblind" | Account for '''color-blind individuals''' when designing your wiki's theme and templates. Don't solely rely on colour coding to relay important information as those readers may not understand parts of your content.
| |
| | Instead of marking an admin as active using a green box, write the word "Active" inside it as well. That way you're not just relying on color.
| |
| | [[Help:Including the color-blind at your wiki|Find out how to cater for color-blind readers on your wiki]]
| |
| |-
| |
| | data-row-id="screensize" | Ensure your wiki design is '''responsive''' to different screen sizes, and content area widths. FandomDesktop uses a responsive layout that changes with screen size.
| |
| | Avoid '''locked table widths''' as tables won't stretch when you expand the content area. This could create a confusing experience for readers.
| |
| | [[Help:FandomDesktop|Read more about FandomDesktop and its responsive display]]
| |
| |}
| |
| | |
| ==Format==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example''' | |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="Navigation" | Ensure your '''local wiki navigation''' is kept up to date and intuitive. Readers should be able to find what they want quickly, and confusing navigation may cause frustration when navigating your wiki.
| |
| | Place content for new releases in the local navigation. That content is often most popular.
| |
| | [[Help:Navigation|Read more about local navigation]]
| |
| |-
| |
| | data-row-id="Headings" | Follow a clear '''heading structure'''. This is important for screenreader users especially, who often use heading structures to navigate a page.
| |
| | Screenreaders can navigate a page by header type. If a page uses Heading 3s where it should be using Heading 2s, those readers may be missing important context as they can't see the surrounding content.
| |
| | [[Help:Formatting text#Accessibiity_considerations|Read more about formatting headings accessibly]]
| |
| |-
| |
| | data-row-id="Lists" | Format '''lists''' appropriately, such as using numbers or bullet points. These provide readers with important context to understand the aim of the list more easily.
| |
| | A numbered list immediately indicates a reader could be looking at instructions, or a ranking of some kind.
| |
| | [[Help:Formatting text#Lists|Read more about formatting lists]]
| |
| |-
| |
| | data-row-id="Styles" | Use '''text styles''' in an intuitive way to distinguish text. This makes reading a page easier, as certain parts are emphasised to give it extra importance.
| |
| | Underlining text should not be used, unless it is for links, as someone may get normal text and a link confused.
| |
| | [[Help:Formatting text#Styles|Read more about text styles]]
| |
| |-
| |
| | data-row-id="Links" | Ensure '''link text''' tells the reader where they are going when they click a link. Without that, the reader has no context and clicks a link that may not go where they want it to.
| |
| | "For more information on accessibility, [[Help:Accessibility|click here]]" does not provide enough context. Where is "here"? Instead, the link should read "[[Help:Accessibility|View more information on accessibility.]]"
| |
| | [[Help:Links|Read more about accessible link text]]
| |
| |}
| |
| | |
| ==Templates and coding==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example'''
| |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="templates" | Add '''documentation''' to all templates. This means editors understand what the template does, and how to use it. This documentation should be clear and give examples, to make the experience as easy as possible for editors.
| |
| |See [[w:c:avatar:Template:Notice|Avatar Wiki's Notice template]]. This includes detail on what the template does, syntax when using it, and example output.
| |
| | [[Help:Template documentation|Read more about template documentation]]
| |
| |-
| |
| | data-row-id="coding" | Use easily readable '''source code''' in main namespace. Many editors may want to change a typo but do not know where to find it if the page is dense with unneeded source code.
| |
| |Instead of pasting in source code for heading styling, make it a template instead. Rather than <code><nowiki><div style="border:3px solid black; color:white; padding:2px...</div></nowiki></code>, you can have <code><nowiki>{{Heading|Test}}</nowiki></code>.
| |
| | rowspan="2" | [[Help:Templates|Read more about coding and templates]]
| |
| |-
| |
| | data-row-id="readable" | Use fonts and colors that are easy to read in templates. Not only does this help those with visual impairments, but also people to read your content faster in general, without needing to interpret a font.
| |
| |[[Help:Signature|Signatures]] are sometimes heavily customised, adding a lot of color and font changes. They can be hard to read.
| |
| |}
| |
| | |
| ==Tables==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example'''
| |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="Cells" | Don't use '''empty cells'''. Screenreaders may struggle to interpret what's in them, and users may lose where they are in the table.
| |
| |Use "Blank" or "Not applicable" in empty cells where possible.
| |
| | rowspan="3" | [[Help:Tables#Accessibility_considerations|Read more about table accessibility]]
| |
| |-
| |
| | data-row-id="header row" | Use '''formatted header rows'''. This allows screenreaders to identify headings to read out, and helps those users navigate tables more easily.
| |
| | Use <code><nowiki>! Test heading</nowiki></code> with the exclamation mark instead of <code><nowiki>| Test heading</nowiki></code> with the pipe.
| |
| |-
| |
| | data-row-id="table colour" | When color coding tables, follow '''accessible color use''' and don't rely just on color. This is so colorblind users or those with visual impairments can interpret a table, not needing color.
| |
| | Instead of having squares with green meaning "Win" and red meaning "Lose", actually include "Win" and "Lose" in those squares too.
| |
| |}
| |
| | |
| ==Language==
| |
| {| class="wikitable sortable" style="font-size: 85%; text-align: left;" width="100%"
| |
| ! style="border-style: none none solid solid;" |'''Criteria'''
| |
| ! style="border-style: none none solid solid;" |'''Example'''
| |
| ! style="border-style: none none solid solid;" |'''Resources'''
| |
| |-
| |
| | data-row-id="Language" | '''Language''' on a wiki should be easy to understand, with jargon explained, or kept to a minimum. Wikis have a very diverse audience and ensuring your content can be understood makes the experience better for the reader, and means they're more likely to return to your wiki.
| |
| | Card pages like [[w:c:yugioh:Swap Frog|Swap Frog]] on the [[w:c:yugioh|Yu-Gi-Oh! Wiki]] link off to other pages that explain terms relating to that trading card game.
| |
| | [https://www.w3.org/WAI/WCAG22/Understanding/readable.html Read the WCAG guidance on readable content]
| |
| |-
| |
| | data-row-id="Policies" | Ensure your '''wiki policies''' are easy to understand and follow for community members. This will help users follow wiki policies and keep things running more smoothly.
| |
| | Try to use bullet points and clear language to convey key information.
| |
| | [[Help:Wiki Rules and Blocking Policy|Read more about writing clear policies for your wiki]]
| |
| |}
| |
