Accessible Form Project

For the accessible form project, I created a Google Form. Below outlines my design process for creating this form.

To begin, I included descriptive instructions at the top to provide guidance on how to complete this form and detailed instructions for each question. I also included examples to mitigate any confusion on how to complete each question.

I made two questions, full name and mailing address, required for the user to complete in order to ensure this information was captured. These required questions were labeled by Google Forms but also noted in the question instructions. This functioned as a validating input, notifying the user that they needed to complete these questions before submitting.

I increased the font sizes for easier view. The header/title was increased to size 24, questions were increased to size 18, and the response options were increased to a maximum of 12.

I chose a darker background and white foreground to ensure enough contrast. The colors I used were black (#000000) and green (#BAC7C4). I checked the contrast levels using webaim.org and was given a contrast ratio of 12.05: 1, passing all areas of contrast.

To reduce anxiety in using the form, I adjusted the settings so that responses could be edited after submitting, I removed the restriction that required a sign-in or password, and I allowed unlimited responses. I added a progress bar to help users see their status in the form and allowed users to view a summary of results. Finally, I added a confirmation email so that users knew their submission was successful.

For accessibility testing, I used a screen magnifier and zoomed in to 400%. The form was still easy to navigate but felt long and required a lot of scrolling. To assist with navigation, I split the form into two sections so that users did not have to scroll as far and instead completed two shorter pages. This also helped with grouping similar questions together. Related form controls were grouped together as well for easier identification.

I then tested with the Microsoft Screen Reader. It worked well but some of the sentences ran together when read by the screen reader. To fix this, I added periods at the end of each sentence, specifically the examples, to make the questions easier to understand. To help users know where they were in the form, I updated instructions and added that there are a total of 9 questions in this form I also added question labels to identify if the question was 1, 2, 3, 4, etc. 

Finally, I turned on Google Chrome accessibility settings. In using Show a quick highly on the focused object, I was able to highlight text boxes and radio buttons by using a mouse, arrow buttons, and tab key. I was able to select options by using just the tab and enter keys. With this tool, I did not see any other edits that needed to be made to the form.