How to make JSF / Seam pages accessible without JavaScript

Question

I am currently testing a sophisticated web application for accessibility without JavaScript . We rely heavily on JSF and Seam to render pages, and I'm more than annoyed by the general behavior when JavaScript is disabled. Many links and buttons rely on JavaScript to perform even the most basic operations.

• Is there general documentation on this topic?
• Do any of you advise on how to maintain accessibility?

My first research showed that type tags <s:button>can be replaced with <h:commandButton>. But after a few minutes, I realized that <h:commandLink>it doesn't even seem to work without JavaScript. I would like to have documentation that describes the parameters that make JS mandatory and show alternative ways to achieve the same elements.

He realized that things like onClick and others would not work without JS. But I really need to do at least the basic actions behind these links and buttons. Currently, most webapps cannot be moved without JS, and this is unacceptable.

Answer 1

I had the same suitability requirements for my previous project.

: s: link h: commandlink , JS, noscript h: commandwutton, ( ).

, s: link h: commandlink CSS JS. , , JS .

JQuery.

. < >

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

Another alternative is the tag <noscript>... as Serkan mentioned. For a tab bar, this might look like this (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 non-JavaScript clients to activate the desired tab. A better solution will hide the unusable tab bar navigation and provide a cleaner interface. But you will understand everything.