Don’t Pull Your Hair Searching for Code Examples – ARIA and Form Fields
By Rosemary Musachio, Chief Accessibility Officer, Ruh Global Communications
If you are like me, searching for good code examples when you try to find solutions to accessibility issues can make you pull out your hair. You Google it and you get tons of results. When you finally find something, you go to the site to realize it’s only a forum unanswered question. Your excitement peaks again when you find a blog post that discusses the solution you’ve sought, but it doesn’t show the specific code example. Conversely, the blog post may have the code example without showing the actual component.
To prevent you from going bald, I’d like to share a complied list of websites each month that offer good code examples and the finished products. This month’s list is categorized into ARIA and Form Fields.
ARIA
Ajax Accessibility Examples – A great site for ARIA examples. It has a summary table of code examples and their associated roles, properties, and states. When you go to an example page, it has the actual component, a list of ARIA elements that are used, and the code example. Besides the summary table, you can search for examples by the three ARIA categories mentioned above.
W3C’s Role Model – The site explains everything you wanted to know about ARIA Roles and more. It describes each role in depth, including listing all the properties that are compatible with it. Even though the site offers code examples, it should provide them for every role-property combination. However, it is a must for anyone who wants to learn about ARIA.
Illinois Center for Information Technology and Web Accessibility ARIA Examples – The website has a table for concise searches concerning ARIA form control properties. When you click a link in the table, you see the form control that uses ARIA and the code in HTML and CSS.
ARIA Landmarks in (X)HTML – The webpage describes ARIA landmarks and how to implement them. The descriptions are straightforward. Since the page itself uses landmarks, you can view the code to it.
Form Fields
Accessible Web Form – The page screams simplicity. It is so easy to follow. It shows a form with various types of fields, including field groups (i.e. fieldset). After the form, it shows the code for it. That’s it.
Jim Thatcher’s Accessible Forms – What’s a list of accessible form examples without the father of web accessibility, Jim Thatcher? He explains accessible forms as clear as the mountain air. He presents form elements, including edit fields in a table, and the codes.
Webaim’s Creating Accessible Forms – The webpage offers an organized description of each type of form field, visual examples, and codes. It also describes different types of labeling, such as title attributes and aria-label.
Web Accessibility Tutorials – Form Concepts – The page offers links to different aspects of accessible forms, from firm labeling to custom controls. When you click each link, it shows visual examples and code snippets. W3C did a good job of making these pages concise, a pleasant turn from the norm.
Do you know other sites of great ARIA and Form Field examples? If so, put them in comments for this post. This is a great way to help each other out in making the Web more accessible.
Learn more about our work at www.RuhGlobal.com or follow us on Social Media @rosemusachio, @debraruh and @ruhglobal on most channels.
#AXSChat: Join Debra Ruh, Neil Milliken, and Antonio Santos for a weekly Twitter Chat on Disability Inclusion, ICT Accessibility, Built Environment, CRPD, Empowerment and Employment. Just search the hashtag #AXSChat at 3pmEST and join the conversation. You can learn more about AXSChat at www.AXSChat.com.