Skip to main content

Posted in

January

2016

Creating Accessible Forms

January 20, 2016 Srinivasu Chakravarthula Leave a Comment Presentations, Web Accessibility , , ,

Overview

This has been presented as 4th Learning Session to the members and guests of W3C Accessibility in India Community Group. Objective of these learning sessions is to raise awareness about accessibility and enhance network of accessibility professionals.

Slides

Below are the slides presented in the session:

Text Transcript

Hello everyone, Thank you for joining us. In this session, we will be talking about Creating Accessible forms. Agenda of this session will be:

Agenda

  1. About Deque and Me
  2. Setting the Context – Forms
  3. Remembering Basics
    1. Associated Labels
    2. Group Level Form Controls
    3. Labels and Instructions
  4. Making Dynamic and Complex Forms accessible
  5. Error handling and prevention
  6. WCAG 2.0 Success Criteria related to forms
  7. Resources
  8. Questions

About Deque

Deque is a global leader in the area of Accessibility serving Government, Corporate and other organizations for 15+ years. Digital Accessibility is both our mission and vision.

About Me

Am an accessibility evangelist with a decade+ of experience. Started my accessibility journey at BarrierBreak, then worked at several organizations including Yahoo!, PayPal, HCL Technologies and currently works at Deque. Accessibility is not just my profession but something very close to my heart. My hobbies include networking, swimming, playing Chess and Carrom. Currently I live in Hyderabad with my wife Hema and our cute daughter Khushi Varshini.

Setting the context – Forms

Today digital forms are playing a key role in people lives. They are everywhere from school admission to avail retirement benefits. It’s encouraging to see even Government is promoting use of digital services. Moving to digital would be an added benefit to people with disabilities and make them less dependent. They are also safe and secure way to store and easy to retrieve.

Basics – Associated Labels

It’s essential that all form controls are programmatically associated with their respective labels. This can be achieved by using <for> and <id> attributes, <aria-label> or <title> attribute.

View Form Label example

References for Associated Labels:

  1. W3C – WAI’s tutorial on Form labels
  2. Technique H44: Using Label elements to associate text labels with form controls
  3. Technique G131: Providing Descriptive Labels

Basics: Group level form controls

When user has to select options that are provided in the form of radio buttons, checkboxes or when there are a group of form controls such as Date of birth, phone number; those controls usually have a common label. In such a situation, it’s essential to ensure that:

  1. All form controls are programmatically associated with their labels
  2. All form controls are programmatically associated with their common label

View Radio button example

References for Group level form controls

  1. Technique H71: Providing a description for groups of form controls using fieldset and legend elements

Basics: Labels and instructions

It’s recommended that forms labels are visible. Now-a-days, placeholder text is used as form label; but this is not a good practice unless there is a mechanism to make label still visible even when user has inserted data into input field. Otherwise, it would be difficult for several users including those with cognitive disabilities to review the information before submitting.

It’s also important to provide instructions about required fields, if input field accepts data only in specific format or any other information that user should know while filling out the form.

Resources for Labels and instructions

  1. Understanding SC 3.3.2: Labels and Instructions

Dealing with Dynamic and Complex Forms

I’m going to demonstrate you all 3 examples:

  1. Creating Accessible Date Picker where the date picker is completely accessible using keyboard and not with mouse alone, all dates have descriptive labels for user to select
  2. Now-a-days, e-Commerce is trending and often the challenge is to deal with Shopping cart. Shopping carts usually gets updated dynamically as user makes selection of a product. So it’s essential that user gets the updated information about pricing, quantity added, total number of products in the cart etc., So let’s look at an Example of Accessible Shopping Cart <aria-live> tribute plays a key role to make such applications accessible.
  3. Another interesting widget would be Character count. We see several applications will have <texture> input field that allows only a limited number of characters can be inserted. In this case, user should be informed about permitted number of characters along with the <label> and alert user when nearing to end of allowed number of characters. It’ would be annoying to to expose character count right from first character. View Example of an Accessible Character Counter

Error handling and prevention

It’s important that there is a mechanism to identify mistakes that user has made on form submission. It’s also important error messages are conveyed via multiple clues including through text and styling input fields that requires correction.

It’s essential to enable users to prefer from making mistakes. To address this, user should be provided helpful information along with form label for potential fields that require user to input in specific format. For instance, Date of birth field accepts in a specific format or in a user registration form, password field may have some conditions. These need to be informed to user.

Resources for Error handling and prevention

  1. Understanding SC 3.3.1: Error identification
  2. Understanding SC 3.3.6 – Error prevention

WCAG 2.0 Success Criteria that are related to Forms

  1. 1.3.1 Info and Relationships: Information, Structure and relationships conveyed through presentation can be programmatically determined or are available in text (Level A)
    1. Associate labels either explicitly or implicitly
    2. Ensure that group related form controls are marked up using <fieldset> and <legend>
  2. 2.4.6 Headings and Labels: To describe topic / purpose (Level AA)
    1. Provide descriptive labels
    2. Provide visible labels
  3. 3.3.2 Labels or instructions: Labels or instructions are provided when content requires user input (Level A)
    1. Identifying required field
    2. Error identification
    3. Providing instructions
  4. 4.1.2 Name, Role and Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Resources

I have put together some great resources including Code Examples from our Deque University, a nice tutorial from W3C, a couple of articles from WebAIM and my good friend Rakesh.

View Resources

Thanks everyone for attending and looking forward to see web more inclusive. Do feel free to reach out to me for any questions / comments.

Accessibility Automation Testing Tool by PayPal

