Making Your App Accessible

Making Your App Accessible

Tufts has a digital accessibility policy requiring that your app is accessible. The goal of accessibility is that every person can access your app equally, regardless of how they’re interacting with it.

When you finish creating your app, walk through the steps below and implement every step that you can. Any time you make major changes to your app, check the accessibility again.

When you create your section, give it a short, clear, meaningful label.

Section labels tell a user what this section of questions will be about, and, if your survey is multiple pages, are.

Section labels appear above the questions in each section

To update a section's title:

  1. In the Form Design screen, click the existing section gadget.
    Click the space above the questions in the section
  2. The gadget configuration panel will open on the right side of the screen. In the Gadget Label/Question section at the top, enter a new clear and meaningful section label.
    Gadget label is the first option on the right panel.
  3. Click anywhere outside of the right configuration panel in the form to save your changes.

At the very beginning of your form, add a Heading 1 title and instructions.

  • The title should be a short phrase describing to a user what the entire form is about.
  • The instructions should include any information the user should know before filling out the form, as well as a contact if they need help.

Title and Instructions are text that will go at the very beginning of your form.

Tip: The section gadget label is not the title! The section gadget label describes this group of question gadgets. The title describes the entire form.

To add a title and instructions:

  1. In the Form Design window, add a Read-Only Text gadget to the very top of the first section of your form.
    Read Only text is the second gadget on the left gadget list
  2. In the right configuration panel for the Read-Only Text gadget, type your title and instructions on separate lines.
  3. Highlight your title. In the text edit menu, click Normal and change your title to be Heading 1.
    Heading 1 is an option in the gadget configuration panel.
    Note: Be careful to make only your title a Heading 1. The instructions should be normal text.
  4. Click anywhere outside of the right configuration panel in the form to save your changes.

All text input fields, such as long and short text entry questions, need help text.

In Kuali Build, there is no way for the user to identify the input location on Text Entry gadgets, which by default look like this:

text entry gadgets have a question title and nothing else
How does the user answer the question? There is no visible input box, no blinking cursor, and generally no indication of where they should type - or if they even can.

Instead, you want to add help text to each text entry gadget:

Add text that says "click below to enter your response" to each gadget

To add help text to a gadget:

  1. Click a text entry gadget to open the configuration panel on the right side.
  2. In the configuration panel, toggle on Description/help text.
    Description help text is the third setting in the configuration panel
  3. Enter help text, such as "Click the space below to type your response."
  4. Click anywhere outside of the right configuration panel in the form to save your changes.

Use description/help text, but don't display it as a bubble.

When adding description/help text, you have the option to display that help text as a bubble. Don't! Here is a comparison:

Display as help bubble displays a blue question mark that can be clicked.

Why not display the help text as a bubble? A common accessibility aid is a screen reader, which reads the screen to the user. If a person is using a screen reader to aid them in filling out your form, the bubble text is read before the question. For example, if you have help text as a bubble as in the above example, the screen reader will read to the user, "Click the space below and enter as format..." THEN it will read "What's your phone number?" It doesn't make sense!

The option for help bubbles is displayed below the help text entry

Use description/help text, not placeholder text.

When adding description/help text, you might want to use placeholder text instead. Don't! Placeholder text disappears as soon as the user clicks inside the field. If the field had placeholder text the user needs to reference, they now cannot.
placeholder toggle is under help text toggle

All fields with requirements or instructions need help text.

When building your form, keep in mind the user's perspective. What should a user do if what to choose for an answer is unclear? They don't know unless you tell them. What if they want to skip several question? Kuali Build doesn't flag required questions to the user by default, so the user will try to submit the unfinished form only to see an error.

Instead of leaving the user to guess if a field is required or what they should enter, add help text for any fields with requirements or instructions.

help text appears under the gadget label

To add help text to a gadget:

  1. Click a text entry gadget to open the configuration panel on the right side.
  2. In the configuration panel, toggle on Description/help text.
    Description help text is the third setting in the configuration panel
  3. Enter help text, such as "Click the space below to type your response."
  4. Click anywhere outside of the right configuration panel in the form to save your changes.

