clean-and-green-philly icon indicating copy to clipboard operation
clean-and-green-philly copied to clipboard
Published 2 months ago • verified publisher icon CodeForPhilly

Task: Audit performance of Accessibility Conformance Report (VPAT) page

Open CodeWritingCow opened this issue 1 year ago • 5 comments

Describe the task

Audit performance of Clean and Green Philly's Accessibility Conformance Report (VPAT) page using Google Lighthouse. Document audit results, including areas of improvement.

Acceptance Criteria

  • [ ] Generate Lighthouse report for mobile devices
  • [ ] Generate Lighthouse report for desktop devices
  • [ ] Post screenshots of results in this issue's comments section
  • [ ] Write brief summary of audit highlights, including Lighthouse's recommendations for improvement

Additional context

  • For instructions on using Lighthouse, see https://developer.chrome.com/docs/lighthouse/overview

CodeWritingCow avatar Jul 09 '24 03:07 CodeWritingCow

Hi, can I be assigned this ticket pls?

zheyichn avatar Jul 29 '24 14:07 zheyichn

@zheyichn assigned!

CodeWritingCow avatar Jul 30 '24 01:07 CodeWritingCow

Lighthouse report for mobile devices

  • Performance score was 69/100. It took a big hit due to largest contentful paint time of 7.1 seconds, and a total blocking time of 340ms.

Screenshots

vapt-mobile-1 vpat-mobile-2 vpat-mobile-3 vpat-mobile-4 vpat-mobile-5 vpat-mobile-6 vpat-mobile-7

zheyichn avatar Jul 31 '24 17:07 zheyichn

Lighthouse report for desktop devices

  • All four scores were above 90/100.
  • Accessibility can be further improved by increasing contrast ratio for some table titles.

Screenshots

vpat-desktop-8 vpat-desktop-9 vpat-desktop-10 vpat-desktop-11 vpat-desktop-12 vpat-desktop-13 vpat-desktop-14

zheyichn avatar Jul 31 '24 17:07 zheyichn

Summary

  • Performance score took big hit on mobile devices because of largest contentful paint time of 7.1 seconds, and a total blocking time of 340ms.
  • Some less unurgent issues for performance are similar to other pages:
    • Accessibility points deducted from misue of aria-* attribute on elements. This issue has been reported in #727 previously, but currently wontfix since it came from NextUI.
    • SEO requires links to be crawlable.

Improvement recommendations

  1. Explore how to reduce content loading time/ blocking time. (Performance on mobile)
  2. Increase contrast ratio for some table headers. (Accessibility)
  3. Resolve the aria-* mismatch with role issue of the menu button, possibily by refactoring the menu component as discussed in https://github.com/CodeForPhilly/clean-and-green-philly/issues/727. (Accessibility)
  4. Make links crawlable to search engines. (SEO)

zheyichn avatar Jul 31 '24 17:07 zheyichn