Accessibility issues with Xara Web Designer Premium

[pparamo]

Hello everybody,

I started using Xara Web Designer Premium to create a web page for my local parish. Unfortunately, when checking for accessibility using the Wave plugin I got a bunch of errors most of which I could quickly fix by making adjustments in Xara but there are a couple I cannot seem to fix related to links.

I am attaching the errors as marked by Wave and they seem to be hidden links that do not contain any text in them, apparently I can fix them by adding an alt to the link but I cannot see where to do this.

Has anyone else seen this before? Any recommendations on how I could get rid of these errors? Without being able to fix these I cannot use this software to design websites in Ontario as accessibility will soon be mandatory for websites.

Thank you all for your help

[Acorn]

Even my worst site return just 3 Missing Link errors.

My immediate guess is you have grouped things and ended up with images instead of text and boxes.

No-one can sort out your issues without a web link or better, the design file.

https://olguadalupeto.archtoronto.org already exists and that has 21 link errors.

Acorn

[Egg Bramhill]

Hi Pparamo, welcome to TalkGraphics.

I think this may be an inherent fault being caused by Xara's wysiwyg construction within the roe.js file.

This is the highlighted text MAY be causing the errors:

<div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:960px; height:100px; visibility:hidden; z-index:3;"><a href="" onclick="return(false);" onmousedown="xr_ppir(this);"></a>

</div>

Acorn would understand this far better than me.

[Acorn]

Egg, roe.js does not built anything in the HTM file. That is the job of the Xara HTML filter.
Xara refines the Xara HTML filter at every update so someday @Xara you might address the current HTML deficiencies enough to achieve better Accessibility: aria labels, all <a> Tags with alt="" content, real HTML tables, ...
Where the DOM elements of the HTML file has missing alt texts, it is possible to use a simple jQuery script to add them in. It is a sticking plaster approach and I have no direct experience if this overcomes Accessibility issues being flagged.

Images with only visual value should have an empty alt attribute set on them. This avoids screen readers reading out the entire URL.
You, however, need to understand the context: read https://webaim.org/techniques/alttext/ and also anything around ARIA role="presentation".

You can play around with something like in website > HTML Code(body):

<script>
  $('a:not([alt]), img:not([alt])').attr( {alt: '', role: 'presentation', name: 'generated link'} );
</script>

and seem if you get any improvement.
Do note, your site needs jQuery loaded.

If anyone tries that and sees a better rating, please tell us here.

Acorn

[Egg Bramhill]

Firstly, shame the OP has not responded.

However I'm getting confused again (sorry!)

Alt text in the main is reserved for images (although your link states differently.) Within Xara you can only place alt text via the Web Properties / Image tab.

You can't do this for text links. (to which I think the OP was referring).

I've tried many ways to avoid the 'Empty link' Error within the Wave application but nothing I can do in Xara removes these errors.

I've tried the following within a placeholder (see attached xar):

<a href="#" class="myButton" aria-label="myEggButton" title="Eggs Button">light red</a>

Wave acknowledges the inclusion of aria-label. Whether it uses the Title it doesn't say. It also gives a contrast error but this isn't relevant at present.

BUT it still reports an Empty Link error pointing to:

<div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:960px; height:100px; visibility:hidden; z-index:3;"><a href="" onclick="return(false);" onmousedown="xr_ppir(this);"></a>

</div>

In my own stumpling way I've tried for several hours to include a link within a Xara site to remove these errors without success. I don't believe its an Alt issue.

[Acorn]

Egg, I think the issue is around <a ...></a> being empty between the Tags, where a <span> has no text, just a fill, or <img> equally has not text.
I probably got carried away by adding alt into <a> as in <a alt=""></a> thinking this would address the issue.

I wasn't aiming to bust a gut while we had very limited detail.

Other people get it wrong as well: https://www.htmhell.dev/4/.

I don't mind being wrong.
I just want a clean solution from Xara.

Acorn

P.S. Pity no OP input, I agree. I find church sites are almost always the most baffling or is that mystical?