universal-design-center

Flyers and Infographics in Calendar Events

 Overview

When promoting events on the CSUN calendar, designers must ensure all readers have equal, effective and immediate access to event information. Flyers and infographics have recently become a popular way of advertising upcoming events in the calendar. They provide a visual appeal to an event and allow campus entities the ability to easily publish and distribute event information. However, flyers and infographics are fundamentally not accessible to readers with disabilities. As a result, when flyers and infographics are published on event pages, a variety of accessibility errors can occur that will prevent some readers from accessing information about an event. In this document (webpage), we will discuss the problems with flyers and infographics and describe ways to incorporate them to event pages to ensure all readers have equal and effective access to event information.  

 Problems with flyers and Infographics

Although flyers and infographics provide a visual appeal to an event, when published on the web, a variety of accessibility problems can occur. We will discuss the most common problems seen when flyers or infographics are uploaded onto event pages.

Problem 1: A flyer or infographic is used to convey all the information about the event

A common practice with flyers and infographics is to upload them on event pages and have them convey all the information about an event. This usually means the event name, description, date and location, and rsvp hyperlink may be located within the flyer or infographic only. The problem with flyers and infographics are generally published on event pages as image files where all text and hyperlinks are part of the image. This means text and hyperlinks cannot be selected, cannot be copied and cannot be read by screen reader technology. Ultimately, the content within a flyer or infographic is not accessible to screen reader users when the flyer or infographic is an image file. Alternative formats are needed to ensure all readers have access to event information. The example below demonstrates an event page where all the information about the event is located within the flyer.


Example 1: Event page with flyer conveying all event details and links. In this example, although the name of the event, location, and date are located on the event page, the sponsoring department name, the event description, learning objectives, and registration hyperlink are only in the flyer. Screen reader technology is not able to read the information in flyer because it is an image file. As a result, some readers will not have any details to help them decide whether to attend the event. Additionally, readers will not be able to register for the event because the registration hyperlink cannot be activated within the flyer.

Problem 2: A flyer or infographic uses long alternative text (alt text)

Alternative text, or alt text can be a great text alternative for simple images, however for flyers and infographics, it maybe be too restrictive or it can interfere with the readability of the content. Alt text should typically be between 8 to 100 characters long. Anything more than that amount may be difficult for screen reader users to understand. As a result, if a flyer or infographic has a lot of information in it, a screen reader user will only be able to receive limited information about the event. Additionally, hyperlinks will not function even if alt text is present.

Example 2: Event Page with Flyer conveying information in Alt text. In this example, there are limitations to the number of characters permitted for alt text. As a result, screen reader users will not be able to obtain all the even information.

Problem 3: A link to an inaccessible PDF infographic/flyer is added

Often, content creators may choose to provide a link to a PDF version of the infographic or flyer on the event page. A PDF version may be more promising when it comes to accessibility if and only if the PDF incorporates appropriate accessibility markup. Without the markup, the PDF will not be accessible to screen reader users. Additionally, providing a PDF alternative format for an event may be perceived negatively because instead of providing all readers equal and immediate access to information, readers with disabilities need to perform extra steps to receive event information.


 Example 3: Event page with PDF flyer conveying all event details and links. The PDF has several accessibility errors, making it unreadable to screen reader users.

 Creating Accessible Events with Infographics

As Infographics and flyers are ultimately not accessible when published in event pages, a text alternative is always required. The remainder of this document will discuss how to incorporate text alternatives for infographics and flyers to present to ensure equal and effective access for all readers!  

Best Practice is to provide a transcript for your Infographic or Flyer

A transcript is simply a full-text version of an infographic or flyer that is directly embedded onto the event page as normal text. Normal text is an interactive text that is accessible to all screen readers and can be highlighted and copied. A transcript is usually placed below an infographic or flyer but it can also be linked or toggled on an event page (See Universal Design Center Custom Elements  for Toggle Show/Hide feature). Regardless of how it is displayed on a page, a transcript will ultimately provide all readers equal, effective, and immediate access to event information. The example below demonstrates an event page with a transcript located below the event flyer.  

Example 4: Event Page with a Transcript. In this example, a transcript is embedded onto the event page and displays the same information that is within the infographic. This method guarantees that all readers have access to the event information including the registration link, the name of the organization and the event itself, and the event description and learning objectives. Additionally, the transcript takes into consideration other accessibility requirements for content such as providing headers to information and descriptive link text.

Embedding an Accessible PDF Version is a supplemental alternative

Embedding a PDF format of an infographic or flyer is also an excellent alternative. However, when adding links to PDF’s on the web, content creators must ensure the PDF document adheres to all PDF accessibility requirements. To learn more about creating accessible PDFs, go to UDC’s PDF Accessibility page.  The example below demonstrates an event page with a link to a PDF version available below the infographic.

Example 5: Event page with a link to a PDF Alternative. In this example, a link to an accessible PDF alternative is available directly below the infographic. The link demonstrates a descriptive link text that lets the reader know what the document is about. Right next to the link there is an icon that also alerts a user that a PDF document is present on the event page.

Additional Accessibility considerations for Events

Follow general accessibility standards and best practices:

  • Always provide the name, location, and date of your event.
  • Provide structure and organization to your event page by providing headers and organizing information into lists as needed.
  • Always provide alt text to any additional images inserted into the event page and ensure the alt text conveys what the image represents. EXCEPTION: images used for decorative purposes, the image does not need alt text.
  • If hyperlinks are included, always ensure the link text is sufficiently descriptive and lets a reader know where the hyperlink will take them.
  • Make sure all the event information is easy to see and is not hidden anywhere on the event page. This will ensure readers have immediate access to information.
  • Be conscientious of the readability of your event. Readers are less inclined to read about an event if there is too much information. Keep event details short and to the point!