Вёрстка табов для SEO на одном CSS

Специалисты по оптимизации справедливо считают, что если документ (читай страница) имеет логичную структуру, то Гугл его любить будет сильнее. Однако дизайнеры склонны плевать на структуру — им главное чтоб большая картинка занимала пол листа. А скучные тексты пусть сидят в табах.
Между Сциллой и Харибдой пытается проплыть верстальщик. Когда не получается проплыть, он изобретает

Изобретение подходит лишь тем, кто отчаянно плюет на версии IE старше 9. Предназначено для доставляния удовольствия спецам по SEO.
Давным давно уже я получаю требование от своего Мастера-оптимизатора строить табы так:

<h2>заголовок таба 1</h2> <div>тело таба 1</div> <h2>заголовок таба 2</h2> <div>тело таба 2</div> <h2>заголовок таба 3</h2> <div>тело таба 3</div> 

До недавнего времени такая разметка преобразовывалась на клиенте в нечто похожее

<header>   <h2>заголовок таба 1</h2>   <h2>заголовок таба 2</h2>   <h2>заголовок таба 3</h2> </header> <section>   <div>тело таба 1</div>   <div>тело таба 2</div>   <div>тело таба 3</div> </section> 

и далее функционировало под управление JQuery.
Но у данного подхода есть один неприятный момент — прыжки. А если еще и подгружаются веб шрифты, то прыжки становятся еще более заметны.
И вот после невероятных усилий только-CSS решение было найдено. Нехитрая манипуляция с флоатами и отрицательными отступами и вуаля:

h2.tab {   float: left;   height: 60px; } h2.tab.active {  background: yellow; } div.tab {   margin-top:60px;   float: right;   margin-left: -100%;   width: 100%;   display: none; } h2.tab.active + div.tab { display: block; } 

Вроде бы почти «только CSS», но нет — скрипт используется для того, чтобы расставлять класс активному табу так:

  $('h2.tab').click(function(){     if ($(this).hasClass('active')) return;     $(this).addClass('active').siblings('h2').removeClass('active');   }); 

то есть «не тру». Дальнейшие попытки использовать псевдо селектор :active не привели к жалаемогу результату (если кто найдёт — пиши). Однако основаная проблема была решена — разметка только на CSS.
PS: в реальной жизни пришлось после последнего блока с контентом поставить BR.clearfix. :after почему то не сработал.
Ещё раз повторюсь — адекватно работает только в Chrome, Firefox and IE>8.
Смотреть здесь
Счастливой верстки!