[英]How to make JSF / Seam pages accessible without JavaScript
I'm currently checking a complex web application for accessibility without JavaScript . 我目前正在检查一个复杂的Web应用程序, 无需JavaScript即可访问。 We heavily rely on JSF and Seam to render the pages and I'm more than annoyed about the overall behaviour when JavaScript is turned off. 我们非常依赖JSF和Seam来渲染页面,而且当关闭JavaScript时我对整体行为感到非常恼火。 Many links and buttons rely on JavaScript to perform even the most basic operations. 许多链接和按钮依赖JavaScript来执行最基本的操作。
My first investigations showed that tags like <s:button>
can be replaced with <h:commandButton>
. 我的第一次调查显示像<s:button>
这样的标签可以用<h:commandButton>
替换。 But a few minutes later I've realized that even <h:commandLink>
doesn't seem to work without JavaScript. 但几分钟后,我意识到即使没有JavaScript, <h:commandLink>
似乎也无法运行。 I'd love to have some documentation that describes what parameters that make JS mandatory and showing alternate ways to achieve the same elements. 我希望有一些文档来描述使JS成为强制性的参数,并展示实现相同元素的替代方法。
It's understood that things like onClick and others won't work without JS. 据了解,没有JS,像onClick和其他的东西是行不通的。 But I really need to make at least the basic actions behind those links and buttons work. 但我真的需要至少做出这些链接和按钮背后的基本动作。 Currently much of the webapp can't be navigated without JS and that's unacceptable. 目前,没有JS,很多webapp都无法导航,这是不可接受的。
I had the same accesibility requirements for my previous project. 我对以前的项目有相同的可访问性要求。
What I've done is the following: Just use s:link or h:commandlink for users who have JS and put there a noscript tag with ah:commandbutton styled like your link (as good as possible). 我所做的是以下内容:只需对拥有JS的用户使用s:link或h:commandlink,并在其中添加一个noscript标签:ah:commandbutton样式就像你的链接一样(尽可能好)。
And also make sure that s:link or h:commandlink is default hidden in the CSS and made visible with JS. 并确保s:link或h:commandlink默认隐藏在CSS中,并通过JS显示。 This way you only get one link or button seen when JS is off. 这样,当JS关闭时,您只能看到一个链接或按钮。
You can do this easily with Jquery. 您可以使用Jquery轻松完成此操作。
Cheers. 干杯。 <> <>
One possibile replacement for the <rich:modalPanel>
is the following CSS only solution - maybe it helps others. 一个可能的<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;
}
Simply replace <rich:modalPanel>
with <s:div rendered="..." styleClass="modal"><div class="wrapper"> content </div></s:div>
. 只需将<rich:modalPanel>
替换为<s:div rendered="..." styleClass="modal"><div class="wrapper"> content </div></s:div>
。 The CSS is a bit stylish... you may strip some of the cosmetic things though. CSS有点时尚......你可能会剥掉一些化妆品。
A possible replacement for <rich:tabPanel>
might be Tomahawk's <t:panelTabbedPanel>
which should work without JavaScript - at least that's what has been told me... but I still have to verify this. 可能替换<rich:tabPanel>
可能是Tomahawk的<t:panelTabbedPanel>
,它应该可以在没有JavaScript的情况下工作 - 至少这是告诉我的......但我仍然需要验证这一点。
Another alternative is the <noscript>
tag... as mentioned by Serkan . 另一种选择是<noscript>
标签......如Serkan所述 。 For the tab panel this could look like the following (just a quick wireframe): 对于选项卡面板,这可能如下所示(只是一个快速线框):
<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>
This allows clients without JavaScript to activate the desired tab. 这允许没有JavaScript的客户端激活所需的选项卡。 A better solution would hide the unusable tab panel navigation and present a cleaner interface. 更好的解决方案是隐藏不可用的选项卡面板导航并呈现更清晰的界面。 But you'll get the point. 但你会明白这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.