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?

[pparamo]

My apologies for not responding sooner. I was trying to upload the file with all the contents previously but I believe I got an error about the file size. Is there one particular file I should upload?

@acorn, you are correct in that I think the issue is that there is no text inside the anchor tag, however, those errors appear on hidden links (as I think Xara uses that to create a SPA feel). How would I go about incorporating jQuery into my project? I could certainly force text into the <a> elements if I had to.

@Egg, thank you for the welcome. In your <a ..>light red</a> example Wave would not throw an error because you have the "light red" text. In the case of the links I have there is no text generated by Xara and you are right no "alt" can be added to an anchor tag.

Thank you both for your help.

[pparamo]

I forgot to mention you can view the pages here:

https://iglesiaguadalupetoronto.com/xara

Thanks!

[Acorn]

I forgot to mention you can view the pages here:
https://iglesiaguadalupetoronto.com/xara
Thanks!

You have some serious issues but few are around Accessibility.

Your Performance is being hit by having a massive image file of the church being loaded 10 time each being around 8MB to achieve wasteful eye candy of filtered backgrounds.
Do not make the site a Supersite (scroll website), it does not need it. Page transitions are wasteful, especially for accessibility.
Use Utilities > optimise all images.

Tidy up these just things and come back.

Do not use WaveAIM at all until you know what is going on.
Use Chrome browser Developers' Tools (F12) and the Lighthouse tab instead.

While the site has merit, your design can be greatly improved but it will have to be through self-help as there are a fair few issues.
You need to use Scale to Fit width as a minimum. After a redesign, you then need to consider the inclusion of a Variant for smaller devices.

Acorn

[pparamo]

Thank you Acorn. I had written a lengthier post but it said it was to be approved by the moderator.

In any case, I will take your advice, unfortunately, this is the first site I design with Xara and I am still learning the ropes. I was hoping there was a way to make it responsive, I will look into the Variant topic.

Thank you again for all the feedback, hopefully, I can come back with something better next time.