January 9, 2016 Srinivasu Chakravarthula Leave a Comment Accessibility Testing, Web Accessibility , , , ,

Overview

It’s often true that a quality tester or anyone for that matter would look for robust features and possibly have all features at one place. When it comes to identifying automated tool to check for accessibility of a web interface, some of the questions that would come up with are:

  1. Does this tool be able to test as per standards?
  2. Does this tool be able to cover all segments like use of colors, forms, headings, tables etc.,?
  3. Does this tool be able to generate a report?
  4. Can I be able to export results for my own purpose?

One such tools that was recently open sourced by PayPal is Automated Accessibility Testing Tool [External link].

What is AATT?

AATT tests web applications regarding conformance to the Web Content Accessibility Guidelines (WCAG) 2.0. Find a list of the WCAG 2.0 rules checked on the HTML CodeSniffer WCAG Standard Summary page. AATT provides an accessibility API and custom web application for HTML CodeSniffer. Using the AATT web application, you can configure test server configurations inside the firewall, and test individual pages.

AATT includes HTMLCodeSniffer with Express and PhantomJS, which runs on Node.

For example, it can be used to test Java web applications using SeLion automation test frameworks.

For node applications, it can be integrated into NemoJS testing framework to run accessibility testing during automated unit testing.

Features of AATT

  1. There are two tabs in the interface; one is to test by providing a website address and second is to test by writing code into its editor
  2. Tester can choose if to see screenshots or not to see them. Good part is that it shows the screenshot of the element that has a problem
  3. Tester can configure to display errors, warnings and notices
  4. By clicking on “Test Page” button, an alert is displayed as loading and as the process gets completed, results are displayed in a table format that includes:
    1. Error level – this displays whether one is error, warning or notice
    2. Second column displays name of Principal hyperlinking to its documentation on ‘s documentation
    3. Then displays the description of error / warning / notice
    4. Next column displays the code snippet of the element; this would be very useful for developers to identify where the actual problem is
    5. Second last column displays link to technique from WCAG documentation to resolve the problem
    6. And the last column displays “Screenshot (if selected above)
  5. In the results table, first two columns (error type and Principal) are sortable
  6. Ability to export results as CSV file
  7. If web pages are beyond the firewall and require authentication, one can use “Login” feature and provide Web page address, user name and password so that tool will create a cookie and process the testing

Refer to AATT documentation for instructions for download and setup.

Happy testing!

2016 Road ahead…

January 6, 2016 Srinivasu Chakravarthula Leave a Comment Accessibility News, Web Accessibility

In India, 2015 has ended with the launch of Accessible India Campaign by the Ministry of Social Justice and empowerment. This leads to a great beginning of 2016. Accessible India Campaign has 3 core sections to address:

  1. Physical Infrastructure
  2. Transportation System
  3. Information and Communication Technologies

Accessible India has a solid plan and targets and documented on About Accessible India Campaign page. This includes milestones like to make a few most important government offices accessible by July 2016 and several by July 2018. As we write this post, Accessible India Campaign is hiring for two positions:

  1. Accessibility Expert (PDF Document)
  2. Social Media Consultant (PDF document)

If someone wish to be an auditor, Ministry is looking for individual and organizations those who would like to be auditors and details can be found on their notification page (PDF document).

So 2016 would be a remarkable year in terms of building inclusion in India.

Web Content Accessibility Guidelines Working Group (WCAG-WG) of World Wide Web Consortium (W3C) has published WCAG 2.0 Extensions requirements document and there is going to be some incredible work in this area.

There are some vibrant discussions happening on Accessibility in India Community Group; do join and participate.

Assistive Technology Industry Association (ATIA) 2016 is happening from 3rd February – 6th February, 2016. This is a great place to meet most of the assistive technology providers.

Techshare India, one of the biggest bi-annual accessibility conference and assistive technologies exhibition will be happening on March 3rd and 4th, 2016 at India Habitat Centre, New Delhi. There are going to be several interesting presentations and exhibition stall and moreover, this would be a big event in India to network with accessibility enthusiasts from diverse sectors.

31st Annual International Technologies and Persons with Disabilities Conference will be held between 21st to 26th March, 2016 at Manchester Grand Hyatt, San Diego. This is one of the largest accessibility events around the world.

This year Global Accessibility Awareness Day will be marked on May 19th. This will be great opportunity for anyone who has passion for accessibility to raise awareness and spread the word.

More to follow but looking forward to a great 2016.

More to follow

Tribute to Louis Braille on his birthday

January 4, 2016 Srinivasu Chakravarthula Leave a Comment General

January 4th is birth anniversary of Louis Braille. Louis was born in the year 1809.

Blinded in both eyes as a result of a childhood accident. But he has accepted his disability and adopted the the life with blindness. That attitude not only gave him a successful life but also became inspiration to the society. Perhaps, Braile happens to be the first ever accessible medium to enable people with vision impairment to read and write and Braille is only script that enable people who are deaf and blind to read write.

It’s true that today there are many technologies such as screen reading software to help visually impaired to get education and of course everyone should adopt to current technologies. That said, still it is recommended that Braille is taught to school children and encourage them to read a lot of books. As sighted people can learn to spell only when they see and read, it’s true that Braille is the only format that would help people with blindness to see and read through touch. Of course, assistive technologies do provide options for people to read by character but often children do not concentrate doing so; but with Braille, same will happen automatically.

So to conclude Braille and modern technologies are equally important and let’s pay a tribute to Louis Braille on his birth anniversary. Thanks to everyone who are celebrating this day across the world.