WebSite X5Help Center

 
Sinisa B.
Sinisa B.
User

People with disabilities  en

Autore: Sinisa B.
Visite 185, Followers 1, Condiviso 0  

Hi, regarding this change to the website for better accessibility for people with disabilities.

Is it enough to import the existing website into the latest version of WSX5 and then export it (upload it), or do other (manual) modifications to the existing website have to be made?

Thank you in advance for your inputs!

Postato il
8 RISPOSTE - 1 UTILE
Daniel W.
Daniel W.
User

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.

Leggi di più
Postato il da Daniel W.
Incomedia
Eric C.
Incomedia

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.

Leggi di più
Postato il da Eric C.
Sinisa B.
Sinisa B.
User
Autore

@ 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?

Leggi di più
Postato il da Sinisa B.
Axel  
Axel  
User

@Sinisa,

You can wait, and to check if it's working fine or no.... foot-in-mouth

Here a full demo of accessibility option. This script is from our friend KolAsim.

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

And it's really easy to add it...
As you can see it works.

Hope this helps.

Axel

Leggi di più
Postato il da Axel  
Sinisa B.
Sinisa B.
User
Autore

@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!

Leggi di più
Postato il da Sinisa B.
Axel  
Axel  
User

@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 wink

Axel

Leggi di più
Postato il da Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
@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!

(It > En) ... thanks to Axel  for mentioning mesmile; ...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/it/post/269954#comment26
... but your LINK should be seen to be able to evaluate its congruence...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