Universal Design for Learning considers designs that are effective for as many people possible. It is not a step-by-step procedure. It is a way of thinking. Many learning theories, standards, and the like converge on similar ideas. Using this mindset can make accommodations less necessary because the content is good for (nearly) everyone. These tips show this concept.

Tags must give Web Documents Structure – not a Certain Look

I can't stress enough how important this is. Assistive technology uses tags to determine what the content is. If you use a heading, a heading is expected. This is not true for Web content only. This is true for Microsoft Word files and PDFs too. In fact, PDFs are tagged for accessibility. Never use an untagged PDF. Never, ever, ever.

Back in the old days, Web developers used tables for display purposes. I remember nesting table after table. This practice can no longer be used. The div tag is used by Web developers to produce rows and columns of non-tabular data. On the other hand, use tags for structure whenever it applies. For example, don't use text numbers for an ordered list (ol tag).

Reading order

Structure and reading order are BFFs. Structure can have a direct effect on reading order. Sometimes, you want an image in the top left corner, but you don't want the alt attribute read until after the first paragraph. You can't use tables. Either you would have to use HTML code or write the purpose of the image in HTML text.

Know the reading order of your HTML pages. At my institution, the reading order for our library subject guides is first column, second column, then third column. The screen reader will follow this order and the boxes will appear in this order when the browser is magnified for those with low vision. Regardless, those using a small mobile device will view the content in this order as well.

Headings, Labels, and Section Headings, Oh My

These criteria apply to library guides and documents alike. Be sure to create and unique headings and labels. This is particularly important to those that use screen readers, but it helps everyone in scanning content. Sections headings effectively chunk or cluster information. Nobody can read a page that looks like a giant paragraph. I like to call it The Wall of Text.

Audio Tracks

It is best not to automatically play audio tracks and there should always be audio controls to stop, pause, and change the volume. The guidelines require this for items that automatically play for more than 3 seconds, but the controls are good practice regardless.

Consistency for Hyperlinks (and other functions)

The textual description of a function should be the same for every instance of that function. For example, don't use the same hyperlink text for multiple URLs and don't use different hyperlink text for the same URL. It would be confusing for any user.

Providing adequate instructions

If you provide controls that users will change, such as textboxes, checkboxes, comboboxes/dropdowns, provide instructions on how to use them. If the user can enter something wrong, let the user know there is an error and describe why it is an error in text.

Make it obvious what is chosen

When a hyperlink, button, textbox, or anything else that has a tab stop has focus, it should be obvious by some visible cue. Otherwise, users might think that they are selecting one item when they are selecting another, which would be annoying at best.

The navigation should be consistent if the navigation exists on multiple pages.

Providing hyperlinks to the software users need

Although this is not required per se, it is helpful to the user if you provide a hyperlink to the software that is needed to use "something" on your Web site unless it is common knowledge (e.g. PDF). Try to avoid videos that require Flash only if you can. If you can't, include a link to the flash player. If you include a YouTube video, it will try to play in HTML5, then it will try a few other players, so I point to the Webpage that tests browsers. Go to the browser test for YouTube.

Triggering Events when a User Selects an Item or Inputs Information

Be sure not to include widgets that change context when tabbing to a hyperlink, entering text, or using a checkbox. Some examples of change of context would be submitting forms or launching a new window.

Users Must Know Where They are and How to get Back to Where They Were

There must be a clear convention when hyperlinks launch new windows and inform the user. This is a change in context and can be confusing to anyone. Sometimes you just don't notice it launched a window. I have hit Alt-Right arrow on my keyboard and nothing happens, then I notice it is a new window or tab. Adding a glyph and invisible text for a screen reader would provide a good indicator.

Use Best Practices in Web Design

Web designers adhere to best practices that were developed for usability and browser compatibility. An excellent book containing best practices is Interact with Web standards: A holistic approach to Web design

Images for a Purpose

Don't use too many images or it can be distracting particularly to those with cognitive disabilities. It is fine to use some images for decoration, but most images should have a necessary function. Limit the number of important text in an image. Use HTML and CSS instead of screenshots wherever possible.

Is the Rich Text Editor the Root of All Evil?

Be very careful in how you use the rich text editor. It can add unintended tags that can cause these criteria to fail in almost every way.

Here are some tips.

• Never copy text from word then paste using the regular Rich Text Editor window. Use the paste from Word button.

  Why? It will put many unneeded tags in your code and probably use them improperly. This can make the page unusable to some groups of users.

• Only use basic text formatting, such as bold or italic.

  Why? Some users need their own style sheets because it is the only way they can see the content. The fonts, sizes, etc. could prevent them from using it.

• Be careful when you insert images. Make sure the cursor is where you want the images alt attribute read.

  Why? You don't want the screen reader to say. There once was an o graphic Betty White ld lady that lived in a shoe. Play or download the MP3, Image inserted in wrong place example. If the HTML 5 player launches, it will be in the same window.

• When you edit existing text, it will likely add non-breaking spaces ( ). I do a quick search of the HTML for   and replace it with a space.

  Why? It could cause the text to overflow the box.

*Image created by UnreifeKirsche

Users Can't use your Library Guide if They Don't Know what you Mean

Do you have excerpts of Deutsch, Español, or Français? The lang attribute must be used to indicate the proper language for screen readers unless it is a well known phrase in other languages. A translation could be helpful to multiple users.

In fact, any unusual word should have some kind of definition available. This could be a hyperlink leading to a definition or it could be a glossary page in your guide. Pick what would benefit the most users. In this line of thinking, abbreviations should be spelled out somewhere in some manner. This can be tricky with reusable text. I try to have it spelled out first on every page, but I am sure that I missed a few.

Don't leave your users hanging (ah, I better watch my slang because of the definition thing I just mentioned). If a user can input something on your Webpage wrong, give them a hint or correction suggestion if you can. This would not work for a test in most cases, but I don't think we have a great deal of content giving tests.