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

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

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

Источник

10 ответов

Решение

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

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

Источник

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

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

Источник

В этом случае сделайте это с помощью 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;
}
Источник

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

Например

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

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

Источник

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

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

Источник

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

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

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

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

Источник

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

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

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

Источник

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

  if (this.RadioButtonList1.SelectedValue == "Date") { this.divByDate.Attributes.Add("style", "display:block"); }
    else { divByDate.Attributes.Add("style", "display:none"); }
Источник

Я рассматриваю сеть как не что иное, как непрерывную строку символов, поэтому с моей методологией вы можете получить 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 с идентификатором внутри него. Сделайте еще одно регулярное выражение и замените его.

Источник

Да, есть, используя <details>элемент, вы можете создавать совместный контент:

      <details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Подробную информацию об этом теге HTML можно найти в веб-документах MDN .

Источник
Другие вопросы по тегам