smaller css about tabby

[cferdinandi]

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.

[Aranjedeath]

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.

[cferdinandi]

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.