Gambling Commission Website Project

Weeknotes #10

Andy Jones
Gambling Commission
7 min readMay 22, 2020

--

Fortnight ending 22 May 2020

We’ve finished our 10th sprint and we’re now 20 weeks into the project, we’ve done a lot in this time and this edition, we’re going to summarise these last 10 sprints as well as cover off how we’re making our website accessible from the design right through to content.

Sprint update

This sprint we:

  • held a show and tell with an emphasis on how we’re baking accessibility into everything we do. We recorded this one and we invited people from Gov Digital Service (GDS), West Midlands Combined Authority, School of Code and also DVSA.

Slides and Skype video

  • ran an insights and themes session across the team after completing the latest round of user research associated with an online version of our Licensing Conditions and Codes of Practice (LCCP) and gathered up changes for design and content ready for the next round of testing with the industry
  • produced a number of insight documents following recent rounds of user research to ensure this learning can be easily accessed by the team in future projects
  • continued with our moderated remote usability testing around the ‘Who we are’ and ‘Publication scheme’ sections of the prototype

Global Accessibility Awareness Day (GAAD)

Yesterday (21 May) was Global Accessibility Awareness Day and given these weeknotes share the work we’re doing to design and build a new accessible website, we wanted to share what we’re doing to ensure it’s accessible by default.

Global Accessibility Awareness Day

Design

Ensuring what we design is accessible is really important to the design process. We have a set of criteria that we use to check and test against when designing new features and components. They aren’t exhaustive but they are a starting point.

Accessibility criteria

  • must meet WCAG 2.1 AA guidelines
  • not depend on color to communicate information
  • handle cases where user changes their default colours
  • it must be possible to focus on the controls using the tab key
  • the controls must change in appearance when keyboard focus moves to it
  • it must be possible to activate the controls using the appropriate keys
  • the controls must indicate when the mouse is hovered over it
  • the controls must be large enough to tap accurately with one finger
  • form controls must have a text label associated with them
  • the contrast between text and its background must meet (or exceed) a ratio of 4.5:1
  • the mark-up must validate against HTML5 validator

Testing accessibility

We test using several methods, with automated tools, manual checks, with users and we have an external audit done.

We talk about these in our show and tell and there are more details in the slide deck, but though it’s worth sharing how we use an automated tool to do testing.

Pa11y

Pron. Pally is an automated tool, which runs against code and webpages to test against WCAG standards, currently it only validates A, AA and AAA against 2.0 standards, so there is still some manual checks that you need to do when using this. However, it does pick up the basis which can be overlooked.

https://pa11y.org/

Screenshot showing our accessibility dashboard
Our Pa11y dashboard

Contrast checker

Created by Dave House and nick — we use this a lot when creating new components or using new color schemes to check contrast ratios are being met, it’s a brilliantly useful tool and is now my go to tool for checking contrast ratios. Get it in your bookmarks bar!

https://contrast-checker.glitch.me/

Screenshot of the Contrast checker tool

User research

Up to this point user research has been busy planning the research we need to undertake, getting the support mechanisms in place to ensure research is as seamless as it can be for our users and completing rounds of research.

Support mechanisms is quite a generic term but has included:

  • engaging with agencies around participant recruitment and ensuring they understand our requirements and expectations when it comes to getting individuals involved in our research
  • ensuring we have the right technologies in place to reach out to users far and wide
  • creating and reworking our information sheets and consent forms respectively, so that users are fully informed before getting involved in our research
  • creating discussion guides so that we can ensure that the user researcher and user have a positive experience and achieve their outcomes

Throughout we have ensured that the user research we do has been a ‘team sport’. This means that the wider project team have been involved in determining research learning objectives, observing and note taking during the research sessions as well as, theming up insights after the research rounds have been completed.

Miro board showing screenshots, comments against these screenshots and sticky notes related to observations.
Collaborative tools such as Miro have helped us to ensure user research remains a ‘team sport’, with the team using research markup boards to take session notes then identify insight themes

All this teamwork has ensured that we are building a website that meets the needs of its users and supports them with their outcomes. After completing rounds of research decisions of what needs iterating will be based directly on the insight themes that have emerged from the feedback provided by our users.

User research and determining the understanding

To coincide with GAAD, I’ve been thinking a lot about how our user research is helping us to meet our accessibility requirements. When someone asked me this very question the other day, I immediately answered with… ‘it’s determining the U in POUR of course’.

POUR is the acronym for the four high-level principles that describe functional accessibility and stands for Perceivable, Operable, Understandable and Robust. Read Nozi Nindie’s article entitled ‘Making Accessibility accessible: The POUR Principles’ if you would like to delve into these principles further.

We need to determine if our website appears and operates in a predictable way or if content is understandable to those users that may find themselves on it. This can only be determined through user research.

Screenshot of a webpage in a prototype and a moderated remote usability testing session commencing
Moderated remote usability testing research session in progress

As we plan our user research and identify user groups to include in our research, we always ensure we include those users that require assistive technologies when using websites. Within our User Research Participation Programme, where individuals can register to be involved in our research, we specifically ask questions around whether the registrant uses any assistive technologies and also how confident they feel with technology. We will then look to include these users in our user research if appropriate to do so.

We have also recruited a number of individuals to be involved in our user research via a recruitment agency. Within our recruitment brief, we specified that we wanted to run a number of research rounds with users that use assistive technologies and would be likely users of our website.

To ensure that those research sessions with users that use assistive technology run seamlessly, we acquired technology to enable us to complete these remotely. We made the decision to perform these remotely as we wanted the user to firstly feel completely comfortable in their own environment but also, to enable them to use their own assistive technology setups. We felt we could never replicate this setup if we held these sessions face-to-face within a neutral environment for example.

We always get together to ensure our learning is up-to-date in relation to the participant and their user group before we commence our research sessions. This is especially important when we complete research with users that use assistive technologies or may have additional support needs. Preparation for these research session are key in ensuring that they run smoothly for all concerned.

All our users need to be able to understand how a webpage appears, operates and the content that is displayed upon it. User research is helping us determine this understandable element of accessibility.

Content

We want to make our content accessible for all.

We’ve been making progress, adding lots of new content and also re-working existing copy from our current website. In our accessibility-themed show and tell, we shared how we’ve been making our content accessible.

Structure

We’ve been using Wave software to check our content for accessibility issues directly from our browser. This has been really important for checking the way we use headings is correct and consistent throughout the site. Well structured content supports all our users, including those using assistive technologies. Tara shared this example during our show and tell.

A screenshot of testing one of our webpages with WAVE

Language

We want to use the language our users are using. This makes our content easier to understand and easier for our users to search for what they’re looking for. Our content editor Hannah talked through how she’s used this approach in our interview guidance, and other content to help prospective employees.

Using white space

We want to avoid using big blocks of text. Instead, we are using bullets, lists and headings to break up our content. This can help make our content better for our users with dyslexia (around 1 in 10 people in the UK has some degree of dyslexia). It also has benefits such as helping users who might need to translate. This is particularly important, as we know our industry users are often using English as their second language.

Want to talk to us?

Leave us a comment on this post or email us

--

--

Andy Jones
Gambling Commission

Head of Design in Department for Education. Previously, Service and Interaction design lead at the Gambling Commission.