Hello,
I am going to be developing a ‘WCAG 2.1 AA’ website for a parish council in the UK.
Has anyone experience in meeting this accessibility standard when making websites using Pinegrow?
Also, what are the main things that will be required in the design of such a website?
I am hoping to use Bootstrap 4 together with it’s component library as it looks clear to read and well designed.
Thank you.
I’d recommend you start here…
Pinegrow does not have any limitations or features that would prevent you from building a WCAG compliant website. Meeting their criteria would be up to you, and how you design/code the site.
Thanks Printninja, it looks like the only problem I will have is providing the ability to resize the text using website buttons. I don’t want to have to make alternative pages for each page although this would be an easy way of implementing this.
Hi there @jim, If I remember right that is a fairly easy to implement action which just changes the default page style CLASS for… text. and then reloads the page, implementing the new style.
This seems like a very nice solution. Possibly Elegent, I’m not sure.
I’ve not implemented it myself but it looks good.
And they User JQuery (Javascript) to alter the text.
…which also means that it wont work if Javascript is disabled on the page.
Thanks for the link.
This seems like the easiest solution here:
<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>
I’ve tested it and it works but it does not work with all the standard bootstrap 4 fonts - just with paragraph text.
Would it be possible to use this to globally change the size of all the fonts on the page?
I will be building the website in Bootstrap 4 and using the default fonts.
Edit: Since the larger fonts are already very legible I have decided to just change the paragraph size when requested. So I have a working solution. Thanks for everyones help.
1 Like
If you define your font sizes in rem units, then you can change all the fonts globally just by changing the font size of the HTML element.
Thanks, all working nicely… I’m going to make a basic template for doing this type of website as I have four to do! I’m looking forward to getting some Bootstrap 4 blocks at some stage.
Apologise guys - but within WCAG, where exactly is it described that we have to share an increase/decrease textsize-button or the like? I’m asking cause I certainly want to create accessible websites as well. To me - this technology is ages old.
Cheers
Thomas
Hello, I think this is a AA requirement (1.4.4) on the page here:
Hi Jim,
OK - thanks for pointing me to it. So some possibilities available.
You know what?
The G142 is the one which is to me hereby the most interesting. Simply use a modern browser.
And the C14 is the most discussable of the ones. I’d never base the font-size unit on ems (which means on each parent container) but always on the root such as @Printninja already pointed out. Subtle said: em or rem should be the new standard.
But whatever: I’d never add those +/- button at all.
Cheers
Thomas
Thank you. It seems that Bootstrap 4 and a modern web browser will work nicely. I may still include the resize buttons so that people that do not know computers very well can still resize the page. I’ve just downloaded some blocks and they work well with the built-in browser resize feature.
Edit: Can you operate the inbuilt browser font resizer from an icon on an html page???
I am now making a WCAG 2.1 AA website for a parish council in the UK. Has anyone seen a good example of a website made using this standard? - so that I can make sure I get the build right first time!
I have now found this template: https://wrapbootstrap.com/theme/accessible-wcag-508-framework-WB022K190