Lighting Up All Minds: Accessibility and Genially
Created on October 4, 2023
More creations to inspire you
Lighting Up All Minds: Accessibility and Genially
Accessible Table of Contents
- Contrast Ratio
- Cannot be only way to convey meaning
- Not conveyed by assistive technology
- Accessible does not mean boring!
- Use colors wisely
Contrast, or color contrast as it is colloquially known, is the difference between the relative luminance of light colors versus the relative luminance of dark colors. This impacts how someone perceives the background and foreground colors.
- Serifs or Sans Serifs
- Font formatting:
- All caps
- Special characters
- Font color
There are currently no guidelines for font accessibility, but there are still many things that you should consider when selecting a font. Your document should be readable by all who are interacting with the content.
- Titles, headers, and subheaders!
- Provide orientation and structure
- Announced by assistive technology
- Always use built-in formatting (don't just rely on formatting)
Document structure, including using headers and built-in list formatting, is critical to orientating disabled users within your document's structure.
- Alt text = alternative text
- Text equivalent for images
- Conciseness is key
- Captions may add additional information but alt text is still needed.
Alternative text (alt text) provides a text equivalent for non-text content such as images, graphs, and charts. It ensures you convey the intended meaning of the non-text elements of your content to meet accessibility guidelines (WCAG Level A).
- Should only be built using the formatting tool
- Linear in fashion
- Left to right
- Top to bottom
- Header row only in Genially (currently)
Tables are used to convey related information with headers and shouldn't be used to create the layout of a page. Header(s) enable users to navigate the data and make relationship associations. Tables should never be an image.
- Describe the link vs. using the link
- Screen reader navigation
- Context and purpose
- More than "click here"
Hyperlinks navigate users to other content, such as websites or documents. How you provide the link impacts how someone perceives where it will lead them.
- Scaling up to 200% is the minimum requirement
- Maintains both content & functionality
- Use actual text vs. images of text
Resizing or scaling text up to 200% without loss of content or functionality is required to meet accessibility standards.
- Renaming elements
- Adjusting the reading order of elements
The Designer Mode in Genially allows you to ensure your elements are identified to learners using assistive technologies, such as a screen reader, in the intended order so the content makes sense.
Why Text in All Caps is Hard for Users to Read
Why Don’t Screen Readers Always Read What’s on the Screen?
Tips for Editing Resources in Genially
Add Text Styles to Your Brand Kit in Genially
Add Fonts to Your Brand Kit in Genially
- Use simple, familiar, parsed fonts
- Avoid complex characters
- Avoid ambiguous characters
- Use limited numbers of fonts
- Consider spacing and weight
- Avoid small-size font
What is Reading Order?
Reading Order Resources
Put Elements in Order to (Further) Improve Accessibility
How to Order Your Elements
How to Identify and Rename Elements
Genially elements are added as layers to your page with a generic name (e.g., Text). Any new elements are added to the beginning of the reading order. Element order in Genially is similar to PowerPoint or Google Slides.
To ensure elements are identified in the correct order:
- Open Designer Mode (CTRL/CMD + M)
- Rename the elements to make it easier to navigate.
- Adjust the order of the elements to the correct order
- Top-down order with the top element being read first
Designing Better Links for the Web
Links and Accessibility
Add Descriptions to Link Interactivity
How to Set Up Link Interactivity
- Unique descriptive text
- Avoid using meaningless text (e.g., click here)
- Identify the file type or source next to the descriptive link (e.g., PDF or Genially)
- Only underlined text in your content
- More than color is used to convey a link
How to Add Alternative Text in Google Docs and Slides
How Long Can “Alt” Text Be?
Creating Accessible Content: Alternative Text
Add Alt Text to Images
Writing Alt Text
Alt Decision Tree
Alt Text Resources
Genially and Accessibility
Add Alt Text to Images and Resources
Good alternative text is like Goldilocks selecting the right bed. Alt text should get the context of the image across, yet it must be as concise as possible.
Webinar Handouts: Using Color and Composing Alt Text
Mysteries of Accessibility: Using Color and Composing Alt Text
WebAIM Contrast Checker
How to Design Your Geniallys Using the Document Colors Feature
Add Colors to Your Brand Kit in Genially
- Difference between perceived “luminance” or brightness between two colors
- Two parts of color contrast
- Minimum required ratio: 4.5:1
Google Slides: Mysteries of Accessibility: Constructing and Using Tables
Mysteries of Accessibility: Constructing and Using Tables
Tips and Tricks
How to Make Your Geniallys More Accessible
How to Use Smartblocks
Insert and Edit a Graph or Chart in Your Genially
Insert and Edit a Table in Your Genially
For tables to be accessible, you must use built-in formatting and notate the header row. Content should be read top to bottom and left to right, corresponding to the designated header row.
Real Text vs, Text in Graphics
How Browsers Zoom and Resize Text
Resize Text Up to 200%
Zoom in on Content in View Mode
Scalable text and content are helpful for all learners, not just those using assistive technologies.
- Use actual text versus images of text
- Test your content scalability to at least 200%
Make your Word Documents Accessible to People with Disabilities
Design for Readability
Slides: Mysteries of Accessibility: Composing with Microsoft Word and Google Docs
Mysteries of Accessibility: Composing with Microsoft Word and Google Docs
Use the Different Text Categories
Built-in formatting is critical to helping disabled users navigate content. For those using assistive technology, these tools help them orientate themselves within a document. Making something look like a header doesn't actually make it a header.