Summary of recommendations and improvements of accessibility 16
For the optimization of CASUS for screen readers, required for a project, we used the tool “WAVE” available at wave.webaim.org. The webaim.org website also includes other useful resources for optimizing own websites/web applications. The WAVE tools are entirely online, so no installation is needed.
While the tool “WAVE” is very easy to use for static websites, using it for a dynamic webapp required some tricks which we would like to share in this section.
Once you go to wave.webaim.org the only available interface element is a input field for a URL which you have to fill with the page you would like to analyze and press return. webaim.org fetches the typed in page and will give you the results:
Image: Start screen of waves.webaim.org check application
wave.webaim.org: sample result screen
The summary contains number of “errors”, “alerts”, “features, “structural elements”, “html5 and ARIA” and “contrast errors”
Errors: Critical structural issues, which prevent screen readers from being able to read the content in a meaningful way, examples: missing labels for input fields. to get more than the summary you can go to the “details” section in the left menu, for each issue you can even get more explanations and hints how to fix these with “i” icon next to the issue category.
Alerts: even though not critical for reading the page, improvements would help the screen readers to process the page better, examples are broken headline structures, not meaningful links names like “read more” without more context.
Features: same as alerts but even less critical, like alternative texts of images
Structural Elements: scan for headlines, lists, etc. which help screen readers
HTML5 and ARIA: checks whether additional context tags like
Contrast Errors: These refer to the additional “contrast” section of WAVE, which does address not the screen reader opportunities, but whether the page has issues for users with low vision, but not severe enough to need screen readers
The tips and tricks linked within WAVE are highly recommended and give developers basic concepts for their work.
For the CASUS analysis the goal was to have no errors at all + limiting alerts to an uncritical minimum. The changes were addressed by template and/or CSS changes, no backend programming was needed.
As written before WAVE reads the typed in URL an scans the page on their system and present results. to analyse deeper dynamic pages after login we used a trick:
CASUS is a web application installed on Apache Tomcat webapp container: Tomcat transparantely allows Http session coded with Cookies or URLs, the URL coding of the http session is
<protocol>://<host>;<session_cookie_name>=<session_id>/<path_and_page>
session_cookie_name := usually “jsessionid” unless differently configured in the application container session_id := is the same as the cookie!
So we had 2 browsers windows open in, one we used CASUS as we would use it normally (logged in triggered navigation events) before we copy and pasted the actual URL into the WAVE tool, we grabbed the cookie with common web developer tools, like the built in tools in Firefox, copied the value of the present “JSESSIONID” Cookie (Standard http session cookie name in Tomcat unless differently configured) and so constructed the URL encoded tracking with adding e.g. ;jsessionid=FA22C9A397876F716B1A909A9F42C8BF to the plain url:
Example for the CASUS case selection page:
Original URL:
https://player.casus.net/pmw2/app/player2/player_selection2.html
URL encoded http session:
With this technique we were able to address issues in all relevant pages for the course participant player within CASUS. If the web app container or framework does not support such a transparent way for coding http session data in cookies, you might need to add similar functionality work arounds in you app.
WAVE is a very powerful tool, we highly recommend checking you pages constantly, you very soon get a sense on important things to work on for helping users with low or no visuals. Most of the changes were fairly easy and not hard to fix. Nevertheless we also recommend additionally to WAVE trying out screen readers to get a sense how you application feels for such users. On Mac a basic functionality is already built in, another tool is the NVDA screen reader available on a donation basis on https://www.nvaccess.org/ for Windows. The standard is commercial JAWS, pricy though: https://www.freedomscientific.com/Products/Blindness/JAWS