Genially: The basics
🔧USER MANUAL🔧
This page will provide guidance on how to interact with the Genially interface and customize templates, as well as provide tips on how to revise templates to be more accessible.First things first - where are the gamified templates on Genially? The guide below will show you where to find them, specifically the breakout and escape room templates!
If you're familiar with using Canva for design, you may find a lot of similarities in the editing interface on Genially! Check out the videos below for a quick guide on getting started, and a more detailed tutorial webinar.
We love a good template, and Genially has many to offer! However, many of them contain features that are not accessible to all. Below are some items and concerns to keep in mind as you make use of the templates. If you'd like to use a template that has already been edited for accessibility, check out the options on our very own Genially Accessible Templates page!
Color Contrast
As explained by W3schools:Links to an external site.
We measure contrast between text or graphics against the background color. This is called contrast ratio. Text and graphical components on a web page need good contrast so that we make sure that it is perceivable for users. Some of us have reduced vision. Others will be in a situation where contrast is important, like out in a bright sunlight.
There is no perfect ratio. It is not always as high as possible, even though a high contrast is usually more readable than a low contrast. According to Apple, we should strive for a minimum of 4.5, although 7 is preferredLinks to an external site..
⭐Check for contrast between your font and background colors using Contrast RatioLinks to an external site..
Reading order
As explained by Genially:Links to an external site.
The screen reader will read the alternative texts of the different elements according to the order of the layers, which by default, is the order in which you have added them to your genially.
Understanding information can be difficult if it is not received in order. That's why it's important to arrange your elements in the order in which you want screen readers to read the alternative texts.
⭐Use Genially's Designer ModeLinks to an external site. to arrange your layers to read in the proper order.
Drag and reveal mechanic
There are a handful of Genially templates that make use of a mechanic asking the user to drag an element on the screen with their mouse to reveal content that is hidden. This is not an accessible mechanic. It is best to remove this entirely and instead maintain clickable options rather than clicking-and-dragging and hidden elements.
Flashing Colors or Graphics
Be wary of any gifs, backgrounds, or other graphics included in templates that contain flashing colors. These can cause distraction, discomfort, or seizures for those with photosensitivity.
Flashing and blinking are explained by W3.orgLinks to an external site. as follows:
- "Blinking" refers to content that causes a distraction problem. Blinking can be allowed for a short time as long as it stops (or can be stopped)
- "Flashing" refers to content that can trigger a seizure (if it is more than 3 per second and large and bright enough). This cannot be allowed even for a second or it could cause a seizure.
Alternative Text
Alternative text is applied to images that convey important meaning so that users consuming content through a screen reader are getting the same information and experience.
⭐Follow Genially's guide on adding alt text.Links to an external site.
Text Hierarchy
Using text categories such as heading 1, heading 2, etc. help users navigate the information on the page and understand the organization intended.
⭐Follow Genially's guide on utilizing text categories.Links to an external site.