Our goal has always been to empower students of all abilities. We want to partner with you to help make your Boom Cards more accessible for all students. By making your Boom Cards more accessible, you will expand your resources to new audiences.


More and more states are requiring that educational content meet certain accessibility requirements. Recently, Colorado and Maryland’s DOE reached out to inform us that their legislature is requiring educational content used in their schools to adhere to the WGAC 2.2 standards. In order to continue offering your Boom Cards in those states and others who will be adopting those requirements, we are providing new tools so you can have a leading edge to make your Boom Cards accessible for a wider audience. 


Here is a List of Best Practices to make accessible decks: 

  • Add accessibility text to all relevant Sounds and Images
  • Use Proper Z order
  • Use Proper Color Contrast
  • Use On-Screen Keyboards when appropriate

We will cover what these mean in this article. You can also skip ahead using the table of contents below. 


TABLE OF CONTENTS


Enabling Accessibility with Self-Made Decks


Using Alt Text (Alternative Text) / Accessibility Text


ALT text, also known as alternative text, or ALT attributes, are snippets of text that describe the content of an image or a sound. You should add ALT text to each image and sound in your deck to help with accessibility.


Your ALT text should offer a descriptive explanation of any required image or sound. It will be read by accessibility programs or screen readers, so it should accurately describe the image or sound to a person with impaired vision or hearing. If content that is necessary to understand the card is present in an image or a sound, it must be in the alt text. Check out this video:



Adding ALT Text to your Deck


You can add ALT text to your images or sounds using the image/sound properties panel by clicking on "Accessibility Text." If there is missing text, a red "MISSING" message will appear. Once Accessibility Text is added this will no longer show. 


Missing Accessibility Text will also be called out in the Selectable List with red text, shown below. 



It is imperative that you do NOT leave the alt text blank. If you leave it blank, your deck will NOT be considered accessible, it will NOT be found in accessible-filtered searches, and it will NOT score as high in our search algorithms. We will guess and try to invent alt text if you leave it blank. If you do not want us to provide a text equivalent for a sound/image, enter "none" in the "Accessibility Text" field.


NOTE: If you DO NOT WANT the screen reader or sound interpreter to read or display a text representation of your image or sound (b/c it is a background or decorative image/sound) that is NOT constructive to the learning content of the card, then enter "none" in the "Accessibility Text" field. 


Sounds


The Accessibility text for sounds is intended for learners who required auditory accommodations which can include but is not limited to learners who are hard of hearing, have auditory processing disorders, or are in an environment where they cannot listen to sounds. 


You can add alt text to your sounds using the Sound properties panel or the selectable list by clicking on "Accessibility Text."


If you added an image background to your sound, please include accessibility text describing the image in the second line, shown below. 

Our Player allows student to enable "Sound to Text" in their sound settings.

 


When this is turned on the Accessibility text will display on the screen when the sound is played, shown below, allowing the student to understand the sound's content or it's context in the card. 



Without ALT text, Accessibility tools may skip the sound altogether or offer a notice to the user that no description is offered.


Images

Accessibility text for images that are required for user comprehension should be short snippets of text that describe the image in 50 characters or less. 


Here is an example of accessibility text entered into the Accessibility Text modal:



Here is another example with a more complex image with content that is necessary to understand the card:


Screen readers will read the ALT text of the image, allowing the student to understand the image's content or its context in the card. Without descriptive text, the program may skip the image altogether or offer a notice to the user that no description is offered.


Optional Accessibility Text

There are a few places where Accessibility text can be added but is not required


Card Accessibility text

The Card accessibility text can be used to describe flattened background images or offer a description of the general concept of the card to help explain to visually impaired learners what the Card is. 


If the card has a busy background image that can help give context to the card, the "card" accessibility text should describe the background image. 


Fill-In-The-Blank 

You can add Accessibility text to a Fill In the Blank answer in the Fill-In-The-Blank Properties box, shown below. 


Sound Background Image

If you added an image background to your sound, please include accessibility text describing the image in the second line, shown below. 



Adding Accessibility Text to Flattened Background Images

We have seen many users who have made portions of their cards on external platforms and added the image as the background image. The problem with that is that Background images cannot have accessibility text. 


To get around this you can use the optional Card Associability text to describe Background image as well as use empty Text elements including text boxes and buttons to "Circle" elements in the background image that requires accessibility text. 


Using Text Elements to add Accessibility Text


First you will need to drag over a new Text element to your card. A text element is any element in a Boom Card that supports Text including Text boxes and Buttons. 


