Incomedia has only made a few code changes to the preview version so far, but nothing that really helps people with disabilities.

Incomedia still has a lot to do if websites created with WebSite X5 are to comply with legal accessibility requirements.

WebsiteX5 will probably not be reasonably accessible until mid-year, just before the deadline.

I live in Germany and therefore I am more familiar with German websites on this topic.

Here is an example with information on the topic of "accessible websites" for disabled people.

.

----- German website (translate with Google) -----

Website barrierefrei machen: So gehen Sie vor

>> https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website/vorgehen-digitale-barrierefreiheit

-----

Hello Sinisa,
the update is mainly focused on a rewriting of the code so that websites generated are now more compatible with screenreaders or similar tools and their requirements, and to allow the addition of necessary information such as Alt text on elements where previously this was not possible, but overall there will be manual changes needed to make a website fully accessible.
With the launch of version 2025.1 there will be articles and guides with additional information about this.
I remain available.

@ Daniel— Ok, thank you very much for the information!

****

@ Eric—Thank you! So, you're basically suggesting to wait for version 2025.1 and the Incomedia's guidelines?

@Axel

Cheers! Thanks for chipping in. I'll wait for the new version, but if this is not a problem for you, could you drop me a link to the KolAsim script?

Thanks!

@Sinisa,

here the code.

<script>
$(document).ready(function(){//K>;
/** -- altocontrasto e incremento font - by KolAsim -- **/
maxfsK = 46; // maximum font size;
minfsK = 18; // minimum font size;
fsK = 6; // px font-size increment;
ritardoK = 1; // seconds delay for code start on page load;
//-----------------------------------------------------------------------------
setTimeout(function(){ //K1>;

// width:140px to set width bar
// width:22% to set picture size

font_sizeK = minfsK;
styleK='<style> #cacK{position:fixed;top:45px; left:20px;width:140px !important; height:auto !important;border-radius: 50px; !important;border:solid 4px Gray !important;'+
'background-color:Beige !important;text-align:center !important;z-index:1000000;}'+
' #contrastoK, #reloadK , #piuK, #menoK{position:relative;width:18% !important;'+
'border-radius:50% !important;border:solid 2px silver;background-color:lavender !important;cursor:pointer} '+
'#contrastoK:hover, #reloadK:hover , #piuK:hover, #menoK:hover {border:solid 2px Green }</style>';
$("head").append(styleK);
altocontrastoK = '<div id = "cacK" >'+
'<img id="contrastoK" src="afs-demo/accessibility/circle-lefthalf-fill.svg" title="high contrast\nblack ◑ white " >'+
'<img id="piuK" src="afs-demo/accessibility/increase-circle.svg" onclick="piuK()" title="More A(+)" >'+
'<img id="menoK" src="afs-demo/accessibility/decrease-circle.svg" onclick="menoK()" title="Less A(-)" >'+
'<img id="reloadK" src="afs-demo/accessibility/refresh-circle.svg" onclick="location.reload()" title="reset to default" >'+
'</div>';
$("body").append(altocontrastoK)
nK = 1;
$("#contrastoK").click(function(){//K>2;
if(nK !=1 ) {//K3>;
$(this).val("BIANCO/nero");
$("body *:not(#cacK)").css("background-color", "white").css("color", "black").css("font-size",font_sizeK+"px").css("line-height", line_heightK+"px");
$("body .text-inner:not(#cacK), body .text-inner *:not(#cacK)").css("height","auto")
nK=1;
} else {//K3<<+K4>;
$(this).val("NERO/bianco");
$("body *").css("background-color", "black").css("color", "white").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
$("body .text-inner, body .text-inner *").css("height","auto")
nK=2;
};//K4<<;
});//K2<<;
$("#contrastoK").hover(function(){//K5>;
$(this).attr("src","https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg")
}, function(){//K6>;
$(this).attr("src","https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg")
});//K5+K6<<;
$("#reloadK").hover(function(){//K7>;
$(this).attr("src","https://www.svgrepo.com/show/495638/repeat-circle.svg")
}, function(){//K8>;
$(this).attr("src","https://www.svgrepo.com/show/495633/refresh-circle.svg")
});//K7+K8<<;
}, ritardoK*1000); //K1<<;
});//K<<;
//------------------ f 9 -------------------------
function piuK(){//K9>;
if(font_sizeK < maxfsK){//K10>;
font_sizeK = font_sizeK + fsK;
line_heightK = font_sizeK+2;
$("#piuK").css("opacity",1)
$("#menoK").css("opacity",1).css("cursor","pointer")
$("body *:not(#cacK)").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
} else {//K10<< + //K11>;
$("#piuK").css("opacity",0.2).css("cursor","not-allowed")
};//K11<<;
};//K9<<;
//------------------ f 12 ------------------------
function menoK(){//K12>;
if(font_sizeK > minfsK){//K13;
font_sizeK = font_sizeK- fsK;
line_heightK = font_sizeK + 2;;
$("#menoK").css("opacity",1)
$("#piuK").css("opacity",1).css("cursor","pointer")
$("body *:not(#cacK)").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
} else {//K13<< + K14>;
$("#menoK").css("opacity",0.2).css("cursor","not-allowed")
};//K14<<;
};//K12<<;
</script>

