Question

我目前正在检查复杂的网络应用程序的无障碍无需JavaScript 。我们非常依赖JSF和Seam来渲染页面，而且当关闭JavaScript时我对整体行为感到非常恼火。许多链接和按钮依赖JavaScript来执行最基本的操作。

是否有关于该主题的一般文件？
你们有没有人建议如何保持无障碍？

我的第一次调查表明<s:button>之类的标签可以替换为<h:commandButton>。但几分钟后，我意识到如果没有JavaScript，即使<h:commandLink>似乎也无效。我希望有一些文档来描述使JS成为强制性的参数，并展示实现相同元素的替代方法。

据了解，没有JS，像onClick和其他的东西将无法运作。但我真的需要至少做出这些链接和按钮背后的基本动作。目前，如果没有JS，很多webapp都无法导航，这是不可接受的。

Answer 1

我对以前的项目有相同的可访问性要求。

我所做的是以下内容：只需对拥有JS的用户使用s：link或h：commandlink，并在其中放置一个带有h：commandbutton的noscript标签，其风格与链接一样（尽可能好）。

并确保s：link或h：commandlink默认隐藏在CSS中，并通过JS显示。这样，当JS关闭时，您只能看到一个链接或按钮。

您可以使用Jquery轻松完成此操作。

干杯。＆LT;＆GT;

Answer 2

<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>的可能替代品可能是Tomahawk的<t:panelTabbedPanel>，它应该可以在没有JavaScript的情况下运行 - 至少这是告诉我的......但我仍然必须验证这一点。

Answer 3

另一种选择是<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的客户端激活所需的选项卡。更好的解决方案是隐藏不可用的选项卡面板导航并呈现更清晰的界面。但你明白了。

如何在没有JavaScript的情况下访问JSF / Seam页面

3 个答案: