GRANT'S I400 PROJECT WEBPAGE
PROJECT 1: WEB ACCESSIBILITY EVALUATION
Hello, and welcome to my website. My name is Grant Wolfla and today you'll be exploring my most recent project from my I400 class. This project was completed in the Spring of 2018, and I will refer to it as my Project 1: Web Accessibility Evaluation.  Keep reading on to find out more information.
ABOUT MY PROJECT 1
The assignment itself was given to me in my I400 class a month ago. I selected a website, Indy.Gov to evaluate for any errors and followed a list of tasks according to Web Content Accessibility Guidelines(WCAG). The purpose of this project was to become familiar with evaluating websites using evaluation tools, while also providing constructive feedback and tips on how to correct errors on the web page discovered by these various tools. This project, and the process as a whole, has helped me to become more understanding and experienced with accessibility guidelines and may assist me in my future career. I am glad you have visited my site; If you have any questions or need clarification on my evaluation please email me: gwolfla@umail.iu.edu thank you.
This report describes the conformance of the http://www.indy.gov/Pages/Home.aspx website with W3C's Web Content Accessibility Guidelines (WCAG). The review process is described in Section 5 below and is based on evaluation described in Accessibility Evaluation Resources.
Based on this evaluation, the http://www.indy.gov/Pages/Home.aspx website does not meet WCAG 2.0, Conformance Level A standards. Detailed review results are available in Section 6 below. Resources for follow-up study are listed in Section 7 below. Feedback on this evaluation is welcome.
MY PROJECT, STEP BY STEP
Background With Regards To Evaluation
Conformance evaluation of web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by an experiences reviewer. The evaluation results in this report are based on evaluation conducted on the following date: 2/9/2018. This website may have changed since that time.
Website Reviewed: Indy.Gov
The purpose of the website(Indy.Gov) in my opionion is to provide online information to assist those in Indianapolis depending on their needs. It’s like an information hub for all things related to Indy as well as other assistance, like ways to help you out personally i.e. how to report a pot hole, or what to do for voter registration. The list goes on.
Review conducted 2/9/2018
Natural language(s) of website: English
http://www.indy.gov/Pages/Home.aspx
URL's included in review:
Main home page for indy.gov: http://www.indy.gov/Pages/Home.aspx
Animal Services link that I mention later on: http://www.indy.gov/eGov/City/dps/accd/Pages/home.aspx
THE REVIEW PROCESS
Reviewer
Grant Wolfla
IUPUI
[Reviewer(s) areas of expertise, by reference to "expertise of review teams" in Using Combined Expertise to Evaluate Web Accessibility] HCI and IT experience.
Natural language(s) Fluent: English / Familiar with Spanish
​
WCAG 2.0 Level for conformance tested WCAG 2.0 Level A
Identify evaluation and validation tools used: http://wave.webaim.org/
RESULTS AND RECOMMENDED ACTIONS
Interpretative Summary of Review Results
This website appears to not meet WCAG 2.0 A
Accessibility features in which this site is strong include: most of the colors used meet the standard and are easy to read except for one color contrast exception I will talk about (Red text on white background) (see on home page). The reading and navigation code order is logical. Semantic Markup is used to make headings. Color is not used solely to show content. The website is keyboard accessible (Guideline 2.1). There’s no flashing content on the page. The main page is titled. The web page operates predictably (Guideline 3.2)
Recommended priorities for addressing inaccessible features of site: I believe the search feature is broken and needs to be reworked. Searching for voter registration gives too many unnecessary links (and not the correct one). Whereas when you search for potholes, it comes right up just fine. There’s a keyword issue that is not working the way it should. One more important note is that if there’s a space in the search it throws off the search altogether. Going back again, so when you search potholes it comes up; however, when you search pot holes it does not retrieve properly.
DESIGN BASED ISSUE
Design-Based: The home page navigation bar and other places it may be displayed has contrast errors. Forty-two very low contrast errors appeared on this page and does not only include the navigation bar. Instead of using red on a white background, use black on a white background for example for the best readability.
​
Webaim returned this information to me when I checked your website:
The way it looks now:
Contrast Ratio: 3.34:1
Normal Text: Sample
AA: Fail
AAA: Fail
Large Text: Sample
AA: Pass
AAA: Fail
The way it should look:
Contrast Ratio: 21:1
Normal Text: Sample
AA: Pass
AAA: Pass
Large Text: Sample
AA: Pass
AAA: Pass
I would keep the background white; however, code for this on your css page should look something like:
Your variable name here {
color: Black;
}
This was evaluated again with http://wave.webaim.org/.
CODE BASED ISSUES
[Detailed results, structured according to WCAG 2.0]
​
Code-based: I used the web tool : https://validator.w3.org/ and entered your web page as so: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.indy.gov%2FPages%2FHome.aspx
​
In order to check guideline 4.1 (Parsing) for indy.gov, and it retrieved a total of 56 errors or warnings that should be looked into.
Thirteen of those errors looked something like this: Error: Bad value /Style Library/2010/css/bootstrap.css for attribute href on element link: Illegal character in path segment: space is not allowed.
From line 85, column 3; to line 85, column 100
" />-->↩ <link rel="stylesheet" media="all" type="text/css" href="/Style Library/2010/css/bootstrap.css" /><link
​
This is one of those thirteen errors (shown above). Somewhere in those 93 columns there’s space in between that needs to be removed.
​
The Second Code Based Issue:
​
Code-Based: In the top right corner I selected Neighborhood services, then selected Animal Care Services from the dropdown.
​
This was evaluated again with http://wave.webaim.org/.
The sliding pictures again, two of these links are repeated i.e. a redundant link is the picture with a cat and a dog on it that sends you to PetHarbor, a website which takes you away from this page (Which I might add is annoying to anyone who doesn’t want to leave this page) Give the user a confirmation to leave or not. Furthermore, anyone using a screen reader or keyboard navigation is going to run into this link twice so if the link says pet harbor twice, delete one of those links. So instead of http://petharbor.com/
just make it :
http://petharbor.com/ for the one image. And don’t use the first image with the dog unless you want to link it elsewhere. If you want users to visit PetHarbor it’s being made difficult to find inadvertently by hiding it behind another image and not being made readily available to the user.
This was evaluated again with http://wave.webaim.org/.
REFERENCES
​
Web Content Accessibility Guidelines (WCAG) Overview
https://www.w3.org/WAI/intro/wcagWeb Content Accessibility Guidelines 2.0
https://www.w3.org/TR/WCAG20/Techniques for WCAG 2.0
https://www.w3.org/TR/WCAG20-TECHS/Accessibility Evaluation Resources
http://www.w3.org/WAI/eval/Web Accessibility Evaluation Tools List
https://www.w3.org/WAI/ER/tools/Using Combined Expertise to Evaluate Web Accessibility
https://www.w3.org/WAI/eval/reviewteamsMain home page for indy.gov: http://www.indy.gov/Pages/Home.aspx
Animal care services link that was mentioned: http://www.indy.gov/eGov/City/dps/accd/Pages/home.aspx
