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

Accessibility issues #10

Open
cadars opened this issue Jan 20, 2021 · 2 comments
Open

Accessibility issues #10

cadars opened this issue Jan 20, 2021 · 2 comments

Comments

@cadars
Copy link

cadars commented Jan 20, 2021

display: none;

Basically, display:none isn't recommended, it's better to use another technique.

Without using exotic properties like clipand clip-path, I have found this to be enough for this case (I'm planning to use it for the john-doe template:

section, section:target ~ section:last-of-type {
  height: 0;
  overflow: hidden;
}

section:target, section:last-of-type {
  height: auto;
  overflow: visible;
}
@trofosila
Copy link
Member

Hi Gregory.

Thanks for reporting this. Since I never used a screen reader, at first I had a hard time understanding what the issue is with "display: none"... but I guess we learn every day. Anyway, thanks for making me aware of it. I'll incorporate it also into the repo but first I want to try it with a screen reader to see how other people are consuming our work.

And also, thanks for the initial inspiration with this project. Never imagine we will have an opportunity to talk.

Best regards,
Laurentiu

@cadars
Copy link
Author

cadars commented Jan 21, 2021

I'm glad to know it's useful to someone :)

About the :target technique, I'm still trying stuff to make it bulletproof, you can follow that here:
https://portable.fyi/#2020-12-06-portable-html-an-idea

Let me know if you discover anything useful when using a screen reader!

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

No branches or pull requests

2 participants