We want everyone who visits a Submittable website to feel welcome and find the experience rewarding. Submittable follows Web Content Accessibility Guidelines (WCAG) 2.0, with a goal of meeting Level AA accessibility, to make sure that people using assistive technologies can easily navigate Submittable pages and publicly available forms.
Submittable pages and forms are configured to be navigated using keyboard commands associated with a wide variety of browsers (Chrome, Safari, Firefox, Internet Explorer) and screen reader applications. Site pages and public-facing forms are built with ARIA labels, and the default settings for text, buttons, and hyperlinks follow WCAG guidelines for color contrast.
When designing the Look and Feel of your organization’s Submittable page, and constructing your forms, there are steps we recommend organization administrators take to make your Submittable webpages accessible:
Consider color choices when creating the Look and Feel of your organization’s Submittable page. When configuring the look and feel of your organization’s Submittable page (elements such as background, header background, header text, link color, and link hover color), please note that certain colors and color contrasts can affect the accessibility of your page. Red-green color deficiency is the most common form of color blindness. Using only colors such as these can be problematic for users with color vision deficiency. Additionally, low-contrast scenarios, such as gray text on a gray background, will pose problems to users with impaired vision. There are several tools you can use to evaluate color contrast, which will assist you in making your page as useful as possible for people with low vision and varying degrees of color blindness.
Ensure your hyperlinks have unique and descriptive wording. When including hyperlinks in your guidelines or form field descriptions, use text that properly describes where the link will lead. For example, using "click here" is not effective for a screen reader user. Instead, you could clearly write, "To learn more about our organization, read About Us."
Make sure that labels for any form field are easy to understand when read out loud by a screen reader to someone who is visually impaired. For example, if the field is for a reference’s phone number, it should be clearly labeled “Reference Phone Number” instead of “Phone Number.” It also helps to use the description option (on the right side of each form field) to clarify the type of information you are looking for, such as “Enter a contact phone number for your reference.”
Include proper alt text for any image(s) placed in your form guidelines. Alt text (alternative text) is a descriptive phrase that may be inserted into an HTML tag to help website users know what an image portrays. Alt text should be included for any image you use in your organization or form guidelines, so that screen reader users can understand the message conveyed by the use of images on the page. When creating the alt text, make sure the text conveys the message you want to communicate through that image, such as “zebras running."
Use headings to organize the structure of your content. When using the Text Only field, use the formatting tools to apply headers, rather than simply entering text in the Header:
Headings should be reduced in size as you descend through your organization or form guidelines. Use <h1> for the primary title of any organization or form guidelines. Avoid using an <h1> heading in subsequent areas of your guidelines after they have been initially used. Do not skip heading levels (for example, don’t skip from <h1> to <h3>), as screen reader users may be mistakenly informed that content is missing.
Use the Dropdown Form Field with care. A screen reader will by default read every option in the dropdown form field, creating an interminable list in some instances. When you must use the dropdown form field, advise applicants in the instructions that they may begin to type their answer, which will significantly reduce the number of options.
Advise applicants that the form will auto-save. The auto-save message is not readable for screen readers, so be sure to let applicants know if your instructions that the form will auto-save every few seconds.
Advise applicants how long the form will take to fill out and how many sections there are. This is an accessibility best practice.
Identify Required and Optional fields as such in text. An asterisk is not fully accessible for applicants using a screen reader.