Closed Aranjedeath closed 7 years ago
You've made your content inaccessible to a lot of people with these changes.
Tabby forgoes aria roles in favor of simple, progressively enhanced anchor links. There are a few aspects to this approach.
First, don't use display: none
. It hides content completely from screen readers.
Tabby deliberately uses a more verbose set of CSS that only visually hides the content. Someone viewing the site via a screen reader simply sees anchor links and navigates through the full set of content.
Another important part of how Tabby works is keyboard navigation. If I tab into a closed content area that contains a link, that content area should become active (check out the demo to see what I mean).
Again, display: none
prevents this from happening, as the content area is removed from the tab flow.
The tabby CSS, minified, is 322 bytes. That's less than 1/3rd of a KB. Gzipped, it's probably closer to 100 bytes.
To save just a few bytes, you're making your site far less accessible.
OK. I didn't know display:none; had any effect on screen readers (I didn't know they didn't just read the code directly, which would facilitate ignoring things like display:none;). I now want to punch a standards committee member. Thanks for your response.
That's actually by design, and makes quite a bit of sense. If you're saying that a piece of content should not be displayed, why would you want a screen reader to read it? You're effectively "removing it" from the DOM.
Hence the visually hidden technique.
I'm not sure if this is a bug or not, but I just wanted to give back based on my use of the project.
Because I already have a normalize.css loaded, I was able to delete almost the entire css. The following leaves bit-exact perfectly functioning tabby.
hope it helps
it's live on my site