Как сделать страницы JSF / Seam доступными без JavaScript - PullRequest
Новая
       0

Как сделать страницы JSF / Seam доступными без JavaScript

3 голосов
/ 14 февраля 2011

В настоящее время я проверяю доступность сложного веб-приложения без JavaScript . Мы сильно полагаемся на JSF и Seam для визуализации страниц, и меня более чем раздражает общее поведение при отключенном JavaScript. Многие ссылки и кнопки используют JavaScript для выполнения даже самых простых операций.

  • Есть ли общая документация по этой теме?
  • Кто-нибудь из вас советовал, как сохранить доступность?

Мои первые исследования показали, что теги типа <s:button> можно заменить на <h:commandButton>. Но через несколько минут я понял, что даже <h:commandLink> не работает без JavaScript. Я хотел бы иметь некоторую документацию, которая описывает, какие параметры делают JS обязательными, и показывает альтернативные способы достижения тех же самых элементов.

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

Ответы [ 3 ]

1 голос
/ 16 февраля 2011

У меня были такие же требования к доступности для моего предыдущего проекта.

Я сделал следующее: Просто используйте s: link или h: commandlink для пользователей, у которых есть JS, и поместите туда тег noscript с кнопкой h: command, стилизованной под вашу ссылку (настолько хорошо, насколько это возможно).

А также убедитесь, что s: link или h: commandlink по умолчанию скрыты в CSS и сделаны видимыми с помощью JS. Таким образом, вы видите только одну ссылку или кнопку, когда JS выключен.

Вы можете легко сделать это с помощью Jquery.

Приветствия. <>

0 голосов
/ 22 февраля 2011

Другой альтернативой является тег <noscript> ... как упомянуто Serkan .Для панели вкладок это может выглядеть следующим образом (просто быстрый каркас): 

<noscript>
    <h:form id="formTasksNoJS">
        <fieldset>
            <legend>Alternative Steuerung ohne JavaScript</legend>
            <h:commandButton action="#{taskManagerSettings.setSelectedTab('eingang')}" value="Eingang" id="noJS1"/>         
            <h:commandButton action="#{taskManagerSettings.setSelectedTab('ausgang')}" value="Ausgang" id="noJS2" />            
            <h:commandButton action="#{taskManagerSettings.setSelectedTab('archiv')}" value="Archiv" id="noJS3" />          
        </fieldset>
    </h:form>
</noscript>

<h:form id="formTasks">
    <rich:tabPanel switchType="server" selectedTab="#{taskManagerSettings.selectedTab}" >
        <rich:tab name="eingang" label="Eingang">
            ...
        </rich:tab>
        <rich:tab name="ausgang" label="Ausgang">
            ...
        </rich:tab>
        <rich:tab name="archiv" label="Archiv">
            ...
        </rich:tab>
    </rich:tabPanel>
</h:form>

Это позволяет клиентам без JavaScript активировать нужную вкладку.Лучшее решение - скрыть непригодную навигацию на панели вкладок и предоставить более понятный интерфейс.Но вы получите суть.

0 голосов
/ 15 февраля 2011

Одной из возможных замен <rich:modalPanel> является следующее решение только для CSS - может быть, оно поможет другим. 

div.modal {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

div.modal div.wrapper {
    background-color: white;
    border: 5px solid black;
    width: -moz-fit-content; /* Mozilla Optimization */
    max-width: 90%;
    max-height: 90%;
    overflow-y: scroll;
    margin : 50px auto;
    padding: 10px;
    -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Просто замените <rich:modalPanel> на <s:div rendered="..." styleClass="modal"><div class="wrapper"> content </div></s:div>. CSS немного стильный ... вы можете лишить некоторые косметические вещи.

Возможной заменой <rich:tabPanel> может быть <t:panelTabbedPanel> Томагавка, который должен работать без JavaScript - по крайней мере, это то, что мне сказали ... но я все еще должен это проверить.

...