Designing Digital Assessments for Accessibility from the Ground Up

online accessibility design concept

Web-based applications have great potential to open up learning opportunities for people with certain physical and cognitive disabilities. However, as the prevalence of online learning continues to rise, so do concerns regarding accessibility, particularly for these individuals. Web Accessibility in Mind estimates that one fifth of the population has a disability of some kind. And though these individuals may or may not have difficulties utilizing online applications, you risk isolating a significant portion of your users when accessibility becomes an afterthought rather than an innate component of your assessment design.

Investing in proper accessibility and designing assessments for accessibility from the ground up not only increases your potential number of users, but also ensures that everyone can use your platform with ease. It allows browsers and assistive technologies to render content in an understandable way.

Assistive Technologies

Assistive technology is a generic term that describes tools used by people with disabilities to accomplish tasks. Some of these technologies include:

  • Screen readers (JAWS for Windows, NVDA, or Voiceover for Mac)
  • Screen magnification software
  • Text readers
  • Speech input software
  • Alternative input devices

By presenting content in an alternate way, these technologies assist the user in writing, spelling, reading, and navigating.

It is important for digital assessments to comply with standards that allow assistive technologies to interpret and properly render content. The Web Accessibility Initiative (WAI) provides information on how different types of users browse the web and the technologies used.

Digital Accessibility

Accessibility in online learning continues to gain momentum as an important part of the user experience. It should be considered a fundamental foundation on which you build all aspects of your assessment platform.

While the term “accessibility” means different things to different people, the World Wide Web Consortium (W3C), defines accessibility to mean that people with disabilities can perceive, understand, navigate, interact with, and contribute to the web.

Digital accessibility is about technical provisions. It is about how you implement your digital assessment platform and about the tools you use to construct and deliver content. But designing online assessments for accessibility is not just about techniques. The way you communicate your assessment—from the words you choose to the use of images and graphs—also affects accessibility.

Consistent Design

For accessibility purposes, it is important that the assessment interface is consistent across the experience. Global elements such as pagination, questions and help should appear consistently within the application. It is also important that elements with the same function, such as book marking, scratch pads and calculators, are ordered and labeled in the same way on every page.

Navigation

In order for users to complete an online assessment, there should be more than one way to move through a series of questions. A user can find their way by navigating through the intended hierarchy, but they should also be able to find a page or screen through an index, list or search function. This allows users to use their keyboard to find exactly what they are looking for.

Headings and Titles

When designing the look and feel of a test, keep in mind that some users cannot get a visual overview of a question. Rather, they have to do this structurally. Screen reader users often use a shortcut key to hear all of the headings on the page or to access a list of all the headings to which they can easily jump.

Make sure to divide the experience into logical sections, each with a heading that describes that part of the assessment. This allows assistive technologies to render them as section headings. To do this properly, you must tag these sections with headings such as <h1>, <h2>, <h3>.

In places where you wish to logically and visually highlight an area by using bold font/large font/another color, you should also highlight the heading in the code. In this way, the heading not only functions visually but also structurally.

Use of Color

An assessment page with information, test items or scores solely represented by color is frustrating and ineffective for users who are color blind. For instance, conveying links within text should go beyond making them a different color. Additionally, error messages are typically expressed in red. This can make it difficult for those with colorblindness to interpret them clearly. Supplement these links or messages with underlined text, iconography, etc.

For visually impaired users to read all the text on a page, it is important that the color of the text and the color of the background are in sufficient contrast with one other. You can achieve this by conforming to the required contrast ratio of 4.5:1 for regular text, and 3:1 for large text. There are a number of tools available to assist in measuring contrast ratios quickly.

Test Items

When designing test items, it should be clear to users what actions they should take. Text fields, drop-downs, checkboxes and radio buttons should always be associated with descriptive text. For example, an input field label, like “Question 1” or answers “A”, “B” or “C” must be coded (using ARIA) in order to associate it with its input field. Doing so enables the screen reader to announce the label when the user tabs into the input field with a keyboard or mouse.

Keyboard Navigation

All content within an assessment should be navigable both with a computer mouse and with the keyboard alone. This applies to questions, answers, buttons, links, etc.

Some users are unable to use a computer mouse and instead use a keyboard, or “switch control device,” to navigate by tabbing through content. Because these users need to be able to see where they are located on the page, an indicator should always be visually evident. (Note: most browsers automatically show this with a dotted line around the content that is in focus.) It is also possible to handle this in a custom manner. However, its best practice to keep the default visible outline, as this is what most people will expect to see. In all cases, do NOT add code to remove the visible indicator!

User Input

If the user must enter information into a field, ensure they receive instructions to enter the text correctly. (I.e. question type with fill in the blanks.) Also, ensure that the user is notified if he/she makes a mistake. Instant notification is better for all users rather than notification upon submission. Remember not to use color alone, like red, when displaying error messages. Use the word “Error” or make the description clear that an error has occurred. You’ll also want to provide a description on how to fix the problem.

Graphics

When areas of the assessment contains non-text elements—such as images, graphics, or embedded video—one of the most important rules is to provide a text alternative that describes the purpose of the element.

And Finally…

By implementing these techniques and strategies, a higher percentage of users will be able to consume, engage with, and ultimately complete their assessments online. Making these accessibility investments in design and functionality will grow your user base and ultimately lead to an online assessment solution that is open for all.

Learn more about designing online assessments for accessibility