How to make JSF / Seam pages accessible without JavaScript

Question

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'm still looking for more sources here... there are some known replacements but I still have to work around others - especially `` at the moment... — Daniel Bleisteiner, Feb 14 '11 at 17:11
Not exactly a solution, but a similar question with helpful basic information is at [JSF framework without JavaScript](http://stackoverflow.com/questions/18837962/jsf-framework-without-javascript). — frIT, Jul 11 '14 at 08:01

score 1 · Accepted Answer · answered Feb 16 '11 at 20:01

1

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. <>

answered Feb 16 '11 at 20:01

Serkan

26
1

That's another idea how to approach this topic. Thanks. But it grows the size of the output of the already heavily overloaded Rich Faces HTML code even more. But it might be handy for some things like the tab panel. – Daniel Bleisteiner Feb 17 '11 at 06:24
Well the size is not that big, you only add 3 lines extra. – Serkan Feb 17 '11 at 18:37
Since there is no other feedback and your solution comes closest to my intentions you'll get your score here. – Daniel Bleisteiner Feb 21 '11 at 07:06

score 0 · Answer 2 · answered Feb 15 '11 at 08:45

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.

I'll try to build a simple alternative for non-javascript clients... it will be posted here later. — Daniel Bleisteiner, Feb 21 '11 at 07:06

score 0 · Answer 3 · answered Feb 22 '11 at 11:15

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.

How to make JSF / Seam pages accessible without JavaScript

3 Answers3