Help:Accessibility

This page outlines several key ways that editors can improve the accessibility of content on Fanlore. Accessibility is critical to ensure that Fanlore caters equally to editors with different access needs, such as those who might be using screen readers or voiceover software, or editors with conditions such as dyslexia, color blindness, or photosensitive epilepsy that affect how easily they can interact with certain types of content.

For instance, making content accessible helps users with screen readers to maneuver through Fanlore pages, understand images or text contained in images, access embedded links, and more. Accessibility can also benefit people with photosensitive epilepsy as well as other photosensitive seizure disorders when editors avoid including seizure-inducing content on a page.

Alternative Text (Alt Text)

Alternative text, also called alt text, refers to typed words that computers and screen readers can analyze in place of images which cannot be processed in this way. The field is only detected by screen readers, leaving the caption field open for other information. Alternative text can serve several functions, including:

• Making images accessible to viewers with visual or cognitive disabilities by providing a visual description that screen readers can read
• Displaying in place of images in browsers if the image file is not loaded or when the user has chosen not to view images
• Providing semantic meaning to, and a description of, an image to be used by search engines to return search results

To insert alt text in the Visual Editor:

1. Select the image
2. Select Edit
3. Enter your desired alt text in the box labelled Alternative text
4. Select Apply changes
5. Select Save changes

In the source editor, alternative text should be formatted within the "alt" attribute of the image (e.g., [[File:Example.jpg|thumb|Caption|Alt="Alt text"]]). For more information about how to use wiki markup to add alt text to images, refer to Help:Images.

Guidelines and best practice

Here are some guidelines to follow when writing alternative text for images:

• Be specific and succinct with an absolute maximum of 125 words. Briefly describe the content of the image without making assumptions about its context (e.g., the ethnicity or gender of the subject, what's happening outside of the shot, the subject's motivations, etc.).
• Use basic visual descriptions without including colors or abstract shapes.
• Use correct grammar and spelling
• Do not include any emojis or abbreviations
• Include context, only if necessary. For example, an image of a character used on an article that doesn’t center around them might include their name, or an image of a piece of fanart may include the location where the fanart is set if it’s relevant to the article. (Avoid this if the said context is already included in the caption.)
• Never start with "Image of" or "Picture of." However, it may be useful to describe the type of image (e.g., headshot, illustration, chart, screengrab, etc.).
• Include text that's part of the image.
• Don't repeat text that is already present in an adjacent caption, the page heading, etc.
• Don't add alternative text to "decorative" images. These include things like page dividers or brand graphics that visually "break up" a page but carry no contextual significance or meaning.

Good examples:

Alt="A field of sunflowers. The text in the center displays: 'Example Image.'"

Alt="Banner with an illustration of Carmilla Karnstein and Laura Hollis from the webseries Carmilla, shown from the neck up, with a rose clasped in both of their mouths. The text reads 'Laura x Carmilla'."

If you’re still unsure about writing these fields or want to read more in-depth information about the benefits and usage of alt text, don’t worry - there are resources out there to help. Here are a few:

• University of Leicester
• WebAIM
• Moz

Accessible Embedded Links

Writing accessible link text makes links easier for users with screen readers to parse and understand where the link leads. There are two types of links on Fanlore, internal and external, both of which can be formatted as embedded links.

• To create an embedded internal link, format the link as [[Name of page | Text to display]].
• To create an embedded external link, format the link as [http://www.example.org Text to display].

When writing embedded links, follow the guidelines below:

• Make embedded links relatively concise, so that users can quickly parse the link and determine whether they would like to navigate to the linked webpage or content. Long links that break across two lines on the page may appear to users with screen readers to be two separate links.
• Make embedded links descriptive so that users can easily assess whether the link contains content they would like to navigate to. Avoid embedding links with link text like "here," "this," or "click here," which are unhelpful for screen readers since they don't provide any context for what the link is.
• When adding email addresses to a page, use the full email address as link text rather than creating an embedded link, so that it is clear to users that the link is pointing to an email address.

For more information about links on Fanlore, refer to Help:Links.

Accessible Text Formatting

Several ways of formatting text on a page can interfere badly with screen readers, such as:

• Typing words (other than acronyms) in all caps ("ALL CAPS")
• Spacing out letters that make up a word ("s p a c e d o u t") and/or placing emojis in between the letters of one word
• Alternating between uppercase and lowercase letters within the same word ("aLtErNaTiNg")
• Putting extra newlines between items:

* List item 1

* List item 2

* List item 3

instead of

* List item 1
* List item 2
* List item 3

While these types of formatting are generally not used on Fanlore, they may appear in quotations and need to be reproduced faithfully when quoted. Where these types of formatting appear in quotations, writing a normally-formatted version in square brackets will aid screen reader comprehension.

Flashing Images

Images with flashing or strobing lights can induce seizures in those who have photosensitive epilepsy or related disorders. Whether or not a particular image induces seizures in someone with photosensitive epilepsy can depend on several factors including the rate of the flashing light, the duration of the flashing, and the intensity of the light. In general, avoid displaying animated gifs or other images that flash at a frequency of more than 3 flashes per second.

Trigger or Content Warnings

In general, Fanlore pages will not contain trigger or content warnings for sensitive material because there will always be a huge degree of subjectivity about what kind of content people think needs to be warned for and how. For more information, refer to Help:Warning for Content.

Further Reading

• Wikipedia:Manual of Style/Accessibility, a guide to accessibility that may also apply to other wikis such as Fanlore
• What is an Accessible Document and Why is Accessibility So Important?
• Three Flashes or Below Threshold
• Alternative Text
• How To: Write Good Alt Text
• Accessible Hyperlinks
• Photosensitive Epilepsy
• Photosensitive epilepsy and online content

If you have any accessibility-related questions that you would like to ask, please post them on the talk page for this article.