Web accessibility ensures more people can access content on a website. It aims to provide access to the same information to those with disabilities as to those without. On Fandom, there are some simple best practices you can follow to make your wiki accessible to a wider audience, while keeping your wiki's style intact. An accessible wiki has a better user experience for all those who visit it.
Why accessibility is important for your wiki
Disabled people face a lot of challenges, which for many includes navigating websites. For example, some may have cognitive disabilities involving understanding your content, which makes good article structure easier for people to understand. Some may have physical disabilities such as visual impairments or issues with movement. These can make using a keyboard or mouse a challenge.
In order to navigate websites, disabled people may need to use screen readers, which read content out to them. They may also use a keyboard to navigate if they cannot physically use a mouse. For these tools to function properly, websites need to follow accessible design. On Fandom, accessible design improves the experience for those with disabilities, but also benefits the wider audience and the wiki itself. For example, benefits include:
- Reach a wider audience - 1 in 6 of us across the world have some form of disability. An inaccessible wiki could exclude a large number of these people, so changing a button color or adding alt text could help your wiki reach new readers. Furthermore, it can be helpful for everyone viewing a wiki in poor lighting conditions or with slow internet speeds.
- Better user experience - Accessible best practices are designed to create a good user experience for everyone, regardless of disability. Making navigation links clearer and having an intuitive article structure will make everyone want to stay on your wiki longer and come back for repeat visits.
- Search Engine Optimization (SEO) - Search engines like Google appreciate a clean user experience on a website and will reward it with higher search rankings. With boosted search rankings, more people read your wiki, and you'll have potentially more editors helping you out. Read more about Search Engine Optimization.
Steps to make your wiki accessible
There are misconceptions out there that making your wiki accessible somehow makes it look worse or limits your design options. This is definitely not the case, and there are great opportunities to expand your wiki's reach with minor design changes that can make a big difference.
The key standard for web accessibility is meeting the Web Content Accessibility Guidelines (WCAG). This guidance gives criteria for accessible web design, along with practical steps to meet this criteria. Of the three standards (A, AA, AAA), meeting it at AA standard is widely considered a good approach, and this help page gives advice based on that. However, accessibility goes beyond just meeting standards and has a very human impact. Measures to make your wiki accessible at any level would help more of your wiki's audience enjoy your content.
Those guidelines go into a lot of detail and can look daunting at first. As a starting point, these are five things you can do to improve the accessibility of your wikis. These do not take too long to implement and can be easily incorporated into local wiki policies and layout guides.
Color contrast
Contrast refers to how one colour stands out from another. When reading a wiki article, it's important text stands out from the background of the content area. Otherwise, those with visual impairments won't be able to read your content. Good colour contrast also benefits those viewing your content in certain light conditions or at certain angles. Additionally, it is part of a package of measures to ensure those with color-blindness can access content on your wiki. Read more about including the color-blind on your wiki.
Find out how to measure and adjust color contrast.
Help:CSS best practices contains more advice on technical aspects of color selection and use on wikis.
Alternative text
Alternative text (better known as alt text) refers to a brief description you give an image - this does not show up visibly. This has a couple of benefits:
- Screen reader accessibility - the alt text is read aloud by screen readers, describing the image and how it relates to the context surrounding it. Read more about screen readers, including how they work, and ones you can try for yourself.
- SEO - Search engines like Google crawl for alt text, which helps rank wiki images and content in Google.
Find out how to add alt text to images and best practices when using it.
Link text
Link text helps convey what a link is about, without clicking on it. Those using screen readers benefit especially from good link text, as they may skip to just reading out links on a page if they want to access something specific. For example:
- Correct: "Read more about SpongeBob SquarePants" - this has clear context as to the destination of the link, allowing the user to decide if they want to click it
- Incorrect: "Read more" - this has no context as to the link's destination, and the user is unsure if it goes where they want it to
Find out how to add link text and more best practices when using it.
Headings
Headings are important for separating out article content, to make it easier to follow for those with cognitive disabilities, and in general everyone who needs to access your content quickly. The same applies to those using screen readers, who may ask a screen reader to navigate to all headings. If your content does not have a good heading structure, it makes your content harder to navigate.
A good heading structure has these properties:
- Descriptive headings, indicating clearly what the section is about
- Uses up to six levels of headings to break up your content for readers
- A heading 1 (=) is always the page title, and a page can only have one of these
- On Fandom, the page title is automatically assigned a heading 1, so you should never use one yourself on the page
- You can use heading 2 (==) and onwards to add further sections to your articles
Find out how to add headings and more best practices when using them.
Tables
Tables are really helpful for organizing a lot of data and presenting it in an intuitive way. This is not a call to start structuring the content in a table if it does not logically require one, but if tables are being used, there are three key things you can do to make wiki tables more accessible for readers navigating via keyboard or via screen readers:
- A formatted header row - so screen readers can detect table headers
- No empty cells - this is confusing for those using screen readers, not knowing where they are in the table. Instead, empty cells should say “Empty”, “Blank”, or “Not applicable”
- Accessible color use - where color coding is used, ensuring it has good contrast and accounts for those who may be color blind
Find out how to add tables to articles and best practices when using them.
Checklist
Making a wiki accessible can be daunting, whether you are just starting up a new wiki, or working on a pre-existing one with thousands of pages. To help with knowing where to start or which areas to focus on, you can use our accessibility checklist. This gives you more high priority areas to focus on, that are relatively straight forward to implement, but make the biggest difference. The checklist page itself includes guidance on how to use it effectively, as does our Staff blog introducing it.
Further information and resources
If you want more information on any of these steps, or have questions about how you can make your wiki more accessible, these are some useful resources:
- Fandom's Accessibility Statement - This details our commitment to accessibility, outlining the steps we take and how we empower users to create more accessible wikis.
- Fandom Discord - We have an #accessibility channel where you can chat about accessibility on Fandom in a safe and collaborative environment. Whether you're new to web accessibility or not, this is the place to ask questions and share accessibility knowledge.
- WCAG guidelines - the WCAG guidelines cover a lot of depth about accessibility, and is the go-to place for everything you need to know