Intro, about me and the talk.
This is my experience of websites using Sliverstripe CMS. Making them bilingual and accessible.
I’ve been interested in software form a young age, when my uncle bought me a ZX Spectrum. I didn’t actually get into software development until much later, only 3 years ago, I installed a software package called REDCap and decided it would be good to learn how to write some code to access the APIs.
I’ve worked at a public sector company since July 2021, just are the start of the Covid pandemic, so this is been an interesting year. So I’ve been a professional software developer for 1 year.
I Wanted to share the first programmer I had ever written in Spectrum BASIC on that ZX spectrum. This programme would print “Hello” down the screen. There are two items to point out about this code.
it is a continuous loop,
the other interesting information is there is no world as this programme was written 10 years before the Internet was invented by sir Tim Berners-Lee
My talks covers four areas, as a public sector organisation in Wales, we have to comply with Welsh government legislation around Bilingual content and we are required to aim for Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.
This 30 minute talk will go over the tools we use and how we use them, but it will not deep dive how to fix individual problems. More resources will be supplied at the end with details on how to gen up on accessibility in particular.
This is how we do it, how we have built up a base site with accessibility built in.
Our tech stack is nothing unusual to the participants of StripeCon EU, we use a LAMP stack with either Silverstripe CMS or Laravel. I wanted to quickly show this as we do not use anything special on out site to make them bilingual and accessible.
Responsive design is also important, but my talk is not about responsive design…
Mobile first frameworks like bootstrap make responsive design easy, but we have to still check for accessibility ourselves.
They can help in many of the areas of accessibility, such as the ability to navigate using a keyboard.
All our sites have to comply with GDPR too, they all display a warning about cookies and give the option to not be tracked.
English and Welsh are of equal standing in Wales,
all our website must be bilingual and Welsh must be equal to English.
We have a local selector to switch between English and Welsh.
To help us we have a Welsh translation department, who can translate the English from the website into Welsh.
Silverstripe CMS makes it easy for page content to be translated using the fluent plugin.
We use the t translation module built into Silverstripe CMS for Elements in forms or Silverstripe templates
Fluent plugin is available from tractorcow-farm.
Require using composer
Add yml file (if you want a default local)
dev/build
Add localisation under admin settings
create a localisation for each language
We can then switch each page,
This will be changed following the talk yesterday, to the yml file.
---
Name: myfluentconfiglocal
After: '#fluentconfig'
---
TractorCow\Fluent\Model\Locale:
default_records:
en:
Title: English
Locale: en_GB
URLSegment: en
IsGlobalDefault: 1
cy:
Title: Welsh
Locale: cy_GB
URLSegment: cy
For controllers with Form which are displayed on pages we use the _t function
For silver stripe views the <%tsyntax is used.
For Silverstripe templates the <%t … %> template is wrapped and slightly different templating format
Once ready we can run the i18nTextCollectorTask to generate the en.yml file.
New content can easily be identified, using git, as they are new lines, which can be sent for translation.
Once ready we can run the i18nTextCollectorTask to generate the en.yml file.
New content can easily be identified, using git, as they are new lines, which can be sent for translation.
php.DashboardPageControllerDASHBOARD
You missed out the dot before DASHBAORD
In the latest Welsh census 1/5th of the Welsh population advised they had some form of disability.
This could be a temporary disability or impairment, like a broken arm or more long term.
It is important that website are accessible to all, there are reports of people who had to do on line shopping being unable to checkout, as the checkout button wasn’t accessible.
Here are some examples of what we do to make our sites accessible.
Keyboard users can navigate every element on our site. This can start with pressing the tab key, on page load to jump to the main content.
Titles can also be important to convey additional meaning.
Html needs to be semantically correct H1 > h2 > h3 to allow navigation.
Here are some examples of what we do to make our sites accessible.
Visually impaired people can see focus rings around the content they are navigating
Forms are clearly defined labels, to reduce confusion
Labels have more meaning, send message instead of send.
Each time a new site is developed the improvents are feed back into our base site, making it better and better starting point.
We use tools to help us confirm our site are accessible.
Lighthouse is built into google Chrome, the accessibility tools are powered by axe.
Axe have their on plugin, which allows more detailed explanation of faults.
WAVE also adds another perspective.
Finally some of our site are spot checked by a third party.
Lighthouse can be accessed from the inspect dev tools, right click the webpage and select inspect. and select the Lighthouse tab. Sometimes this is behind a drop down list.
Tick the box for Accessibility and a report will be generated.
It does take time and skill to go through this report and fix the issues. More details on this at the end.
Install the Chrome plugin
Access via the axe Dev Tools menu item in Developer tools (Inspection).
Right click to see the inspect.
WAVE is a plugin available for Chrome or Firefox.
https://webaim.org/resources/contrastchecker/
Did you know the badges and pills used by bootstrap are not accessible? E.g. badge-info is
Now it's time for a demonstration this does get a little bit technical and low level
Who recognises this site? This site is really simple you would think the accessibility rating was high, so let's take a look.
It's important to open the dev tools in an Incognito mode tab so other plugins are not affecting the accessibility rating of this site
Some may be surprised to see an accessibility score of 80 out of 100. The next thing we need to do is have a look to see what is causing the drop in accessibility, this is just a case of scrolling down and viewing the items that have been highlighted
As we can see there are two items one to do with contrast background or foreground colours do not have sufficient contrast ratio .
Best practises uses scalable no is used in meta name view port.
The next thing to do is to expand them one at a time and inspect the elements to find out how we can improve.
Expanding the background and foreground colours do not have a sufficient ratio drop down box .
We can see the failing elements are inside the footer of the site these are a kind of bread crumb
Click the A tag to go to the source of that element and inspect the background and colour these can then be put into the contrast colour checker.
We can see the colour of the eight acts in the footer is #999 .
The footer background is #ededed.
These figures can be put into the contrast colour checker and adjusted to find a suitable colour that passes accessibility tests.
https://webaim.org/resources/contrastchecker/
The slider for either the font colour or the background colour can be changed
Now we know that a colour of #6b6b6b is within the contrast ratio required the CSS can be updated
We are now up to 85% accessibility Scroll down and have a look at the next item on the list
This is a HTML element on the meta tag we can look at it and remove uses scalable no
Open page.SS
Open Page.ss
The user scalable zero which is the same as users scalable no, this can be removed and then we can run lighthouse one more time
We have reached 100% score in Lighthouse. This will be An improvement for people with low vision and people who need to scale the website .
Other people will see no difference
There are more items which need to be checked manually it's a case of scrolling down and working through these one at a time
I would highly recommend people open dev tools on their websites and take a look to see what their lighthouse score is. Make a change one step at a time. Changes to footers and headers effect every page.
Making our websites more accessible is going to be better for everybody
Tim advised yesterday on how to improve site SEO by improving performance, I hope my talk today will further help improve SEO and help visitor to your sites have a better experience. Like Tims talk yesterday there are some low hanging fruit. Contrast is an easy item to check. Improvements to headers and footers effect every page on the site.