Published on <a href="https://blog.prototypr.io/designing-accessible-forms-82f2ea11697f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Pri Hossain <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cHPNbznDOhl_BuDRkIw0BQ.png">
At Sabre,there is a small team of designers that strive to learn the best practices of Accessibility under the guidance of our guru Seda Maurer. We learn best practices from research, Knowability and SSBart, and share our knowledge with our community.
<blockquote>“Accessible design helps everyone.”</blockquote>
At times, accessibility is often mistaken for usability. A usable product may not be accessible and an accessible product may not be usable.
For example, you can have a perfectly usable site, but neglect correct functions and tags for a screen reader to pickup. Your site may be accessible, but may require long scrolling and having too many links and content which reduces usability. Hence, a product or site should find that sweet spot to be both usable and accessible.
Designing for accessibility is beneficial for everyone, not just those with physical or cognitive impairments. For example, ramps were created for entrances to be wheelchair accessible. Those ramps are also convenient for the needs of people with bicycles, strollers and pets.
If we design with accessibility in mind from the start, we’re ultimately helping everyone that encounters our product or site in the future.
<img alt="" src="https://cdn-images-1.medium.com/max/670/1*J8D9iTzPw-KWsxAokQ18Lg.png">Why design accessible forms?
<h4>Why design accessible forms? Why should I care?</h4>
People with cognitive disabilities can better understand the form and how to complete it. Making accessible forms improves the layout structure, instructions, and feedback.
People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they have to complete.
People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.
<h4>So, let’s design some accessible forms</h4>
In a perfect world, all of our forms should ideally be logical, labeled correctly and consistent (LLC).
However, web forms can be very challenging… especially when they’re visually and cognitively complex to use. In this article, we’ll focus on some basic principles of highly accessible forms in terms of:
<ol>
<li>Layout</li>
<li>Radio buttons/Checkboxes</li>
<li>Select menus</li>
<li>Error messages</li>
<li>Identifying required form fields</li>
</ol>
The main aspect we should remember is that forms should be logical, labeled correctly and consistent (LLC).
These recommendations are accumulated through research from the Access Board’s Section 508 Standards and the <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessbility Guideline</a> (WAG 2.0). I’ll also include other resources towards the end of this article.
Now, I’m not saying these are the only way to make forms accessible. Many of you reading this article may already be following most of these recommended practices. If so, more power to you! 🙂
­­­­­
<blockquote>Note: I focused more on the design aspect rather than the code. There may be another series where I collaborate with a developer to provide deeper accessible code best practices.</blockquote>
<h3>1. Layout</h3>
<h4>Consistency is key</h4>
Organization is very important!
First, make sure your material is well organized in a meaningful order on the page. For those that have visual difficulty, screen readers play an important role. Then, make sure the code reads the content to match the structure of the streamlined design.
<h4>Highlight urgent or key information</h4>
The use of color and highlighting can be used to aid in selective perception. Don’t rely on color alone, but use it in conjunction with other principles such as icons to emphasize important information.
<h4>Don’t use mouse over menus</h4>
Try to stray away from menus, or text that appear and disappear when the mouse hovers over it. The average human brain won’t cognitively notice the differences quick enough. It’s best to avoid it if at all possible.
<h4>Use high contrast between text and background</h4>
The WCAG 2.0 recommends having a contrast ratio of 4.5 to 1 in terms of text and images of text.
· Large Text: Text larger than 24 pixels or 19px bold should have a contrast ratio of 3 to 1.
· Incidental: No contrast requirement for images or text that are part of an image for decoration, hidden or part of an inactive user interface component. (<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#user-interface-componentdef">refer to WCAG’s contrast rules</a> on the topic)
· Logos: Text that is part of a logo or brand name has no minimum contrast requirement.
Contrast Ratio Tools There are many tools and plugins available to make sure you meet contrast requirements. My two personal favorites are:
<a href="http://webaim.org/resources/contrastchecker/">WebAim</a>: A site you can go to and enter your values. WebAim lets you know if you passed WCAG AA and WCAG AAA. (Triple AAA means your site has the highest form of compliance. Depending on your products’ regulation, AA passing suffices for most situation).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tPo8tJYl-lyKvOokPsB1OA.png">WebAim
Tota11y: A neat Google plug-in good for catching contrast issues and important accessibility violations in your designs.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RKtlnw4dss6-aED1xQCJ8A.png">Tota11y
<h4>Reduce Clutter</h4>
Minimizing clutter and extra material can improve usability &amp; accessibility for those with visual and cognitive disabilities.
<h4>Segment</h4>
Segmenting is your friend, grouping and headings are essential for with easier readability.
<img alt="" src="https://cdn-images-1.medium.com/max/672/1*utLu63ZcPe96_560CbQLkA.png"><img alt="" src="https://cdn-images-1.medium.com/max/818/1*uzZTDKQo6pTKE4p1qrNJiw.png">Group away!
<h4>Allow for review</h4>
Give users an opportunity to review their information before submission. Make sure to put an appropriate label on the button to give the user control. It allows the user to take control and complete the task. Giving a clear call to action also helps those that fall under the autistic spectrum.
<h3>2. Radio Buttons/ Checkboxes</h3>
Avoid using radio buttons if possible, as they are not supported by all browsers and screens. However, if you do need to use them, make sure to properly label them with the “label for” tag.
Radio buttons are typically used in sets and share the same name attribute value. This implies some differences in their treatment by browsers. You can get together with your developer to identify particular browsers that are best suited for radio buttons.
<img alt="" src="https://cdn-images-1.medium.com/max/296/1*3POe12vCJZQBg9_hs4-Viw.png"><img alt="" src="https://cdn-images-1.medium.com/max/530/1*5qHOniABLdxcvCYqzP5E5w.png">Radio buttons and checkboxes
<h3>3. Select Menus</h3>
<h4>Define Purpose</h4>
It’s very important to connect the label to the input with context. For example, the ‘Select a file’ function on a web page ideally connects to the input values of particular file types.
Many screen readers and browsers fail to connect their labels with the menu, making these options unknown to some users.
<img alt="" src="https://cdn-images-1.medium.com/max/990/1*_ovDL1ZOAeg3VTUuGQHgYA.png">
Many screen readers and browsers fail to connect the label with the menu, so users may not know of the label.
<h3>4. Error Message</h3>
<h4>Content, keep it simple</h4>
A user should ideally know what’s happened, what went wrong and be given a solution to fix it.
 Error messaging should be clear and easy to understand. Try to speak in a simple language. There’s no need for fancy jargon or exposing unfamiliar nomenclature.
When giving solutions to fix errors, a common best practice is to link errors with solutions, reducing the workload for the user.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lz-2OkaR2f8Zd3-vbGKjow.png"><img alt="" src="https://cdn-images-1.medium.com/max/796/1*zTtDF51-Xc_XsAokU9i7_w.png">
<h4>Placement of error message</h4>
When placing an error message, top of the page or in a pop up is generally recommended, depending on the users’ form factor (mobile, tablet, or desktop). Since some users suppress pop-up or ‘toaster’ notifications, top of page error messaging is preferred.
Feel free to wipe this part out of it doesn’t apply. This particular part seemed to need some additional content, so I put in some filler from my own experience that seemed related.
<h3>5. Required form fields</h3>
Required form fields can be indicated in a variety of ways, but the method used must be perceivable with various senses. Therefore, don’t rely on color alone. Utilize size, position, images and distance to compliment colors in the fields that must be completed.
Recommended ways of identifying required fields:
· At the beginning of the form, clearly state that some form fields are required.
· Make sure to provide a key to how the required fields can be recognized. The key to identifying required fields should not be at the end of the form.
· Identify the required field with words or a symbol that can be programmed to associate with the field. The asterisk (*) is the most familiar.
<img alt="" src="https://cdn-images-1.medium.com/max/860/1*ZKt-XQpNxveeBWacfp5EEg.png"><img alt="" src="https://cdn-images-1.medium.com/max/710/1*U-JdEn3Am_pLFEBiO-Ah3A.png">
<h3>Every little bit helps!</h3>
By following these simple best practices, you’ll likely increase the accessibility of your own products. You’ll also become a better designer, a valuable asset to your client or employer, and the unsung hero of countless others who rely on highly usable AND accessible forms.
Ultimately, you affect everyone in a positive way when you are accessible!
We’re merely touched the top of the accessibility iceberg with this article. Look forward to a continuation of more content in terms of accessibility recommendations in the coming months.
<h3>Video for more insight</h3>
I shared this video during a recent accessibility presentation to introduce a more empathetic view of our audience.
This video showcases how important accessibility is and why as designers and developers we should be empathetic when we make our products and site.
Finally, this video presentation showcases why certain accessibility struggles and situations are still relevant today.
<a href="https://www.youtube.com/watch?v=Zz8gXfluwBs&amp;feature=youtu.be">Working Together: People with Disabilities and Computer Technology</a>
Extra Resources
<ul>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#user-interface-componentdef">Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0</a></li>
<li><a href="http://ncdae.org/resources/articles/cognitive/">Cognitive Disabilities and the Web: Where Accessibility and Usability Meet</a></li>
<li><a href="https://www.w3.org/WAI/intro/wcag">WCAG Overview ◦ Web Accessibility Initiative ◦ W3C</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=82f2ea11697f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/designing-accessible-forms-82f2ea11697f">Designing Accessible Forms</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing Accessible Forms

Top Stories