Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to How we use Silverstripe CMS to deliver bilingual and accessible websites
Similar to How we use Silverstripe CMS to deliver bilingual and accessible websites (20)
Recently uploaded
Recently uploaded (20)
How we use Silverstripe CMS to deliver bilingual and accessible websites
- 1. How we use Silverstripe CMS to deliver Bilingual and Accessible websites Presented by – Michael Pritchard
- 2. Michael Pritchard 2 • Twitter:@MikeAPritch • web: pen-y-fan.github.io • First computer was a ZX Spectrum 48k Software developer 10 PRINT “Hello” 20 GOTO 10
- 3. Agenda 3 • What is the problem? • Why is accessibility important? • What do organization have to do to comply? • What is the benefit for the user?
- 7. GDPR 7
- 8. Bilingual 8
- 11. Translation <%t … > 11
- 13. Disability in Wales 13 Disabled (410k) Not disabled (1,401k)
- 16. Resources 16 1. Lighthouse 2. Axe 3. WAVE
- 17. How to access Lighthouse 17
- 18. How to access Axe dev tools 18
- 19. How to access Wave 19
- 22. Lighthouse 22
- 23. And the score is…. 23
- 24. Contrast and Best practice 24
- 32. Meta 32
- 34. Manual items 34
- 35. Resources 35 • Google Accessibility for developers • https://www.google.com/accessibility/for-developers/ • Webaim WAVE • https://wave.webaim.org/ • Webaim Contrast Checker • https://webaim.org/resources/contrastchecker/ • Google Lighthouse • https://developers.google.com/web/tools/lighthouse/ • Inclusive design 24 – YouTube • https://www.youtube.com/inclusivedesign24/
Editor's Notes
- 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.
- Questions?