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

Minor accessibility improvements #46

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Conversation

Badatos
Copy link

@Badatos Badatos commented Jan 28, 2022

Hello !
There was some accessibility issues in your website, even when "contrasted colors" was active. this PR will correct it.

detailed changes :

  • better color contrasts for links when "contrasted colors" is activated
  • add some titles on links containing only an icon
  • add some alt on img
  • add some aria- attributes on mobile toggle button

nb : I invite you to install WAVE Browser Extensions https://wave.webaim.org/extension to test in one click you're website accessibility.

Have a nice day ! ;)

* better color contrasts for links when "contrasted colors is activated)
* add some titles on links containing only an icon
* add some alt on img
* add some aria- attributes on mobile toggle button
delete lock file wrongly introduced in previous commit
@@ -48,6 +48,13 @@ $accessible-gray-column-color: $gray-column-color;
background-color: $accessible-neutral-color;
}

.accessible-colors .navbar-default .navbar-nav>li>a{
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The contrast can be enhanced for the non-accessible colors too: suggesting to move this to main.css, without .accessible-colors selector. The color can be more contrasted too, e.g. #“666.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree: I thought that maybe you would not accept to change the main colors, but indeed it will be better that way!

color: #707070; /* Grey */
}

.accessible-colors{
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of difficulty, as default accent color (#f98012) is a brand color. Anyway, a step in a good direction.

Copy link
Owner

@martignoni martignoni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please make the suggested change for the navbar default color?

@martignoni
Copy link
Owner

martignoni commented Jan 28, 2022

nb : I invite you to install WAVE Browser Extensions https://wave.webaim.org/extension to test in one click you're website accessibility.

Very good tip! Thank you.

+ gitignore hugo_build.lock
@Badatos
Copy link
Author

Badatos commented Jan 31, 2022

Requested change done.

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.

2 participants