Creating Accessible Content in GeorgiaVIEW

Course designers have a responsibility, both ethically and legally, to provide course content in a way that is accessible to those with disabilities. Creating accessible content, or altering existing content to make it accessible, is not difficult once you understand the basic concepts. Most of these methods will also result in content that is better for all students and not just those with disabilities.

Headings

You may be used to giving document sections a title by making them bold and/or a larger font than the body of the document. This works well for students with no visual disabilities, but blind or sight-impaired students who use screen readers need help navigating a document. The visual student can scan a document for those bold headings, but a screen reader that reads the text of the page aloud to students, cannot determine what is a heading and what is regular text. So it just reads it all mixed up together. And let’s say you wanted to read, or hear, the second heading of a document. If you are sighted, you just look down the page until you see the second heading. For the sight-imparied student, this would require listening to everything on the page that comes before the second heading if the creator did not use proper headings. The good news is that this is very simple to do and even creates a better-looking page for others.

In the GeorgiaVIEW HTML Editor, simply highlight the words that will be a heading, and choose the proper heading from the dropdown as you see here.

Highlight the text and choose the heading from the dropdown

Headings run from Heading 1 to Heading 6. A heading 1 is like the title of the page, and you should only have one heading 1 per document. Sub-sections of your document then, are labeled as a heading 2. On this page you are reading, “Creating accessible content in GeorgiaVIEW,” is the heading 1, and the name of this section, “headings,” is a heading 2. If there was a subtopic in this headings section, it would be a heading 3. Do not skip a heading (like from heading 2 to heading 4) because this causes confusion for a screen reader.

the format box shows the format of selected text

If you are not sure if you have assigned a heading format to a particular part of a page, just select the text and look at the format selection box. It will show you what format that text currently has.

Using headings also enables you to create more pleasant visual effects on your pages. Please contact the CTE for help with this.

 

Fonts

Because some who read web pages have various visual limitations, rather than being completely blind, we want to provide text in the most readable form possible. There are several things you can do to enhance readability.

Sans Serif Fonts

One of the ways to ensure readibility is to use a sans-serif font. Sans-serif fonts, like the one on this page, do not have serifs that make them harder to read. Serifs are the little curly-ques you find on some fonts. This is a serif font. This is a sans serif font. In GeorgiaVIEW, the fonts marked with checks below are sans serif. You should limit your use to one of these. Sans serif fonts include arabic transparent, arila, comic sans, ezra SIL, simplified arabic, tahoma, trebuchet, verdana, and dotum

Emphasizing words

When you want to emphasize a word in your text, use the bold command in the HTML edtior. This marks the word with HTML language (<strong>) that makes the emphasis apparent to a screen reader. Italics do not do this and are also more difficult for some people to read. So the bottom line is, no italics, and use the bold command for emphasis when needed. Be sure to read about the use of color in fonts in the color section below.

Links

When hyperlinking to another page, external website, or anything from within a page, be sure the link describes the destination. Those with visual impairments are often jumping from link to link on a page searching for a link to something in particular. So links should clearly describe where they are going without needing to read the text around the link. Phrases such as “click here” or “more” provide no information about where that link will take you. The link should provide a description of the destination. “Learn more about accessibility issues,” tells the reader that the link takes you to a page about accessibility. Again, this is preferred over something like “click here to learn more about accessibility” because someone reading links with a screen reader will only get the “click here” information and will not know the destination of the link. Screen readers typically precede a link with the word “link.” So the link,Learn more about accessibility issues, is read as “link: learning more about accessibility issues.”

Lists

You probably already use the list tool in Word, and that’s good. Screen readers need to know a list is a list. Simply putting items on a new line with perhaps an asterisk in from of them like this,

*One
*Two
*Three

is not accessible. Instead, use the built-in list tool in GeorgiaVIEW’s HTML Editor to create a numbered (ordered) list or an unordered list like this:

  1. Click the list/alignment icon
  2. Click the icon for an unordered list
  3. Or choose ordered from the dropdown menu

Choose either ordered or unordered lists

Images 

People with visual impairments, of course, cannot see an image on the page, and so they need another way of understanding what is in the image. We call this “alternative text,” or “alt text,” for short. You enter alt text to describe what is in the image so that a screen reader can read this text when it comes to an image. You do not need to add alt text to graphics that are purely decorative (they have no meaning), like the floral design next to “images” above, but you must add it to any image that is informing the reader about something like every other image on this page. Think about what someone would need to know about the image if they could not see it and put that in your alt text. In general, it is recommended that alt text be about two sentences, or 125 characters (although the limit is not firm). If it cannot be described in a couple of sentences, you will need to use another method. See the longer descriptions page for more on this.

When you add an image in GeorgiaVIEW, you are prompted to add the alternative text. Enter the alt text in the space provided, or click “This image is decorative” if, and only if, the image is for visual effect and has no meaning.

Add your alt text or click the " this image is decorative" box

Color