For a specfic page you need to add this one into page properties.

Take care ....

Into this code the icons are coded like this

'<img id="contrastoK" src="afs-demo/accessibility/circle-lefthalf-fill.svg" title="high contrast\nblack ◑ white " >'+
'<img id="piuK" src="afs-demo/accessibility/increase-circle.svg" onclick="piuK()" title="More A(+)" >'+
'<img id="menoK" src="afs-demo/accessibility/decrease-circle.svg" onclick="menoK()" title="Less A(-)" >'+
'<img id="reloadK" src="afs-demo/accessibility/refresh-circle.svg" onclick="location.reload()" title="reset to default" >'+

So in this case you need to upload icons into your project with an HTML object.

and the display will be for your page.

Also you can choose to upload icons from external website like:

'<img id="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="hoher Kontrast\nschwarz ◑ weiß" >'+
'<img id="piuK" src="https://www.svgrepo.com/show/459979/increase-circle.svg" onclick="piuK()" title="Plus (A+)" >'+
'<img id="menoK" src="https://www.svgrepo.com/show/459914/decrease-circle.svg" onclick="menoK()" title="Minus A(-)" >'+
'<img id="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" onclick="location.reload()" title="auf Standard zurücksetzen" >'+
'</div></div>';

The issue in this case is if the external website does not respond, you will not display icones !!!

If you want use this code for the global website site, you need to include it into this part of WSX5

Here the code will be gloabl to entire website....

Another displaying like this is possible

https://wsx5demo.afsoftware.fr/accessibility2.html

And the code is.

<script>
$(document).ready(function(){//K>;
/** -- altocontrasto e incremento font - by KolAsim -- **/
maxfsK = 46; // maximum font size;
minfsK = 18; // minimum font size;
fsK = 6; // px font-size increment;
ritardoK = 1; // seconds delay for code start on page load;
//-----------------------------------------------------------------------------
setTimeout(function(){ //K1>;
font_sizeK = minfsK;
line_heightK = font_sizeK+3;
styleK='<style> .classAK{border:2px solid red} body,#imStickyBarContainer{margin-top:50px!important;} '+
' #cacK{position:fixed !important;top:0px !important; leftX:260px;width:100% !important; height:auto !important;'+
'background-image: linear-gradient(silver,white,silver);text-align:center !important;z-index:1000000;}'+
' #cacK2{width:180px;margin:auto;border-radius: 50px; !important;border:solid 4px Gray !important;background-color:beige !important}'+
' #contrastoK, #reloadK , #piuK, #menoK{position:relative;width:12% !important;'+
'border-radius:50% !important;border:solid 2px silver;background-color:lavender !important;cursor:pointer} '+
'#contrastoK:hover, #reloadK:hover , #piuK:hover, #menoK:hover {border:solid 2px Green }</style>';
$("head").append(styleK);
altocontrastoK = '<div id = "cacK" ><div id = "cacK2" style=" ">'+
'<img id="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="hoher Kontrast\nschwarz ◑ weiß" >'+
'<img id="piuK" src="https://www.svgrepo.com/show/459979/increase-circle.svg" onclick="piuK()" title="Plus (A+)" >'+
'<img id="menoK" src="https://www.svgrepo.com/show/459914/decrease-circle.svg" onclick="menoK()" title="Minus A(-)" >'+
'<img id="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" onclick="location.reload()" title="auf Standard zurücksetzen" >'+
'</div></div>';
$("body").prepend(altocontrastoK)
nK = 1;
$("#contrastoK").click(function(){//K>2;
$("#imContent a").addClass("classAK");
if(nK !=1 ) {//K3>;
$(this).val("BIANCO/nero");
$("body *:not(#cacK)").css("background-color", "white").css("color", "black").css("font-size",font_sizeK+"px").css("line-height", line_heightK+"px");
$("body .text-inner:not(#cacK), body .text-inner *:not(#cacK)").css("height","auto")
nK=1;
} else {//K3<<+K4>;
$(this).val("NERO/bianco");
$("body *").css("background-color", "black").css("color", "white").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
$("body .text-inner, body .text-inner *").css("height","auto")
nK=2;
};//K4<<;
});//K2<<;
$("#contrastoK").hover(function(){//K5>;
$(this).attr("src","https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg")
}, function(){//K6>;
$(this).attr("src","https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg")
});//K5+K6<<;
$("#reloadK").hover(function(){//K7>;
$(this).attr("src","https://www.svgrepo.com/show/495638/repeat-circle.svg")
}, function(){//K8>;
$(this).attr("src","https://www.svgrepo.com/show/495633/refresh-circle.svg")
});//K7+K8<<;
}, ritardoK*1000); //K1<<;
});//K<<;
//------------------ f 9 -------------------------
function piuK(){//K9>;
$("#imContent a").addClass("classAK");
if(font_sizeK < maxfsK){//K10>;
font_sizeK = font_sizeK + fsK;
line_heightK = font_sizeK+3;
$("#piuK").css("opacity",1);
$("#menoK").css("opacity",1).css("cursor","pointer");
$("body *:not(#cacK)").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
} else {//K10<< + //K11>;
$("#piuK").css("opacity",0.2).css("cursor","not-allowed")
};//K11<<;
};//K9<<;
//------------------ f 12 ------------------------
function menoK(){//K12>;
if(font_sizeK > minfsK){//K13;
font_sizeK = font_sizeK- fsK;
line_heightK = font_sizeK + 3;;
$("#menoK").css("opacity",1)
$("#piuK").css("opacity",1).css("cursor","pointer")
$("body *:not(#cacK)").css("font-size",font_sizeK).css("line-height",line_heightK+"px");
} else {//K13<< + K14>;
$("#menoK").css("opacity",0.2).css("cursor","not-allowed")
};//K14<<;
};//K12<<;
</script>

