Activity: Create and share a simple bar chart


The objective of this post is to teach your student how to create a simple bar chart and share it with their general education teacher. The post builds on the Digital Transitions Fall Leaves activity.

Before you begin

Install SAS Graphics Accelerator for Google Chrome.

Place the keyboard in front of your student so they can “drive” and perform the steps defined below.

Collect samples

The first step of this activity is to go outside, collect leaves, identify the species of each leaf, and count the number of leaves for each species as described by the fall leaves activity post above. 

Create a table that contains your data

Open the SAS Graphics Accelerator popup menu in the Google Chrome tool bar.

Sighted mouse users can do this by clicking the SAS Graphics Accelerator icon in the Chrome tool bar. The icon looks like a stylized “s” that is blue. Windows screen reader users can open the popup menu by pressing Alt to move focus to the Chrome menu in the tool bar, pressing Left Arrow to find the SAS Graphics Accelerator icon, and then pressing Spacebar to open the popup menu.

Activate the “Laboratory” button in the popup menu. That should open the SAS Graphics Accelerator Laboratory page in Google Chrome. 

On the Laboratory page, activate the Tables link to open the Tables page.

On the Tables page, activate the “Create Table” button at the top of the Laboratory page. That should open the Create Table page.

On the Create Table page, specify the number of columns and rows that will be in your table and then activate the Next button. For example, if your student collected leaves from five different species of trees then you should create a table with two columns and five rows.

Enter a column heading for Column 1, e.g. “Species”. 

Enter a column heading for Column 2, e.g. “Count”.

Enter data from the samples you collected in each row then activate the “Save” button. That should open the “Prepare Table” page.

On the Prepare Table page, make sure the “First row contains column headers” and the “First column contains row headers” check boxes are both checked. 

Activate the “Save to Laboratory” button. That should open the Table Page.

Create a bar chart the easy way

The easy way to create a bar chart is to explore the data interactively using the Variable Page. 

On the Table Page, you should see that the text in each column heading is a link, e.g. “Species” and “Count”. Activate the “Species” link. That should open the Variable Page for the Species variable. The Variable Page provides a summary of the selected variable. The summary may include automatically-generated charts, depending on the type of the variable. The Variable Page also automatically generates charts that compare the selected variable against other variables in the table. 

On the Variable Page for Species, activate the “Bar chart showing Count by Species” link. That will open the selected bar chart in the Sonification View.

Create a bar chart the hard way

When charts are automatically generated on the Variable Page, reasonable defaults are provided for the chart title, axis labels, sort order, etc. If those defaults are not acceptable, you can create charts manually.

On the Table Page, activate the “Create Graph” button. That should open the Create Graph page.

On the Create Graph page, select “Bar Chart” as the chart type, select Species as the X-axis variable, select “Count” as the Y-axis variable, complete other form fields as desired, and then activate the “Submit” button. That should create a bar chart and display the list of charts on the Table Page.

On the Table Page, activate the link for the chart you just created. That should open the Sonification View for that chart.

Share the bar chart with your general education teacher

Regardless of how you create a bar chart, you can easily share it via email.

Open the bar chart in Sonification View.

Screen reader users should disable forms mode. JAWS users can do this by pressing the Num Pad Plus key twice quickly. 

In the Sonification View, find the link with the following label and activate it: “View, download, and share a visualization of this bar chart”. That will open the Visualization View.

On the Visualization View, wait for the bar chart to load. Sighted users will see the chart load visually and screen reader users will hear a verbal announcement when the chart has finished loading.

Activate the “Download Graph as HTML” button. On Windows, that should open the Windows Explorer application and display the contents of the default Downloads folder for Chrome. 

In Windows Explorer, use arrow keys to find the bar chart file, press Control + C to copy the file, then compose a new email to your teacher and attach the bar chart file.

How can your blind student quickly find the minimum, find the maximum, and compare values within an accessible digital bar chart? That’s a topic for another post.

Additional SAS Graphics Accelerator posts

Activity: Reading bar chars using fun facts about planets

Activity: Reading line charts that show stock market data

Activity: Creating line charts from Yahoo finance stock market data

SAS Graphics Accelerator Tutorial #1: How To

SAS Graphics Accelerator Video Tutorial #2: Options


Posted by George S. ThompsonDec 11, 2018

Hello Ed,
Thanks for posting this. I was selected to volunteer to teach a class, ACT workkeys prep. If you didn't know, ACT Workkeys is an alternative to the ACT for students whose paths are not college oriented. The curriculum and test is about one third "graphic literacy" and there are numerous charts in the textbook. The online textbook is also inaccessible to a screenreader and has these charts in javascript frames? What would be best format for conversion to make these charts accessible? I am not sure textbook company will or can do this, but I will ask.

Posted by Ed SummersDec 12, 2018

Hi George,

I'll provide a summary here. I'm also happy to discuss offline.

First, the images should be accessible in that they should contain text that is large enough, the text should have sufficient contrast with background color, the elements of the image should not use color alone to convey meaning, the image should maintain clarity when it is magnified, etc.


Second, there should be an alternative text description for each image that can be programmatically determined by screen readers. Typically, that is achieved by specifying the alternative text description in an "alt" attribute on an "img" tag. The alternative text description should be short, i.e. a phrase or a sentence at most.

Third, there should be a long description for each image that can be programmatically determined by screen readers. The long description may contain a more verbose text description, and/or a table of data, and/or an interactive multimedia object that enables the user to explore the image, etc. For example, SAS Graphics Accelerator provides all of these items for specific types of charts/graphs, i.e. pie, bar, line, histogram, series, box, scatter, and bubble.

Fourth, there should be a printable tactile graphic for each image so a teacher/proctor can emboss the images. Each image should be labelled so that a student can find the correct tactile version of each online graphic.

I'll be happy to discuss offline if you wish. I'm also happy to discuss with ACT if you open a dialog with them.

Hope that helps,