On this page:
Accessibility and search updates
Between 30 March and 1 June, we worked on a variety of updates for clients with websites on Victoria’s whole-of-government digital platform, Single Digital Presence. Once implemented for the client, we then set up the changes to contribute them back to Single Digital Presence. These changes represent co-contributions made by Salsa and our clients.
Here's a short update on what we've been working on across accessibility and search.
Accessibility
recently committed to auditing its four Single Digital Presence sites for WCAG compliance and contributing these changes back to the platform.
Dynamic page announcement
Traditional multi-page websites treat each web page separately. When you visit a page, then click on a link, the existing page is discarded and the new page is created from the ground up. The screen reader recognises a page change has occurred and will announce it to the user.
Unlike multi-page websites, SDP Ripple/Nuxt is a single page application. This means that a new page only loads once, when you first visit the site. Every link click after that is only changing the state of the existing page, and these different states create a conceptual "page" (with quotes). The screen reader does not know when the state has changed to display a new "page" so it won't announce them. This will disorient the user as they expect upon a link click to be greeted with a new page but, while visually the site has changed, the screen reader has not announced the changes to the user.
This update introduces screen reader announcements on navigation, so when a user follows a link, the screen reader will announce "Page loading", and when the page changes its state to display a "page", the screen reader will announce "New page has loaded".
Page head
Until now there has been a bit of inconsistency with page titles (the title that appears in your browser tab) across SDP pages. Pages that use the Tide.vue template like the Landing Page content type, would automatically set a relevant title based on the content title field, but manual pages that don't use the Tide template -- including search, news and events, sitemap, login, reset, topic tags, 404, 500 and any custom pages -- would require the title to be manually set, and in some cases this wasn't happening.
All templates have now been updated to set a relevant page title using a new store variable: setPageHead. With this new store variable, the title is now set in a consistent manner, and can be dynamically updated as needed. Search page now takes advantage of this by including keywords within the title. If you have any custom pages that use the default Nuxt-provided head() feature, don't worry - this implementation will still work alongside the setPageHead store.
Colour
A new colour system was added. Now Ripple's default colours are set in $rpl-colors-core, and subsites using Ripple can define their own palette in the usual $rpl-colors. Now you only need to define the different colours in your palette, as Ripple will fall back to the defaults. This change also means any new core colours added to the palette won't break subsites!
Part of this change also includes a new dark_neutral_1 colour - for use with checkboxes, radio buttons and numbered accordions.The new colour was added to provide better contrast between element borders and white backgrounds. As this is a new colour, it's important to check the colour works with your existing subsite palette.
HTML validation
A general cleanup of any invalid markup was done to reduce warnings and errors with browser parsers. This includes removing invalid attributes, better use of semantic elements, proper closing of tags, etc.
Social buttons tabbing was improved - only the interactive links will be focused upon a tab.
Image Gallery icons that sit atop images were given an outline and colour update to make them more visible. This change also adds a new SASS utility, rpl_svg_stroke() which provides an easy way to apply an outline to any Ripple icon. A stroke checkbox has been added to the to see how this would apply to the existing icon library.
Search form
On top of accessibility improvements, we also had the opportunity to implement some new functionality.
The Architects Registration Board of Victoria required an external search component on its front site, similar to . Until now, this functionality had to be custom built per site, but with a clear need for other sites to access their own services in a similar way, this functionality has now been made available to all on Single Digital Presence, with a Custom Embedded Search Form.
The new Custom type of Embedded Search Form can be added to the Header Content of a Landing Page. It allows integration with any external search engine that accepts keywords through URL. For example, if you wish the search form to direct users to DuckDuckGo on search, you could set the search URL to:
[SEARCH-KEYWORDS] will be replaced with the search term a user enters, so if a user searches for the term "dpc sdp" they will be directed to .
If you wanted to search the grants with a pre-selected filter on vic.gov.au, you could use the following:
This will the preselect 'Not-for-profit' groups filter and include your search terms.
Other options available for the custom form allow you to set your own placeholder text, and define if you want searches to open in a new window.
What's next?
By contributing these updates back, Single Digital Presence as a whole benefits, as well as all the agencies using the platform. This community approach is a core feature of open source and the benefits it delivers to government. We're currently hard at work on the new Salsa website, which is being built on SDP. We’ll be contributing back one particularly handy feature to SDP core in the near future, so stay tuned!
