Creating Web Accessible Content on Fandom

Fandom is a platform that provides an experience for all fans regardless of their level of passion. As we strive to provide quality content for all fans, it is equally important to create an experience everyone can enjoy. Consider your audience when creating content, and ensure that you’re creating an accessible experience for all. Web accessibility, or eAccessibility, is the inclusive practice of ensuring that all barriers that prevent interaction with your website are removed, and creating access to websites by people with physical and situational disabilities as well as socio-economic restrictions on bandwidth and speed.

According to Web Content Accessibility Guidelines (WCAG), there are four main principles of accessibility: Perceivable, Operable, Understandable, and Robust. This framework supports accessibility needs and serves as a guide to creating more accessible websites.

WEB-ACCESSIBLE ACCOMMODATIONS[]

So how do you even check for those things and why does it matter for my wiki? I’m glad you asked! It’s important (now more than ever) to ensure that your wiki meets the Americans with Disabilities Act (ADA) compliance for accessibility. By creating equal opportunities to make web accessible accommodations, you’re able to support all visitors that come to your wiki and everyone can enjoy content! Web-accessible accommodations are free and only require a bit of effort to create.

Here are a few examples of web-accessible accommodations you should consider as you create:

Offer high-contrast options to those with limited vision. This is also known as “dark-mode” options for pages. While some people might enjoy having a darker theme with text to match, it isn’t necessarily an accessible option. Creating high-contrast themes can accommodate people with certain vision disabilities by making text easier to read.
Provide alternative text (alt text) to your images to create vivid pictures. If you’re adding images to your page that provides information to your audience, and that information is not provided within supported text you should consider providing alternative text. When alt text is properly included in your content, you’re providing information and painting a clear picture for everyone. If the image serves as an important element within your content, you should consider including alt text.
Create quality hyperlinks that your audience can easily navigate. Evaluate your content carefully to see if your hyperlinks are leading people to the places you want them to explore. A simple “click here” might not be sufficient for your readers. Try providing more context to support your audience every step of the way with descriptive calls to action. For example, try using “click here to learn more about your favorite character” helps readers understand where the link will take them as opposed to a simple “click here” instruction.

Accessibility Testing[]

Our Product teams understand the importance of web accessibility and incorporate that into their work every single day. As we work to create more tools for the community to use, we understand that there is much to learn and apply. Recently, we’ve been working hard to present Mobile Theming to the community and we’re thrilled to share some behind-the-scenes work that has gone into this important product initiative.

You’ll find a visual example of the wikis listed for our testing below and this image to show appropriate hyperlink colors that create high contrast. If you look closely, you’ll see the comparison of colors between the light and dark theme using the defined borders around each color. The color blocks that are marked as “X” didn’t provide the amount of contrast needed to be compliant.

We ran a mobile theming test on 15 wikis for community feedback and to make sure the themed pages don't load more slowly or rank lower on Google search result pages than unthemed pages. This test applied the community’s customized theme's colors, fonts, and background image to the FandomMobile skin.

The list of wikis included were:

If you want to check out those wikis on mobile, either head over on your mobile device or add ?useskin=fandommobile to the end of any URL on your desktop device. We’re excited as we prepare for the launch of Mobile Theming this week for everyone to opt-in to and enjoy.

Resources[]

Here’s a roundup of 3 free web accessibility resources to ensure you’re taking the correct steps to support you as you create accessible content for your visitors!

1. Accessible Colors - This resource is a Staff favorite and evaluates your color combinations according to WGAC 2.0 guidelines for contrast accessibility.

2. Intent Based - Accessibility Checker - This free AD and WGAC compliance checker is simple to use and easily checks your website for you. All you have to do is type your URL to determine if you are compliant!

3. WAVE - Web Accessibility Versatile Evaluator - This web accessibility evaluation tool allows you to test accessibility through your web browser using WAVE Chrome, Firefox, and Edge browser extensions

We invite you to join us in this inclusive practice as you make sure all your visitors can easily read your articles, understand the images you embed, and find what they are looking for. Together, we can make this platform accessible to all fans! Check out these tools and let us know your thoughts. We’ve only listed a few free tools that can be helpful as you check the accessibility on your wiki, but feel free to list more in the comments section below!