Lighting Up All Minds: Accessibility and Genially

Lighting Up All Minds: Accessibility and Genially

Designer Mode

Zoom

Links

Tables

Alt Text

Hierarchy

Fonts

Color

Accessible Table of Contents

• Contrast Ratio
• 4.5:1
• Cannot be only way to convey meaning
• Not conveyed by assistive technology
• Accessible does not mean boring!
• Use colors wisely

Color Contrast

Contrast!

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
• Abbreviations
• Acronyms
• Special characters
• Underlines
• Font color

Fonts

Fonts!

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)

Hierarchy

Hierarchy!

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.

Alt Text

Alternative Text

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

Tables!

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

Links!

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

Magnification

Zoom!

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

Designer Mode

Designer Mode

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?

Font Face

Font Resources

Tips for Editing Resources in Genially

Add Text Styles to Your Brand Kit in Genially

Add Fonts to Your Brand Kit in Genially

Genially Resources

• Use simple, familiar, parsed fonts
• Avoid complex characters
• Avoid ambiguous characters
• Use limited numbers of fonts
• Consider spacing and weight
• Avoid small-size font

Reading Order

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 Resources

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:

1. Open Designer Mode (CTRL/CMD + M)
2. Rename the elements to make it easier to navigate.
3. Adjust the order of the elements to the correct order
   • Top-down order with the top element being read first

Image Links

Designing Better Links for the Web

Links and Accessibility

Hyperlinks Resources

Add Descriptions to Link Interactivity

How to Set Up Link Interactivity

Genially Resources

• 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

Genially 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

Color Safe

WebAIM Contrast Checker

Contrast Resources

How to Design Your Geniallys Using the Document Colors Feature

Add Colors to Your Brand Kit in Genially

Genially Resources

• Difference between perceived “luminance” or brightness between two colors
• Two parts of color contrast
  • Foreground
  • Background
• Minimum required ratio: 4.5:1

Google Slides: Mysteries of Accessibility: Constructing and Using Tables

Mysteries of Accessibility: Constructing and Using Tables

Layout Tables

Tips and Tricks

Table Resources

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

Genially Resources

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%

Magnification Resources

Zoom in on Content in View Mode

Genially Resource

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

Hierarchy Resources

Use the Different Text Categories

Genially Resource

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.