Есть ли способ показать / скрыть элементы без CSS?

Question

Я делаю один веб-интерфейс 508 совместимым и одно требование гласит: «Работа с веб-интерфейсом, когда CSS отключен». У нас есть несколько мест, где мы показываем / скрываем элементы с помощью style=display:inline и style=display:none и вызываем их соответственно с помощью вызовов функций JS. Когда я отключаю CSS (используя WAT2.0), также показываются скрытые элементы, которые не делают пользовательский интерфейс хорошим. У нас есть такие вещи в нескольких местах, такие как свернутые / развернутые описания, всплывающие окна при перемещении мыши и т. Д.,

Есть ли другой способ показать / скрыть элементы, кроме использования тегов стиля? Пожалуйста, совет!

Answer 1

Это звучит громоздко, но вы могли бы создать простую библиотеку, которая фактически удаляет узлы из DOM и вставляет их обратно, когда они необходимы. У вас все еще может быть объект, который сохраняет все удаленные узлы как переменные, чтобы вам не приходилось создавать их заново при вставке.

Я должен сказать, однако, что когда требования указывают, что сайт должен работать с отключенным CSS, это редко означает, что он должен функционировать абсолютно одинаково во всех отношениях с отключенным CSS. Например, если у вас есть список с возможностью развертывания / свертывания, я бы предположил, что приемлемым компромиссом для тех, у кого отключен CSS, будет всегда показывать содержимое всех элементов в списке.

Answer 2

Соответствие Web UI 508 требует, чтобы весь контент , который доступен пользователю со стилем или сценарием, был доступен пользователям без доступа - часто это означает гиперссылку на статические страницы, но это может также включать использование серверного кода моделировать динамические сценарии.

Доступный сайт всегда легче разрабатывать, начиная с сайта, который доступен, а затем добавляя функции стиля и скрипта, которые поддерживаются.

Answer 3

Вы также можете рассмотреть возможность показать / скрыть элементы на стороне сервера. Вместо использования Javascript, просто отправьте форму на сервер и используйте всю мощь taglibs и EL в JSP.

* 1003 Е.Г. *

<c:if test="${someCondition}">
    <p>This is displayed if ${someCondition} evaluates to true.</p>
</c:if>

Дополнительным преимуществом является то, что это сделает ваш Javascript ненавязчивым , что, безусловно, высоко ценится, когда речь идет о доступности.

Answer 4

В этом случае сделайте это с помощью JavaScript. Просто удалите элемент из тега body и поместите его обратно при необходимости.

window.holder = [];
function switchNodes(source, target){
    var parentNode = source.parentNode;
    if(parentNode && !target.parentNode){
        parentNode.insertBefore(target,source);
        parentNode.removeChild(source);
        return true;
    }

    return false;
}

function show(node){
    for(var i=0,item;item = holder[i];i++){
        if(item.node == node){
            var span = item.span;
            switchNodes(span, node); 
            holder.splice(i,1);
            return true;
        }
    }

    return false;
}

function hide(node){
    var span = document.createElement("span");
    if(switchNodes(node,span)){
        holder.push({node: node, span : span});
        return true;
    }
    return false;
}

Answer 5

Вы можете удалить элементы из DOM вместо того, чтобы скрывать их, но я не думаю, что есть веская причина для этого. Насколько я знаю, программы чтения с экрана будут уважать display: none, и я не могу думать ни о какой другой причине, по которой клиент должен поддерживать сценарии, но не CSS ...

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

Answer 6

Я не совсем уверен, что это возможно.Похоже, дизайн страницы действительно должен соответствовать этому требованию.

Я думаю, вы должны подойти к этому так, как будто у вас тоже нет JavaScript.Тогда вам придется полагаться на обновления страницы, чтобы показать / скрыть элементы.Т.е. когда вы щелкаете, чтобы показать / скрыть что-то, обновить страницу, и тогда ваш серверный код будет выполнять логику того, было ли поле введено на странице.

Если это поле ввода, я полагаю, оно все еще может быть включено в качестве скрытого поля?

Это может показаться немного неуклюжим, но на самом деле это довольно хорошо, поскольку вы двигаетесьпо пути к ненавязчивому JavaScript

Answer 7

Раздел 508, похоже, является своего рода нормативным актом США о доступности веб-сайтов.

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

Я бы предложил разработать для ваших страниц чистый семантический HTML-код, который хорошо выглядит без CSS, а затем использовать CSS и JavaScript, чтобы сделать страницу более привлекательной или мощной, если она поддерживается. Также попробуйте предварительный просмотр вашего сайта в Ссылки во время разработки.

Answer 8

Я рассматриваю сеть как не что иное, как непрерывную строку символов, поэтому с моей методологией вы можете получить innerHTML элемента и изменить его, чтобы динамически манипулировать источником страницы. Есть несколько способов сделать это.

1. Просто удалите содержимое в родительском элементе, задав для его innerHTML пустую строку.

   document.getElementById('myElement').innerHTML = '';
   

2. Еще один дешевый трюк, который я использовал, - это добавление комментариев HTML в мой источник, чтобы я мог добавлять «теги» и сортировать текст между ними с помощью регулярного выражения.

   <body>
     <!--Start-->
       <div>Hello World.</div>
     <!--End-->
     <div>Au revoir.</div>
   </body>
   

   Затем вы можете сделать регулярное выражение JavaScript, чтобы заменить все между вашими тегами.

   document.body.innerHTML = document.body.innerHTML.replace(/\<!--Start--\>[\s\S]*\<!--End--\>/i, '');
   

   Регулярное выражение находит тег, а затем ноль или более пробельных или непробельных символов, за которыми следует мой тег, и заменяет его пустой строкой, оставляя вам следующее.

   <body>
     <div>Au revoir.</div>
   </body>
   

3. И, конечно, вы всегда можете использовать библиотеку JavaScript (jQuery, Mootools, Prototype и т. Д.), Чтобы помочь вам в этом. В этих библиотеках есть методы для удаления объектов DOM.

Если вы хотите иметь возможность записать содержимое обратно, просто сохраните его в переменной и вставьте комментарий HTML с идентификатором внутри него. Замените другое регулярное выражение, и оно вернулось.

Answer 9

## Я обычно пользуюсь так: ##

  if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); }
    else { divByDate.Attributes.Add("style", "display:none"); }