There are two primary issues to consider about the use of color. First, be sure not to convey meaning with color since some students have visual disabilities that prevent the accurate detection of color. What may look red to you could look brown to someone with a disability. It is alright to use color for decorative or style purposes, but do not convey meaning with color. So you would not want to say that, “everything in red on this page is for group 1 and everything in blue applies to group 2,” for example. Likewise, if you have an image that conveys meaning with color, like a diagram with colored lines, you will need to provide a description of that image either in the text of the page or through a link to a description on another page; or, alter the image so that color detection is not necessary for understanding it.

The second issue is to provide sufficient contrast between text and the background. Some people with visual impairments cannot see the difference between colors with too-little contrast, and therefore, they cannot read some text very easily if the text and background are not sufficiently different. In the HTML Editor in GeorgiaVIEW, the color selector for your font provides you with a built-in contrast analyzer and tells you whether or not the contrast between your text color and the background is sufficient.

The "select a color" dialogue lets you choose a color and tells you if the contrast is sufficient.

A red circle with an X indicating insufficient contrastThe green check mark in the image above tells you the contrast is good, while insufficient contrast would yield this symbol.

When creating pages in GeorgiaVIEW, a white background is the only option. But if you change background colors in an external program, be sure the contrast between the background and your text color is sufficient. The WebAIM contrast checker provides an easy tool for determining if your contrast is good.

Tables

Screen readers will read a table from left to right, top to bottom. So the content of a table that is used purely for layout purposes must make sense in this order. Read any table from left to right, top to bottom to make sure it makes sense. If it doesn’t, reorder the content or do not use a table.

Tables that are tabular data are another matter. In the simple table below, a screen reader would read this as, “Student, Test 1, Test 2, Test 3, John Brown, 98,” etc. Imagine trying to make sense of that flow of information. To remedy this, we label the top row and left column as headers so that the screen reader can make sense of the organization of the table. Fortunately, this is rather easy to do when creating the table in GeorgiaVIEW.

Student
Test 1
Test 2
Test 3
John Brown
98
85
90
Mary Jones
88
90
92

 

click the table icon to create a table

First, create your table by clicking the table icon.

 

When you create your table, be sure to click the “Table caption” option as shown below.

Click the table captoin box

After your table is selected, click on the top space, as you see below, to type a caption or title for the table. This helps screen readers identify the table content. After creating your table, drag your mouse over the top row to select it as you see below.

Insert your caption and select the top row

Click the table icon arrow and choose Table cell properties

Then click the arrow next to the table icon and select “Table Cell Properties.”

 
 
 
 
 
 
 
 
 
 
 
 

The cell properties dialogue

In the General tab, select “Header” as the cell type and “Col” as the Scope. Then click the Update button.

 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repeat the process for the first column STARTING WITH THE SECOND CELL. Drag your mouse over the column to select it.

Select the first column starting with the second row

The cell properties dialogue

Then open the Table Cell Properties dialogue, and choose “Header” as the cell type and “Row” as the Scope. Click the update button.

That’s it. Now your table is formatted so that someone using a screen reader can make sense of what is in the table.

 
 
 
 
 
 
 
 
 
 
 
 

Math Equations

Writing mathematical expressions on a web page requires more than just typing symbols as you might in a Word document. In order for the equations to be read meaningfully by a screenreader, the equations must be created in a certain way. GeorgiaVIEW provides the option of inserting mathematical expressions with three different tools: graphical equations, MathML, and LaTex. The most straightforward approach is graphical equations. With this option, you may be able to figure out how to insert a number of equations rather simply. The other two, while requiring more effort to learn, provide a more robost way to create mathmatial expressions.

The math tools in GeorgiaVIEW

To access the three tools, enter the HTML Editor and click the down arrow next to the graphical equation icon. In the dropdown menu, you will see the three choices.

Learn more about using the graphical equation editor in the Help Files inside GeorgiaVIEW. Navigate to HTML Editor > Inserting equations in the HTML editor.

See the LaTex project website for more about LaTex. For more about MathML see the MathJax website.

Video and audioA screenshot of a captioned YouTube video

For those who are hearing impaired, it is important to provide closed captioning for videos and transcripts of audio files. Many experts recommend a transcript for videos as well as closed captioning. This is another example of how ensuring accessibility in content can benefit everyone. Students with no impairments, for example, may benefit from having a transcript of a video or audio file for easy review.

There are services and various tools for providing closed captioning and transcription. At present, we use student workers to close caption video that has been placed on YouTube as our primary way of meeting this need. Please contact the CTE to discuss captioning your videos.

External content

If you require students to use external websites, publisher material, or particular software, you must ensure that those resources are accessible just like your GeorgiaVIEW content is. Most publisher material is accessible, but you cannot assume that it is. Question publishers about their accessibility standards and avoid those who cannot provide evidence that their material is accessible (and pressure them to make it accessible in the future). If you cannot ensure that external content or software is accessible, either choose another resource or provide an alternative for those with disabilities.

Want to know more?

This video from Desire2Learn shows you how screen readers read pages, and therefore, why it is important to make content accessible for them.

For a more in-depth explanation of web accessibility issues, see the Web AIM website, the W3C Web Accessibility Initiative, and the University System of Georgia Accessibility Guidelines

 
 

Share This

 
 
 
X

For more information regarding consolidation, please visit our Consolidation page.

¤