At Playable, we are committed to ensuring that our platform supports the creation of accessible, gamified experiences for all users. We strive to create an inclusive environment where everyone can engage with and benefit from the campaigns made using our platform.
Accessible gametypes
Playable offers 5 different gametypes that have been optimized to support accessibility and can all be designed to meet accessibility principles as outlined in WCAG (Web Content Accessibility Guidelines) 2.1. These include:
Quiz
Personality Test
Scratchcard
Wheel of Fortune
Spin the bottle
Our platform offers a range of tools and features to facilitate the creation of accessible content. With extensive customization options, users have significant control over their content. As a result, the responsibility lies with users to manage and design their campaigns in accordance with accessibility guidelines.
You can find the gametypes optimized for accessibility in the accessibility overview:
Designing accessible campaigns
There are several measures you can take to build your campaigns in an accessible way. In the following sections we will highlight different settings and features you should pay attention to when creating inclusive gamification.
Keyboard navigation
Ensuring keyboard navigation is crucial for making your campaign accessible to users with disabilities. For the 5 gametypes, Quiz, Personality Test, Scratchcard, Wheel of Fortune, Spin the bottle the game can by default be played solely via keyboard navigation.
Swipe feature: Enable buttons
If you are using the swipe answer type, you can supplement the swipe option with buttons to make the game more accessible. Swipe buttons can be enabled in the answer layout and the buttons can be navigated via keyboard as well.
Scratchcard: Scratch fields automatically
The standard scratchcard requires the user to scratch the fields in the game, however, it is possible to add a button to the game that will automatically scratch all fields.
You can allow users to scratch all fields automatically by adding a button to the game page and setting the button action to 'start game'.
Add alternative descriptions to non-written content
It is a good idea to ensure that all images have alternative text descriptions to aid users with screen readers. For the 5 selected gametypes, you can add alternative text descriptions to all images included in the game.
You can add alternative descriptions to image addons in the frontend builder and to game related images uploaded in backend.
Add description in backend | Add description in frontend |
 |  |
Written content
Headings: Use headings to structure content logically. Maintain a consistent heading structure throughout the site to help users understand the content hierarchy.
Font size: Use a base font size of at least 12pt or 16px for body text to ensure readability.
Font type: Choose easily readable fonts. Sans-serif fonts (like Roboto, Open Sans, Montserrat, Lato or Nunito sans) are generally easier to read on screens than serif fonts.
Font weight: Avoid using very light font weights. Stick to normal (400) or bold (700) weights for readability.
Line height: Set a line height (leading) of 1.5 times the font size for body text. This helps users with visual impairments or cognitive disabilities follow lines of text more easily.
Text alignment: Left-align text for Western languages to improve readability.
Text Spacing: Provide adequate spacing between paragraphs, typically 1.5 times the line height.
Clearly identifiable links: Provide links with a different color and use non-color link indicators, like underlining to convey its function.
Avoid italics and all caps: Use italics and all-uppercase text sparingly as they can be harder to read, especially for users with dyslexia.
High level color contrasts
Contrast ratio: Ensure a contrast ratio of at least 4.5:1 between text and background. For large text (18pt or 14pt bold), a ratio of 3:1 is acceptable.
Color schemes: Choose color schemes that are high contrast and avoid color combinations that are difficult for colorblind users (e.g., red and green).
You can use a color contrast checker to test the accessibility of your color combinations.
Do ✅ | Don't ❌ |
 |  |
Define campaign language
Where? Publishing tab > meta settings.
You can define the language of your campaigns. Specifying the primary language of the campaign helps screen readers in accurately interpreting and vocalizing the text.
Enable zoom
Where? Publishing tab > meta settings.
By enabling zoom and scaling you can ensure that users can magnify or resize the content of your campaign without losing functionality or readability. Keep in mind that zoom functionality is dependent on the campaign content.
Add focus state outline
A focus state refers to the visual indication that an interactive element (such as a link, button, or form field) on is currently selected or active. When a user navigates through a campaign using a keyboard (usually with the Tab key), the focus state color will help them understand which element they are currently interacting with, by highlighting the active element.
The focus state outline will apply to:
Buttons
Answer options
Registration form fields
You can add a focus state color in the campaign layout settings.
Focus state color in quiz and personality test
On quiz and personality test, you can add a focus state background and text color. These will overwrite the focus state color added in the layout tab.
 | Regular active state 
Accessible focus state  |
Accessible registration form
Labels and instructions
Place labels above or next to form fields and provide clear instructions and example inputs.
Error messages: Validation message and color
Provide instructions and error messages that are easy to understand. For each field in the registration form, you can provide a validation message. This message will appear when if the input is not accepted.
You can change color of the validation message and how it is displayed.
Autocomplete
Autocomplete is a feature in web forms that helps users fill out form fields more quickly by suggesting and automatically completing values based on previously entered information.
💡 Per default, autocomplete is disabled: Even if autocomplete is not explicitly activated in form fields, automatic completion of forms may still work, as many modern web browsers often store user information.
💡 Autosubmit is not dependent on autocomplete: Autosubmit refers to the function of submitting content in a registration form whereas autocomplete is the process of filling fields automatically.
You can enable and disable autocomplete in your registration form settings.
