Как сделать мой FAQ более доступным?

Question

У меня есть этот вопрос и ответ формат:

$('.qanda button').click(function(){ 
 
    var btn = $(this); 
 
    btn.siblings('.answer').slideDown(function(){ 
 
     $(this).attr('tabindex', '-1').focus(); 
 
     btn.remove(); 
 
    }); 
 
});

* {margin: 0;} 
 

 
.qanda { 
 
    margin: 2em 0; 
 
    clear: both; 
 
} 
 
.answer { 
 
    display: none; 
 
    clear: both; 
 
    outline: none; 
 
} 
 
.qanda h2 { 
 
    float: left; 
 
} 
 
.qanda button{ 
 
    margin-top: 4px; 
 
    margin-left: 8px; 
 
}

<div class="qanda"> 
 
    <h2>Is the sky blue?</h2> 
 
    <button>+</button> 
 
    <div class="answer"> 
 
     <p>That depends on various factors, including whether it's night or day.</p> 
 
    </div> 
 
</div> 
 

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

http://jsbin.com/jazekotosa/

Я понимаю, что не практикуется прогрессивного улучшения в том, что ответы скрыты с помощью статического CSS. Однако, если я добавил это правило в JS и использовал эту страницу для многих вопросов, я предполагаю, что на некоторых устройствах ответы могут отображаться в течение секунды секунды, пока страница загружается. Поэтому я полагаюсь на работу JavaScript (хотя я не уверен, что сам по себе является препятствием для доступности).

Когда ответ показывает, что анимация завершена, фокус установлен на отображаемый div, то есть читатели экрана будут (в моем ограниченном опыте) читать с этой точки.

Кнопки естественно фокусируются, поэтому клавиатура доступна.

Что еще я могу сделать?

Answer 1

Самый простой способ сделать это изящно деградировать, чтобы иметь фрагмент кода что-то вроде этого:

<noscript><link rel=stylesheet src="no_js.css"></noscript> 

, а затем иметь CSS файл no_js.css следующим образом:

.answer { 
    display: inline !important; 
} 

так, что, когда скрипты отключены, эта таблица стилей переопределяет оригинальные стили, чтобы сделать все .answer s видимым.

Answer 2

Если вы хотите изменить CSS на странице в зависимости от того, активен ли JavaScript, попробуйте avoid noscript. Лучшая практика, похоже, добавляет JavaScript в голову , чтобы добавить CSS в DOM.

var fileref=document.createElement("link"); 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", "css/style2.css"); 
document.getElementsByTagName("head")[0].appendChild(fileref); 

Или в JQuery ...

$('<link rel="stylesheet" type="text/css" href="css/style2.css" />').appendTo('head'); 

Что касается того, что вы можете сделать для браузеров без JavaScript, есть способы, чтобы манипулировать содержимое, используя чистый CSS. Эта скрипка использует фокус, но отслеживание невидимых флажков также является альтернативой.

http://jsfiddle.net/x33kcr18

Или разделить FAQ ответов в свою собственную HTML-страницу и загружать их динамически с помощью IFrames.

<h2>Is the sky blue?</h2> 
<a href="answer1.html" target="answer1"><button>+</button></a> 
<iframe name="answer1"></iframe> 

Answer 3

Нынешняя мода, кажется, offset the text from the screen.

Однако имейте в виду, что устройства для чтения экрана do support JavaScript.

Лучшее, что нужно сделать, это try it out, я думаю.