Organization is crucial to how people find, navigate, and process information. Imagine reading a menu organized according to the time of day when the item started cooking. Or imagine searching for a phone number based on where the person lives. Or imagine if the grocery store were organized by weight with all the heaviest packages on the right of the store and the lightest on the left. In all three of the above nonsensical cases, the items are organized according to a system that emphasizes a quality different from what the consumer cares about and probably does not highlight what the provider wants the consumer to focus on.
The same principles are true in organizing digital content. If someone organizes a collection of poems by poet, it emphasizes studying the poet and analyzing that one poet’s body of work. If the designer instead organizes the poems by theme, it pushes the individual poets out of the focus, and replaces them with thoughts about love or nature or death. Of course, digital content allows a designer to provide many alternative forms of organization on one page, so a user might be able to look at a collection of poems organized by poet, theme, year, location written, etc. It can quickly become complicated with multiple layers of organization each containing multiple layers of information. A strong information structure helps a user navigate through content, understand their location within it, and process it.
Developers are constantly designing new ways to present digital content, so there is no way to list all the possible ways to organize material. However, some of the more common ones include headings, lists, tabs, accordions, tables, refreshing content, etc. There are many options and combinations, so it is important for a designer to be clear on their organization and then to do it in the simplest way possible. The structure then needs to be communicated to the user.
Visual cues help a user efficiently understand what is happening. Bold and CAPITALIZED text draws attention, as does a larger font size. Making font small and putting it at the bottom of the page indicates it is material most users will not want to read. Grouping together pieces of text or links indicates a relationship. All of this is visual information that is not readily available to a blind user. However, using proper semantic markup and coding allows assistive technologies to communicate structural information to the blind or low vision user. In addition, assistive technologies provide short cut keys that allow users to more efficiently navigate around the page when it is properly coded.
Although most users of platforms such as Web Express and Canvas are not actually doing any coding, using the platforms properly makes it so they provide helpful code to assistive technologies. This article provides general information about structural markup, along with specific information for using Web Express and Canvas.
Below are 5 basic points to keep in mind when building the structure of your page to make it accessible: Overall Structure, Headings, Lists, Tables and HTML 5 Regions and ARIA Landmark Roles.
Overall Structure
The same advice for organizing content for all users also applies to screen readers and magnifiers, although it frequently impacts the latter group of users more. Here are tips for improving website structure:
- Organize your content into sections that would make sense if you were putting it into an outline.
- Avoid long, unbroken blocks of text or strings of links and other controls.
- Do not just dump content from another source into a webpage; people are quickly overwhelmed by too much content on a computer screen and that much more on a mobile device.
- Give people ways to quickly group blocks of text or related controls.
- Break content up into separate pages. There is no hard and fast rule about how much content is too much content on one page, but keep in mind what people will be looking for and how long it takes to make it through the content you have.
- Predict the different ways various audiences might approach your content and provide multiple ways to navigate it.
If you want people to use the content you take the time and energy to create, divide it up into manageable amounts and present it in meaningful ways.
Headings
Headings are a way to tell a user what and where the main sections are. Here is an example of a site with inadequate headings for main content. Label sections and sub-sections with nested headings, heading level 1, heading level 2, etc. without skipping heading levels. Proper heading level markup can give a blind user a quick outline of the page content, as well as an efficient way to navigate the page. Be sure to use heading levels for a hierarchical organization of content, not for formatting. It is okay to skip heading levels when going back up, for example from heading level 4 back up to heading level 2, but not when going down, for example moving from heading level 2 to heading level 4. Assistive software does not interpret text format to be part of page structure, so use proper heading level markup —h1, h2, h3, etc.— rather than text formatting such as size or bold to indicate heading levels.
Additional Resources for using Headings:
Lists
Lists indicate that content or controls are related. This can be helpful to a blind or low vision user in creating a mental map of a page and jumping more quickly through groups of information. It is important to use proper markup to indicate a list, not just adding bullets or numbers manually. Avoid using lists to impact formatting such as indentations and space around items. A list should contain more than one item.
Additional Resources for Creating Lists:
Tables
When used appropriately to display data, tables can be a meaningful and accessible way to present information. Here is an example of a screen reader user navigating information in tables. The most important things to remember when making an accessible table are to use headers and to avoid merging cells. Avoid merging cells to keep tables as simple as possible. A sighted person can look at a complex table and figure out how all the pieces are related, but someone who is blind can only learn about each part of the table as they navigate to it. A sighted user can see that half a row is merged in less than a second; it can take a blind person a minute or more to arrow key around and figure out what is going on. It is preferable to break down a table into multiple simpler tables. For more details, read AUL’s When to Use Tables and How to Make them Accessible blog entry.
Additional Resources for using tables:
HTML5 Regions and ARIA Landmark Roles
HTML5 Regions and ARIA landmark roles give you a way to categorize sections of information. They are more specific and provide more information than headings, although an appropriate heading should also be assigned to most of these in order to support all technology. The regions and landmarks give a screen reader user more detailed information about a portion of the page than a heading. In Web Express, if you originally select the accurate option to host your content—main menu, secondary menu, article, etc.— Web Express will automatically assign the proper semantic markup. Desire2Learn and Canvas have some landmarks built into the framework of the website, but there are none in the content that an instructor has control over. The only way to add one in is to write it directly into the HTML, instead of through the normal user tools in Web Express and D2L.
Additional Resources for using ARIA:
Conclusion
According to Robert J. Glushko, in his book The Discipline of Organizing, “To organize is to create capabilities by intentionally imposing order and structure.” In other words, a well-organized digital resource can be more than the sum of its parts and a poorly organized one can be less than the sum of its parts. A designer selects the principles that will make up the organizing system for her content. In my own kitchen, there are three layers of principles to determine where I keep my spices and herbs. I have 3 plastic containers for different kinds of seasonings, one for spicier ones like red pepper, cumin, turmeric, etc., another for more Mediterranean or green type ones such as oregano, basil, and thyme, and a third for sweet ones such as nutmeg and cloves. I know someone could argue with occasions when spices would cross over into another category or technically why they would fall elsewhere, but this system makes sense to me. There is a fourth container with seasonings I use frequently, such as salt, black pepper, and garlic. The final group is for seasonings that come in containers that are too large for a plastic container, including salt and cinnamon—I have two kinds of salt for two purposes. I organize all of my spices and herbs based on three different kinds of qualities: size of container, frequency of use, and what I would be cooking when I need them. It is not a perfect system, because I use red pepper a lot, so maybe I should move it to the frequent container and since I rarely use vanilla, maybe I should move it to the sweet container. I could organize them by alphabetical order or all by container size and shape, but those systems contain less meaning for me.
However, I am always open to change, should that ever seem to make sense. In a digital resource I have been organizing, I am assigning keywords to a group of content. I started by using a limited number of keywords, adding one when a new piece of content seemed to need it. It got to a point where having a limited number seemed inadequate for the situation, so I changed it to allow for an infinite number. Now, the number of keywords is overwhelming to users and is limiting their ability to find a resource, which was the original goal. I am in a situation where I am cleaning up the keywords, removing words that are not useful, after which, the goal is to find approximately six—a number I think will be manageable to users and will not contain too many pieces of content under each- keywords that would apply to every resource. In the end, a couple might apply to the element, while a couple of them might apply to a type of behavior, and the rest might apply to the user. I am interested to see how it works out and I do not feel a need to force the content to fit into a system I impose. I have seen with my kitchen spices that the content can offer principles and a system if I spend time watching how the content fits together and if I am willing to let it change.
My own examples of spices and keywords are just an introductory look at the field of organizing, but they demonstrate some of the basic concepts. When putting together your own digital content, be mindful of what your intention is, what your audience’s purpose is, and how you are going to organize your content to help everyone get what they want. When you have a system for organizing content, you can make it so the computer has access to the system by not just indicating it visually with placement and format changes, but by providing the programmatic information—computer-accessible information—covered above. Once the structure is there, proper semantic markup will also make it more accessible to people using screen readers and magnifiers.