Use description/help text, but don't display it as a bubble.

When adding description/help text, you have the option to display that help text as a bubble. Don't! Here is a comparison:

Display as help bubble displays a blue question mark that can be clicked.

Why not display the help text as a bubble? A common accessibility aid is a screen reader, which reads the screen to the user. If a person is using a screen reader to aid them in filling out your form, the bubble text is read before the question. For example, if you have help text as a bubble as in the above example, the screen reader will read to the user, "Click the space below and enter as format..." THEN it will read "What's your phone number?" It doesn't make sense!

The option for help bubbles is displayed below the help text entry

Use description/help text, not placeholder text.

When adding description/help text, you might want to use placeholder text instead. Don't! Placeholder text disappears as soon as the user clicks inside the field. If the field had placeholder text the user needs to reference, they now cannot.
placeholder toggle is under help text toggle

Not all gadgets are accessible.

A common accessibility aid is a screen reader, which reads the screen to the user. Kuali Build offers a large number of gadget types, but unfortunately, some of these gadgets are not accessible to screen readers and should be avoided. Below is a list of gadgets to avoid and suggested workarounds.

Avoid: Option Range gadget.

An option range gadget presents a question to the user and a range of options, such as 1-5.

Option range is in the special gadget section. Don't use it!

Option range gadget problem 1: With option range gadgets, screen readers do not do not read the gadget label. For example, your gadget might be labeled: "How would you rate us? Choose 1, 2, 3, 4, 5" . You would expect the screen reader to read "How would you rate us?  Choose 1, 2, 3, 4, 5". However, the screen reader will only read to the user "Choose 1, 2, 3, 4, 5". If you're using a screen reader, how will you know what you are choosing 1-5 for? You won't.

Option range gadget problem 2: When the user has finished filling out the form and is reviewing the form before submission, the gadget label is not associated with the answer options. The screen reader will not read, "For the question How would you rate us?, you chose 2." Instead, the screen reader will only read, "You chose 2." What did the user choose 2 for? There's no way to know.

Option Range gadget workaround:

You can use a multiple choice gadget to present the same question and offer the same options.

A multiple choice question can be used identically to option range

 

Avoid: Rich Text gadget.

A rich text gadget is a gadget where the user can enter text that they can add formatting to - making their entered text bold, pink, underlined, cursive, etc.

Rich text is the third basic gadget

Rich text gadgets have an accessibility issue identical to option range gadgets.

Rich text gadget problem 1: With rich text gadgets, screen readers do not do not read the gadget label. For example, your gadget might be labeled: "What is your research proposal?" You would expect the screen reader to read "What is your research proposal? Enter text.". However, the screen reader will only read to the user "Enter text". If you're using a screen reader, how will you know what you are entering text for? You won't.

Rich text gadget problem 2: When the user has finished filling out the form and is reviewing the form before submission, the gadget label is not associated with the entered answer. The screen reader will not read, "For the question What is your research proposal?, you entered Exploring Rice Growth in Summer." Instead, the screen reader will only read, "You entered Exploring Rice Growth in Summer." What did the user enter that answer for? There's no way to know.

Rich text gadget workaround:

You can use either a short text gadget or long text gadget for the user to enter text.

Short and long text gadgets are the first two gadgets in the basic section.

Avoid: Data lookup (multi-select) Gadget.

A data lookup (multi-select) gadget is a gadget connected to a data source, such as a list of all users at the university or a list of all departments, where the user is presented a list of choices and can choose multiple options.

Data lookup (multi-select) Gadget is the third advanced gadget

Data lookup (multi-select) gadgets problem: With data lookup (multi-select) gadgets, all choices are unlabeled to screen readers, meaning a user cannot review or know what they've already selected. For example, if a user chooses Brian and Susan from the gadget, the screen reader does not read, "You have chosen Brian and Susan." Instead, the screen reader reads "You have chosen Unlabeled and Unlabeled."

Data lookup (multi-select) gadget workaround:

You can have many Data Lookup (list) gadgets for as many options as the user may need.

data lookup list is the second option under advanced gadgets