Accessibility text can only be added to Blank Text Elements. This means you will need to remove the Template text, for Text boxes, you will need to remove "Click to edit text." and for Buttons you will need to remove "Button". So you are left with an empty box, shown below. 

Once the text element is empty, click away to unselect the element and click back on it and the Optional Accessibility Text will appear in the Text Properties box. 



In the example below the Number line is apart of the background image. We chose to use a Text Box to circle the Number line and add the accessibility text "A number line with 5, 10, blank, 20, and 25 listed" to give context for a visually impaired user. 


If you have elements in your Background image that you want to be selectable, you can use a Button to add accessibility text and have it marked as a correct/incorrect answer. 


Adding Accessibility Text to your Decks From The Library

You can add Accessibility text directly from your Library for your self-created or self-uploaded Sounds and Images by clicking edit details. 


The Accessibility text added from your Library will be applied to all NEW decks that use that sound or image file from here on out! 


Please Note: If you have duplicate image or sound files that are the "same" accessibility text will need to be added to all image or sound files.


Proper Z Order

When creating your decks, you can ensure their decks are set up to allow for Screen readers and Keyboard navigation by using Proper Z order.  

Proper Z Order means that when a student is using your card with alternative methods, they will experience the card as intended. 


Things to ask yourself when creating a card pertaining to Z Order: 

  1. How would you like Students who use accessibility tools to interact with your deck? 
  2. What order would you like learners who cannot see to hear/answer questions in your deck? 


Use Z Order to arrange your card's elements chronologically. The higher in the Selectable List, the earlier the Screen reader, tab key, or Navigation button will interact with the element.


You can use the Z Order section, shown below, to move your elements. 


You can learn more about Z Order in the article Z-Order - Moving Objects In Front of or Behind Other Objects




Proper Color Contrast for Backgrounds and Text 


Proper color contrast refers to having enough contrast between your Card background color and your Text color. We do not have an internal Color contrast tool, please use an external tool for contrast recommendations. 


You can select a solid color or upload an image as a background for the selected card to create more contrast to improve visibility. Add these to the template card to apply the same background to all cards in a deck.


You can also change the color of text boxes, including the text itself or the background color behind the text.



Using Custom Sounds


Creating cards with custom sounds is an important feature included with our Premium, Publisher, and School memberships. Sounds can be used to aid students with special needs, English as a second language, or those who need assistance with vocabulary development.


Images can be added to the sound to give it a different appearance than the default "speaker" image. Sounds cannot be clickable answers but can be made into draggable objects for a drag-and-drop answer format.


You can upload your custom sounds by clicking on the Studio tab and then clicking "Sounds" under Asset Managers.


Here are all of our Creating with Sound FAQ articles: Creating with Sound



On-Screen Keyboards


For special symbols or language-specific characters, you can add an on-screen keyboard for students to use. This makes fill-in-the-blank answers much easier for students who need to use mathematical symbols or other characters not traditionally found on an English keyboard. Here is an example using the Spanish on-screen keyboard:





Accessibility within the Boom Card Player

Students can use their keyboard to move through cards in a deck and to select fill-in-the-blank answers. We currently do not support screen-reader or switch control technology, but we hope to develop it in the future! For now, students are able to utilize their arrow keys and the tab key.


Creators can ensure their decks are properly set to allow for Keyboard navigation by using Proper Z order.  

Proper Z order means that when a student is using your card with alternative navigation techniques, they will experience the card as intended. 


Arrow Key Navigation


Instead of relying on a mouse or trackpad, students playing Boom Decks can navigate between cards using the arrow keys:  left for "Previous" and right for "Next/Skip".


Note: This function does not currently work on Flow Magic decks since the cards are formatted to be in a certain order depending on a student's answer.



Tab Key Navigation


The Tab key can be used to scroll through answers on a card. You'll still need to use a touch screen or a mouse to interact with drag and drop elements.

Highlighting each answer on a card using the tab key


When you reach a fill-in-the-blank text box, the cursor will automatically appear in the box and will allow students to type their answers. They can submit the answer by pressing the Enter key.


If there are multiple fill-in-the-blank text boxes on one card, pressing the Tab key will move through them based on their z-order. This is important to note for creators. If the fill-in-the-blank boxes are placed around the card in a random order, tab navigation may not be as clear.







We at Boom are constantly working to make our platform accessible to more people. Please stay tuned for announcements as we develop more accessibility features. If you have any decks that you have specific questions about, you can email us at Help@boomlearning.com and an agent will happily help you.