Capital Area Housing Partnership

RESEARCH METHODS

• The website was run through the W3 Markup Validation Service, which checks the markup validity of web documents in various frontend languages. The tool resulted in multiple HTML issues such as parsing errors, incomplete property errors, stray end links, whitespace errors, invalid color syntax, and more. This can cause errors in rendering and during the usage of accessibility devices. 

• The Capital Area Housing Partnership website received a score of 75 on the Accessibility Test. In the Interaction and Navigation Test, the links failed to provide recognizable text. This impacts users who are deaf or have other disabilities and does not comply with WCAG Level A. In the Visual and Structural Accessibility Test, there were problems with the semantic ordering of headings. This creates a barrier for users with assistive technology. Screen reader and Assistive Technology testing passed to ensure accessibility support.

• A specific page of the website was run through the WAVE tool (Web Accessibility Evaluation Tool), which is a service that contains a combination of evaluation tool to determine if the web content is accessible to individuals with disabilities. We specifically ran the Donation Page through the WAVE tool and ran into multiple errors and warnings. These include HTML errors, font size errors, color contrast errors, structural element errors, and more. This could affect the four principles of design (perceivable, operable, understandable, and robust) in addition to posing problems for assistive technologies.

MAIN FINDINGS AND RECOMMENDATIONS

By taking our research methods into account, we highlighted three main issues and three main solutions. 

Our first issue 

• Accessibility Issue

• The website is failing visual and structural accessibility tests, more specifically having the proper hierarchical order in headings (from <h1> to <h6>)

Our first solution

Start with a level 1 heading in HTML for the main title. Then follow the correct hierarchical order such as level 2, 3, and so on. 

Our second issue

• Accessibility Issue in terms of HTML 

• The website contains various HTML Issues which could lead to difficulty for users using screen readers or users relying on other assistive technologies. It could also lead to errors in rendering of the website. 

• Two specific HTML issues are the parsing errors and missing required attributes. 

Our second solution

Follow proper CSS syntax in terms of selectors and complete animation property. Additionally, complete missing attributes for element img. 

Our third issue

• The donation website contains multiple errors as demonstrated by the third research method (WAVE tool). There were multiple color contrast errors specifically in the navigation bar specifically. Moreover, the Donate Page contained too much information, misplacement of easy to find buttons, and incoherent routing for payment methods. These problems combined result in a variety of issues in regards to the accessibility of the website.

  

  
  

• Our third solution

  We specifically chose to redesign the Donate Page for a more easily accessible and intuitive user interface. We kept Cathy Johnson as a our proto-persona in mind when we created our solution. 

  

  
  

  MOCKUPS

  
  

  Our user interface mockups were designed on the application Figma. We designed user interface mockups for the navigation bars and the Donate Page. For the 

  
  

  • One of our solutions was to fix the color contrast of the navigation bar. Additionally, we changed the color of the button once a user hovers over one of the pages. Lastly, an alternate drop down bar appears for easy access to various donation options based on the user’s choice. It reduces the amount of unnecessary information a user may have to scroll through.

    
    

    

    
    

  • The Learn More Page provides additional information in regards to donating to the Capital Area Housing Partnership.

  

  • On the Learn More Page, users are able to route to the ‘Donate Online’ and ‘Donate by Mail’ tabs easily.

  

  • Our solution includes an embedded donation page that is easily accessible by users. There are two options: one-time and monthly. In the one-time payment option, there are multiple different amounts that users can pay only once. Users also have the option to choose their custom amount and pay using PayPal, bank, or card. Users are then asked to input their name, email, phone number, and a message. Two options are presented: send or cancel. A checkbox to receive emails is included. Lastly, a privacy statement is included to ensure the privacy of the users. 

• In the monthly payment option, there are multiple different amounts that users can pay on a monthly basis. Users are asked to input the same information and indicate the payment method as well.

• After the user has made a donation, an appreciation page displays where the user is expressed gratitude and acknowledged for the donation. The user then has the option to return back to the Home Page or make another donation. 

• 

  • Within the Donate Page tabs, users also have the option to mail donations. Users are able to easily locate the mailing address through the ‘Donate by Mail’ tab. An option is presented additionally to return back to the Home Page. 

  

  
  

  CONCLUSION

  
  

  We heavily researched methods to improve the accessibility and user experience of the Capital Area Housing Partnership Website. The research methods included the W3 Markup Validation Service, the Audit Accessibility Checker, and the WAVE tool. We specifically analyzed the navigation bar/header and the Donate Page. 

  
  

  We recommended multiple potential solutions and presented mockups of the website to address the client’s needs. Overall, we believe that if our changes were put into consideration the website for our client will improve the accessibility and user experience of the website. 

REFERENCES

Markup validation service. The W3C Markup Validation Service. (n.d.-a). https://validator.w3.org/#validate_by_uri+with_options 

Audit. Accessibility Checker. (2024, November 29). https://www.accessibilitychecker.org/audit/?website=https%3A%2F%2Fwww.capitalareahousing.org&flag=us 

Wave report. WAVE Web Accessibility Evaluation Tool. (n.d.). https://wave.webaim.org/report#/https://www.capitalareahousing.org/donate