Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Accessibility for themes - Lighthouse Integration #64

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from

Conversation

pourmand1376
Copy link
Collaborator

@pourmand1376 pourmand1376 commented Feb 10, 2023

@netlify
Copy link

netlify bot commented Feb 10, 2023

Deploy Preview for academic-folio ready!

Name Link
🔨 Latest commit c09af71
🔍 Latest deploy log https://app.netlify.com/sites/academic-folio/deploys/63e64d2df69b1000086e8ac5
😎 Deploy Preview https://deploy-preview-64--academic-folio.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@pourmand1376
Copy link
Collaborator Author

pourmand1376 commented Feb 10, 2023

This is the report from lighthouse.

  • Background and foreground colors do not have a sufficient contrast ratio
    Low-contrast text is difficult or impossible for many users to read. Learn more.

image

  • Buttons do not have an accessible name
    These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.
    image

@pourmand1376 pourmand1376 changed the title Fix Accessibility for Other themes Fix Accessibility for Other themes - Lighthouse Integration Feb 10, 2023
@pourmand1376
Copy link
Collaborator Author

pourmand1376 commented Feb 10, 2023

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).

What are your ideas? @rohandebsarkar

@pourmand1376
Copy link
Collaborator Author

pourmand1376 commented Feb 10, 2023

Also, I added lighthouse integration. To see the results, you should go to Lighthouse CI for Netlify Details > Summary > Artifacts.

we should define our metrics in budget.json like here.

@pourmand1376 pourmand1376 changed the title Fix Accessibility for Other themes - Lighthouse Integration Fix Accessibility for themes - Lighthouse Integration Feb 10, 2023
@pourmand1376
Copy link
Collaborator Author

Also, we are not using our primary color in any way. I think we should add our primary color to links like al-folio. This way it would be more alive.

@rohandebsarkar
Copy link
Owner

I feel we should use different theme colors for light and dark theme. A single color does not look good on both the themes.

@rohandebsarkar
Copy link
Owner

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).

What are your ideas? @rohandebsarkar

I will be open to add background color to codes. But the problem is we would have to add another color variable.

@pourmand1376
Copy link
Collaborator Author

pourmand1376 commented Feb 10, 2023

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).
What are your ideas? @rohandebsarkar

I will be open to add background color to codes. But the problem is we would have to add another color variable.

I think that's okay. I mean, there is no other choice.

@pourmand1376
Copy link
Collaborator Author

I feel we should use different theme colors for light and dark theme. A single color does not look good on both the themes.

I agree. However, I am not an expert in color theory and this stuff. I need to consult a UI designer to help me get good codes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Accessibility score (at LightHouse) Add Lighthouse integration
2 participants