How to make JSF / Seam pages accessible without JavaScript

I'm currently checking a complex web application for accessibility without 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. Many links and buttons rely on JavaScript to perform even the most basic operations.

• Is there some general documentation about that topic?
• Has any of you some advise how to maintain accessibility?

My first investigations showed that tags like <s:button> can be replaced with <h:commandButton>. But a few minutes later I've realized that even <h:commandLink> doesn't seem to开发者_开发技巧 work without JavaScript. I'd love to have some documentation that describes what parameters that make JS mandatory and showing alternate ways to achieve the same elements.

It's understood that things like onClick and others won't work without JS. 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.

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 a h:commandbutton styled like your link (as good as possible).

And also make sure that s:link or h:commandlink is default hidden in the CSS and made visible with JS. This way you only get one link or button seen when JS is off.

You can do this easily with Jquery.

Cheers. <>

One possibile replacement for the <rich:modalPanel> is the following CSS only solution - maybe it helps others.

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>. The CSS is a bit stylish... you may strip some of the cosmetic things though.

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.

Another alternative is the <noscript> tag... as mentioned by 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. A better solution would hide the unusable tab panel navigation and present a cleaner interface. But you'll get the point.