WebSite X5Help Center

 
Claudiu Baron
Claudiu Baron
User

Accessibility module  en

Автор: Claudiu Baron
Просмотрено 497, Подписчики 2, Размещенный 0  

Hello,

I would like the site to be accessible for people with disabilities.

I could do this with WebSite X5 Evo?

Something like this 

Размещено
21 Ответы - 1 Полезно
John S.
John S.
User

There is no such possibility in X5.

If you want it, you will have to do it yourself with special code.

Читать больше
Размещено От John S.
John S.
John S.
User

I guess you have seen this: https://userway.org/ and did not like the price starting from 490$/year

The DIY way could maybe start here: https://www.w3.org/WAI/tutorials/menus/

Or maybe you should consider what most people need and then focus on that. It could be a text-to-speech function on your pages.

Читать больше
Размещено От John S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Claudiu Baron
Hello, I would like the site to be accessible for people with disabilities. I could do this with WebSite X5 Evo? Something like this  ... ... ... 

(It > En) ... not as per your STAMP, ...and in addition to what you were told before, ...you can also do it yourself without any particular skills and quickly, and it would be to prepare with minimal changes a duplicate of the Project/site in high contrast, without backgrounds and with larger characters, and at this point you would be fine...
... the management would be the same as that foreseen for multi-lingual sites...

... + ...  then, if you are interested and/or if you want to try it, there is also my exclusive and very simple EXTRA code that transforms the page as it is in high contrast with a click...
...in this case if you are interested in my code, post me the LINK of your site, otherwise as if not said...

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User

Hallo KolAsim,

ich würde gerne mal diesen EXTRA-Code von dir TESTEN.

Gruß

KLAUS

Читать больше
Размещено От Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

(It > De) ... ... OK ... Ich mache das gerne, aber öffnen Sie Ihr eigenes Thema und posten Sie Ihren Beispiel-LINK, damit wir ihn bewerten können...
... wenn du es geschafft hast, werde ich morgen am späten Nachmittag zurückkommen und wir werden uns dort wiedersehen...
.
ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Claudiu Baron
Claudiu Baron
User
Автор

My web site is ltmcis.ro

Читать больше
Размещено От Claudiu Baron
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

... OK ... my invention, within certain limits, can work for your site...
... this is my EXTRA code to insert in Step_1 in the Expert section in the 3rd(third) option (/HEAD):
<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 = 3;    // seconds delay for code start on page load;
//-----------------------------------------------------------------------------
setTimeout(function(){ //K1>;
font_sizeK = minfsK;
styleK='<style> #cacK{position:fixed;top:45px; left:20px;width:180px !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:22% !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="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="high contrast\nblack ◑ white " >'+
'<img id="piuK" src="https://www.svgrepo.com/show/459979/increase-circle.svg" onclick="piuK()" title="More A(+)" >'+
'<img id="menoK" src="https://www.svgrepo.com/show/459914/decrease-circle.svg" onclick="menoK()" title="Less A(-)" >'+
'<img id="reloadK" src="https://www.svgrepo.com/show/495633/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>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Claudiu Baron
Claudiu Baron
User
Автор

This is great, thank you very much!

Читать больше
Размещено От Claudiu Baron
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

... OK ... ciao ...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User

@KolAsim,

Excellent script. Works like a charm... very powerfull

Thanks

Axel

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

... merci Axel, je suis content que tu partages ton avis positif... ciao ...

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Claudiu Baron
Claudiu Baron
User
Автор

Hello again!

Can be added to the script a button that highlights the links when switching to dark mode or when increasing the font?

Thanks!

Читать больше
Размещено От Claudiu Baron
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

ciao, ...replace the previous code with this new updated code, with the navigator at the top center, and with the links framed in red:

<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 = 3; // 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:22% !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>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User

Great Job KolAsim !!!  kisskiss

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

wink

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Claudiu Baron
Claudiu Baron
User
Автор

Very nice. Can you add just the link highlighting part to the old script?

Thanks alot!

Читать больше
Размещено От Claudiu Baron
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Claudiu Baron
Very nice. Can you add just the link highlighting part to the old script? Thanks alot!

... OK ... add this code:
<script>
$(document).ready(function(){//K>;
/** -- aggiunta class <a> x altocontrasto - by KolAsim -- **/
ritardoK2 = 3;
setTimeout(function(){ //K1>;
styleK2='<style> .classAK{border:2px solid red}</style>';
$("head").append(styleK2);
$("#contrastoK,#piuK").click(function(){//K2>;
$("#imContent a").addClass("classAK");
});//K2<<;
}, ritardoK2*1000); //K1<<; 
});//K<<;
</script>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Claudiu Baron
Claudiu Baron
User
Автор

Thanks!

Читать больше
Размещено От Claudiu Baron