We fill a lot of forms on the web on daily basis – may it be for a bank transaction, booking of travel, shopping etc. Often we see forms looks very beautiful but in reality, most of them are not beautiful due to lack of associated labels. Oh! wait, we know, you are about to shown on us and say that you have never seen a form just with input elements and without text labels, you are right, but did you ever see a form with a text browser or with a screen reader. Here is an exercise for you before reading this article:
- Download NVDA Screen reader and install on your Microsoft Windows machine
- Open your web browser perhaps Mozilla Firefox and visit the APSRTC‘s New Registration Form and you should see a beautiful form like below.
- Press “F” key on your keyboard to reach to the first form field and then navigate the form using “tab” key; ideally you should hear something like “Username:edit, Password: password edit, Confirm password: password edit, Personal information, Firstname:edit” and so on. But you will hear something like “Table with 16 rows and 2 columns, row two, column two edit” and so on… and here is how this form looks on a text browser:
Now, let’s see what are the issues with above form. Firstly, screen reader is reading number of rows and columns, since the APSRT did not use CSS to control the layout of the form but have used
attributes to control the layout. Well, screen readers has the capability to turn off reading the layout tables but some users may not be aware of this option. Also, it is not recommended to use the table attributes to control the layout.
Second problem is that screen reader is unable to read the labels of the form since associated label “for” and “id” attributes are missing. Besides screen readers and text browsers, even search engines treat those form fields with no labels. Here are some ground rules to make accessible forms.
- Provide necessary instructions before the form states
- Do not indicate mandatory fields in form of color alone
- If a form field is a required field, inform the same to the user along with form label
- Provide associate labels to the form fields
- Use appropriate “fieldset” and “legend” attributes for check boxes and radio buttons
- If you opt to use image button, remember to provide alternate text
- If the form is dynamic, use ARIA labels, roles and states as appropriate
Often we hear people asking how can they check for a website for accessibility and what needs to be checked. Here is a quick checklist and hope this would be handy to someone!
- Is the link “Skip to main content” exist? Although, there are several other ways to achieve quick navigation by providing heading mark-up, aria land marks, it’s still easier to hit on one link to reach the main content.
- Does the website provides any accessibility options, such as “Color options” “Font re-size option” etc? This would be good, if your target audience have learning difficulties or new to internet users, else, a help page with an article how one could use the existing accessibility options within the browsers would be helpful.
- Does all the informative images have appropriate alternate text?
- Does decorative images has given empty alt text i.e. alt=”"?
- Does the web page has appropriate heading structure?
- Does the website has a site map?
- Is acronyms provided with appropriate information?
- Does all the form fields have associated labels?
- Does the website uses Frames, if so, appropriate titles provided to frames?
- Is all the functionality of the web page available via keyboard?
- Does all the links have descriptive screen text?
- If an audio content is present, is there a synchronized captions or a text transcript available?
- If CAPTCHA is present, is it accessible to screen reader users and to Braille Display users? if not, is there an alternative method provided such as Audio CAPTCHA or logical questions based captcha
- Is semantic mark-up is used to designate headings and lists
- Are Table columns and rows have associated headers using “th” tags?
- Does tables have descriptive table summary and caption?
- Is structure of the web page is logical and meaningful?
- Color alone is not used to convey the information
- Is foreground and background color has enough contrast?
- Is there a pause / stop functionality for moving, blinking or scrolling content?
- The content and functionality should not have time limits, if necessary, user should be allowed to extend the time as per their choice. If the authentication expires, user should be able to re-authenticate and continue the activity without losing any data
- Page has appropriate and descriptive page title
- The language of the web page is identified using the HTML tag “lang” attribute
Often, we look for accessibility pages of different organizations to know accessibility features of their respective products and services. Not always, it’s easy to invest time to search on internet. So I thought, let me start off listing accessibility links of different companies across the globe.
Disclaimer: Links on this post are verified on the date of this post. We are not responsible if the links get broken at a later date. If you notice the same, we appreciate, if you send us a note and alert us to update on the post.