Hope this helps

Enjoy & a big thank you to KolAsim

Axel

(It > En) ... thanks to Axel  for mentioning me; ...there is also some more updated version of that code...
... here for example you will find the simplified version for only high contrast (positive/negative)...
https://helpcenter.websitex5.com/pl/post/269954#comment26
... but your LINK should be seen to be able to evaluate its congruence...

.

ciao

.

@Axel

Thank you for your effort and such a detailed answer!
All the best!

@KolAsim

Thank you!

Wouldn't it be nice if Incomedia included this in regular updates?
I mean, it's required by law, so it's not some plug-in we buy for the sake of clients or to make our website look nicer...

Hello,
I can confirm that this kind of function will not be present in 2025.1, as the focus was on other accessibility aspects, but I will report it so that it can be considered for further improvements on this area.

@Eric

What do you mean ?

The announcement of 2025.1.1 like marked into my post has been cancelled ?

Axel

en France.... 

Depuis le 1er janvier 2024, les sites de l’internet public non accessibles aux personnes handicapées peuvent faire l’objet de sanctions à hauteur de 50 000 euros. En rapport avec les objectifs de la loi "handicap" de 2005, le but est que les démarches en ligne les plus courantes soient accessibles fin 2025.

https://www.dila.premier-ministre.gouv.fr/home/article/handicap-des-obligations-renforcees-pour-l-accessibilite-des-sites-administratifs

Hello Axel,
I meant that version 2025.1 will not include, for example, a contrast control tool, as the work was now focused on rewriting the code generated by the software to increase accessibility and allow users to set important information for this, such as Alt texts, in places where it was previously not possible.

@ Axel and @ KolAsim

The code works as it should—thank you, guys!

Just a side note:

If I want to enlarge a bit the whole control box (icons too), what part of the code controls the icon's and the "box's" initial dimensions?

Cheers!

... unfortunately I didn't quite understand, and in any case, my assessments and whether it is possible to do something can only be based on real LINKS online...
.
ciao
.

Io non ho cpaito. Comunque sto iniziando a inserire l'attributo alt" a tutte le immagini ma durante l'ottimizzazione continua a dirmi che non ho specificato il testo alternativo... Forse va inserito in qualche altro punto?

E' tutto molto vago...

@Sinisa,

With first example, here you can change sizing

Example:

and

Into second example icons sizing is here

and if you change by

the displaying will be on the top in the center of page

Enjoy !

Axel

Gli errori che vedi fanno riferimento a oggetti Immagine o oggetti di altro tipo?
Se premi il tasto Avvia dell'esportazione dopo le modifiche, rimangono visibili gli stessi avvisi?

Grazie.

Scusate, ho chiuso e riaperto e adesso funziona.

Ma per quel che riguarda le nuove norme sull'accesssibilità, fornirete qualche aiuto?

Un'altra cosa.
Nella casella del testo alternativo di un'immagine, devo insere anche il tag: Alt="esempio"
oppure basta solo la descrizione e il tag lo mette il software?

Grazie

Buongiorno Paolo,
fai riferimento a qualche aspetto in particolare?
Relativamente al testo alternativo, è sufficiente inserire il contenuto desiderato, il programma genererà poi il relativo codice.
Resto a disposizione.

Ho letto che, oltre a inserire il tag alt su ogni immagine,  bisogna far si che l'utente possa modificare colori e grandezza del testo. 

Uscirà un plugin?

Buongiorno Paolo,
per il momento non è previsto, ma la cosa è stata riportata come suggerimento e stiamo approfondendo le differenze tra i requisiti di accessibilità introdotti nei vari paesi.

... i recente programma è orientato nei contenuti accessibili, vedi >changelog...
... in linea di massima si potrebbe fare un ottimo sito partendo da questo > esempio Incomedia...

.

ciao

.