Sigma-Labs-XYZ/Explain-AI

Accessibility Report

DomVinyard opened this issue · 5 comments

DomVinyard commented

As a user of our React web app, I want to be able to access and use all of its features, regardless of my abilities or disabilities. To ensure that our app is accessible to all users, we need to conduct a full accessibility review, including a Lighthouse audit, to identify any potential issues and prioritize improvements.

Tasks:

  • Conduct a full accessibility review of the React web app, using tools such as the WAVE Web Accessibility Evaluation Tool, Axe, and manual testing.
  • Document any accessibility issues identified in a detailed report, including severity ratings and recommendations for how to address each issue.
  • Run a Lighthouse audit on the app to identify any additional accessibility issues and document the results in the accessibility report.
  • Prioritize the accessibility issues based on severity and impact on users.
  • Create a plan for addressing the identified accessibility issues, including specific tasks, timelines, and responsible team members.

Acceptance Criteria:

  • A detailed accessibility report, including Lighthouse results, has been created and shared with the development team.
  • The accessibility report prioritizes identified issues based on severity and impact on users.
  • A plan for addressing the identified accessibility issues has been created and shared with the development team.
chatcody commented

[edit]

swdilip commented

Lighthouse Audit - Performance

Lighthouse results for Explain AI

Image

Performance Improvements

Lighthouse audit did provide a list of improvements which can be made to improve the performance of the website which are:

Image

  • Using appropriately sized images (mainly in the RelationCard component): Since the app is just fetching the images and displaying them, a situation can arise in which an image with a very high resolution is displayed in a small div in the RelationCard. Thus the rendered image, the one which user sees, is much smaller than the actual resolution of the image. Thus, this results in a wastage of data for users where they are downloading images with much higher resolutions than is necessary
  • To fix the issue identified above, an ‘Image content delivery network’ (CDN) can be used. These services essentially transform the image to be the actual size and resolution that a user is likely to see them in thus saving data due to not downloading unnecessarily large/ high resolution images
  • Another improvement suggested was to use ‘next-gen’ image formats such as ‘webp’. This can be accomplished by convert ‘.png’ or ‘.jpeg’ images to ‘.webp’ format before serving them to the user. This can be done using an npm package such as ‘Imagemin WebP plugin’. Since webP images have smaller file sizes than their ‘jpeg’ and ‘png’ counterparts, it results in faster load times for users

Links

https://web.dev/image-cdns/

https://web.dev/serve-images-webp/

yuna-iwata commented

WAVE Web Accessibility Evaluation Tool

No Errors, However there are 5 Alerts:

Screenshot 2023-03-14 at 14 39 06 Screenshot 2023-03-14 at 14 40 18

Alerts

  • Select missing label - < select /> elements must provide descriptive text about their function. Ensure that the default option of the select menu presents the purpose of the select menu. If visible label text is present, it is best to associate this text to the select menu.

  • A < noscript /> element is present - Because nearly all users (including users of screen readers and other assistive technologies) have JavaScript enabled, < noscript > cannot be used to provide an accessible version of inaccessible scripted content. To fix this, ensure that scripted content is accessible. The content will be presented to very few users, but must be accessible if used.

  • 3x Justified Text - Large blocks of justified text can negatively impact readability due to varying word/letter spacing and 'rivers of white' that flow through the text. To fix, remove the full justification from the text. (A < p >, < div >, or < td > element has more than 500 characters and is styled with text-align:justify.)