I have incorporated accessibility into a range of personal projects, and tickets across the Software Engineering Grad Scheme.
See https://github.com/radiocontrolled/d3-aria-table-chart
https://jira.dev.bbc.co.uk/browse/NEWS-6311
On News companies, commmodities, currencies and market pages, a 'Latest Updates' H2 was present, alonside an offscreen 'Most Recent' h2. This created a P2 accessibility / usability error for AT users listening to these pages. To fix this bug, I created an optional config to suppress the 'Most Recent' h2 in the Morph news-lx-wrapper component and updated the relevant Mozart page configs for companies, commodities and currencties.
Example page free of offscreen 'Most Recent' h2:
https://www.bbc.co.uk/news/topics/crr7mlg0gqqt/apple
Optimo is the next generation article editor from CPS. Building a new web-based editor presents a good opportunity to incorporate accessibility 'from the ground up'. I worked on the beginning stages of its UI in a workstream that focused on Optimo's header. The header is a React component that provides navigation and article creation buttons.
The first way I incorporated accessibility into this workstream was by adding ARIA support to an Optimo dependency. Optimo's header implements the header provided by int-gel-matter. Int-gel-matter is a bare-bones library of React components with the GEL 'look and feel'. Through manual testing I observed the int-gel-matter header was missing ARIA support, so I added this support:
PR: Add optional role attribute to AppHeader
https://github.com/bbc/int-gel-matter/pull/133
PR: AppHeader aria label
https://github.com/bbc/int-gel-matter/pull/141
The second way I incorporated accessibility into the Optimo workstream through knowledge sharing. In February 2018, I presented a CPS tech session walkthrough of the Optiomo header's accessibility features, including
- keyboard accessibility
- buttons with appropriate contrast on hover/focus states
- ARIA landmark roles
- ARIA support in the int-gel-matter header
In the course of this ticket, which I pair programmed with Olivier Huin, I ensured appropriate colour contrast of home/genre information added to Vivo Dashboard, and implemented this change:
https://github.com/bbc/vivo-client/pull/547
In Visual Journalism I worked on a range of bespokes. Across this work, I experimented with the use of ARIA roles, undertaking testing against BBC News accessibility guidelines where possible. A key point of reference apart, apart from these guidelines, was the Paciello group's suggestions for working with SVG accessibility around identifying SVGs with role="img" and using aria-labelledby to reference title and desc elements (this approach may be superceded by other techniques). Some examples of where I did this work include:
- Does your job pay less than it did five years ago?
- How the 100m record has fallen over time
- Poll tracker: How the parties compare
So for example, the Usian Bolt piece is an interactive piece that exposes keyboard operable left/right controls, and makes use of ARIA roles and labelling:
This approach makes it more accessible than a standard D3 chart or animation, but what successes and lessons should be drawn from this example that might be applicable to future bespokes and reusable UI components?
After my rotation, I concluded the above approaches require more thorough testing that wasn't possible to due news deadlines. This has led to my current investigation of d3 charts and ARIA. Aside from bespokes, I also looked at the keyboard accessibility of the VJ facewall and various VJ components incorporating best practices into my development work.
I demonstrated the modal window that pops up for iPlayer Radio's mandatory sign in feature was not accessibile as it was:
- not operable for keyboard-only users
- had a keyboard trap
- had innappropriate contrast
To address this, I incorporated https://github.com/edenspiekermann/a11y-dialog as a dependency of the MSI feature and the addressed other accessibility bugs.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent