One of the most important things you can do for your website is to ensure that it’s accessible. Non-compliance can be frustrating for your visitors. It can also cost you a lot in lawsuits. WS Form has several tools to help web designers and site owners ensure their forms are accessible. In this article, we’ll look at the WS Form accessibility tools and see what you can do to ensure your forms are always compliant.
WCAG and ARIA
WS Form does a lot of work behind the scenes to make sure your forms are Web Content Accessibility Guideline (WCAG) compliant out of the box. For example, field labels, descriptions, and required fields are WCAG compliant. However, some elements are not WCAG compliant without making some adjustments. For example, HTML fields.
ARIA are tags that you can add to your HTML to tell screen readers where things are and what it’s looking at. ARIA is built into WS Form. Field labels, descriptions, and required fields are tagged with ARIA fields. These tags are switched on or off in HTML based on the field values and requirements.
WS Form handles the ARIA tagging behind the scenes, so you don’t have to worry about handling the tags yourself. However, WS Form does include tools so you can create a custom ARIA label.
Creating Custom ARIA Labels
ARIA labels can be read audibly by screen readers. You’ll need to create a label for each field individually. To create the ARIA label, select the field settings for a field.
This opens the settings for that field in the right sidebar. Scroll down until you see a section called Accessibility.
Enter the text for the label that the screen reader can use. This should be a clear description of the field’s purpose. Use text that makes sense when someone hears it.
Keyboard Navigation
Out of the box, WS Form includes tools that allow users to navigate the form fields with their keyboard. For example, WS Form uses the tab key to move between fields. Hit the Tab key to move to the next field.
Holding the Shift key while hitting Tab moves to the previous field. You can use these keys to move through the form.
Some buttons require a click. This is done by hitting the space bar once the user has tabbed to the button.
Elements that are adjusted from side to side, such as star ratings and range sliders, are adjusted with right and left arrow keys.
Conversational Forms
Conversational forms present the fields one at a time in the center of the screen. They’re a great way to lead the users through the form. They move the current line of fields to the center of the screen and fade out the rest. This helps the user understand which field they’re working with. They include tabs, so users can access every field with the keyboard. They’re full screen, which allows for larger print that’s easier to see and use.
Conversational forms are built into WS Form Pro. To create a Conversational form, go to WS Form > Add New in the WordPress dashboard. Select the Surveys tab and choose the template named Conversational.
Create your form as normal. This form already has the conversational feature enabled.
You can make any form a conversational form. Select the gear in the settings at the top of the editor screen. Choose the tab labeled Conversational. Enable it by checking the first setting.
Users can use shift-tab to move up to the previous field and tab to move to the next field.
Create WS Form Section Labels
It’s easy to add new sections to forms, but these sections will not be labeled by default. The reason for this is you might not want to show the label. This is helpful if you want to reveal a section with conditional logic. In this case, adding labels could cause errors with screen readers.
However, for standard usage, you’ll want to show the label to improve accessibility. Each section is a fieldset. Without a label, testing tools will show an error for a missing legend for the fieldset. You’ll need to enable the label for the new section. Hover over the new section and click the gear icon when it appears.
This opens a new set of section settings in the sidebar. It’s already set to the Basic tab. Enable the first option: Show Label. You can also provide the text for the label in the field above the setting.
Customize Required Fields Label
By default, WS Form uses a red asterisk to show when a field is required. This can easily be changed to text. To customize the required field’s label, click on the settings icon for the form and select the Styling tab. You’ll see a field called Required Fields. This includes an option and a field to add custom HTML. The field provides an example of how the HTML can be used.
Add your code and save the changes.
The required fields will now display your HTML. In my example, I changed the red asterisk to the word Required. It displays in red because I added the wsf-text-danger class.
WS Form Customizer
The WordPress Customizer includes settings for WS Form. You’ll see two sections. One for the regular form and one for the Conversational form.
Both include colors, typography, borders, box shadows, transitions, and advanced settings.
Color contains all the settings for all the form’s colors. The default colors already have high accessibility scores. When you change these colors, you’ll need to ensure that your choices follow accessibility guidelines. This is best done with accessibility tools.
Conversational Customizer Settings
Conversational includes the same settings and adds one more, called Conversational. It only works with Conversational forms.
Conversational settings include the background, navigation background, and navigation foreground colors. Also included are max-width and inactive section opacity settings.
The Conversational color settings are the same as the regular form color settings.
Borders
Changing the border color and width can improve the field’s visibility. I’ve changed the Lighter color to purple and increased the border width in the Borders tab of the Customizer. As with any color changes, it’s best to test it with accessibility tools.
Accessibility Tools
There are several tools online that help ensure your website is accessible. Web Accessibility in Mind has several that work great for testing your website.
WebAIM Contrast Checker
WebAIM Contrast Checker tests the contrast between colors you enter. It provides examples of how your text looks with those colors and gives a score with a pass or fail grade for specific types of text. Enter your background and foreground colors to get your scores. It provides information to improve your contrast. This helps ensure that you’re using high-contrast text and backgrounds. It also checks for the hierarchy of H tags.
WAVE Web Accessibility Evaluation Tool
The WAVE Web Accessibility Evaluation Tool tests your website for WCAG errors. Enter your URL into the field and follow the instructions. They also have a free browser plugin to test accessibility from your browser.
The results show the accessibility issues with the page where you’re running the test. It will also show you what it likes about the page.
The various tabs provide more information. Click through each of the tabs for information and examples. This shows the Details tab. Clicking any of the errors highlights the error on the page. In this case, I have low contrast because of the background I chose.
Ending Thoughts on WS Form Accessibility
That’s our look at WS Form accessibility. Accessibility is important. Companies are being sued for lack of accessibility. WS Form does a lot of that work for you, but every website is different. It’s wise to improve and confirm your site’s accessibility. Test your forms with a screen reader so you’ll hear how your labels sound to those that use them. Choose high contrasting colors. Test your website with accessibility tools.
For more information about WS Form accessibility, see the Accessibility and Web Forms documentation in the WS Form Knowledge Base.
We want to hear from you. Do you use WS Form’s accessibility tools? Let us know about it in the comments.
