The Google Summer of Code programme has been a great and fun learning experience for me over the past months. The project is aimed at improving the accessibility of Wagtail through the lens of high contrast themes in windows.
The project had two major parts
-
Resolving existing high contrast issues mainly in the Wagtail admin:
Most of the contrast and accessibility issues were present in Wagtail’s styleguide. The issues had to be dealt with in all the themes of the Windows contrast themes to improve accessibility of the Admin for all its users -
Accessibility tests and reporting new issues :
We can divide the tests into two categories: automated and manual. The manual accessibility tests were mostly performed using Chrome developer tools and Windows 11 contrast themes.
The Automated testing was performed using pa11y.
Wagtail is a free and open-source content management system (CMS) written in Python. It is popular among websites using the Django framework.
Windows High Contrast mode ensures a customised user interface that renders data according to the requirements of the user. Though to some users working without WHCM is a better option, many face visual disabilities and as a result, find the UI difficult to navigate. Therefore, to allow all users a satisfactory admin interface, we must ensure WHCM is supported throughout the admin.
Fixed prior issues mentioned in the audits in the UI components, Admin interface, and Wagtail Style Guide, which are described below:
High-contrast mode: buttons with .disabled class look active in high-contrast mode - To resolve this issue, I added a PR that added a @media query in forced-colors for the disabled buttons with certain CSS styles to enable a better disabled look.
Progress Bar not visible in Windows High Contrast Mode- To resolve this issue, system colours were added to the components
The check mark is not visible inside the checkbox in the users section of the Admin in Windows High Contrast Mode - I used media query, forced color: active, and system colours to solve the problem.
The icons in the Styleguide, in contrast, themes were overridden by forced colors, which removed the icon’s original meaning - To achieve the desired result, I commented the media query for forced-colors over the icons. The query was added when chrome was having a bug due to which an override on icons using fill (a css property) was required. Since the bug is removed, we would want to remove the override too
The boxes(help,critical message, and warning boxes) inside the Styleguide were styled oddly, giving visual traffic to the eyes in Windows High Contrast Mode -To resolve this issue, I added three types of borders to the three kinds of boxes and removed any colour from the texts or borders. This provides a distinct look as well as more visual clarity to the viewer in Windows High Contrast Mode.Along with border styling, the issue pertaining to text inside the first box (help box) in lighter modes of high contrast earlier was not visible.
In Windows High Contrast Mode/Forced Colors Mode, Styleguide’s dialogue component lacks a backdrop, thus making it hard to understand where the component is- To resolve this, borders were added to the modal box using forced colours and system colors.
In Windows High Contrast Mode/Forced Colors Mode,tooltip-style "More" dropdowns are missing a border or outline, so it’s hard to tell where the dropdown is - To resolve this I added a transparent border to the component, making it visible only in the contrast themes.
Fixed Linting issues- Linting the changes while making changes on the frontend is important to reflect changes in the browser.
While running npm run lint:format in Windows, a certain error popped up due to some incorrect format of how it was written as a script inside the packages. This was corrected by changing the format of how it was written, particularly for Windows users.
In Windows High Contrast Mode,the field inside the login/password reset form styles of the admin, are invisible - To correct this my suggested change was to add an invisible border around the field boxes or add a media query with system colors for borders. Since this issue was already resolved by correcting the design of the form, my PR wasnt merged.
In Windows High Contrast Mode, in the tooltip-style "More" dropdowns, the tooltip was rendered as a square - To resolve this issue, I tried the following approaches:
- Use clip-path : polygon - It would provide the desired shape shape of an arrow.
- Use
forced-color-adjust: none- Since we didnt want to loose the true form of Windows High Contrast using this was erradicated.
In the admin's info side panel, a few buttons displayed, are in "link" style - To work this out, I had to look into the following aspects:
- The component used a CSS utility framework Tailwind
- Understanding its basic syntax helped in resolving the issue. I added a CSS over the media query using tailwind classes to produce the required outcome
- Since the issue was not just related to this component and was a part of a whole button and anchor class in the website, we decided to freeze this PR and instead added an issue as follows (wagtail/wagtail#9078)
The accessibility testing was done in two parts, one being manual and the other being automated using pa11y. For most parts of the project, we conducted manual testing using Windows Contrast themes and Chromedeveloper tools
Working with Pa11y-For trying automated testing, we preferred Pa11y. Since most automated tests were already performed by my mentor Thibaud in his github repository, (https://github.com/thibaudcolas/wagtail-tooling/blob/main/accessibility/pa11y-test.js) I mostly worked with Wagtail’s Bakery Demo website for testing pa11y. I conducted automated testing on its few pages and found bugs as shown in the below screenshots:
The above issues were reported in the issues of wagtail’s bakery demo repository under the following link :
wagtail/bakerydemo#356
- wagtail/wagtail#8909
- wagtail/wagtail#8719
- wagtail/wagtail#8718
- wagtail/wagtail#8852
- wagtail/wagtail#8853
- wagtail/wagtail#8874
- wagtail/wagtail#8897
- wagtail/wagtail#8729
I intend to improve this project and also use it as a starting point for anyone who would be interested in contributing to it further. A few of the improvements and new features could be the following:
Performing Automated Pa11y testing over the Wagtail’s Bakery Demo Admin interface
Fixes following a Pa11y audit of the bakery site
Extending the contrast improvements to Wagtail’s Bakery Demo site
I had a fun and learning experience while working under Wagtail. I was afraid of asking questions initially, which I overcame to some extent on the whole journey. I loved the Wagtail community, and I got guidance and help whenever I got stuck. I would like to especially thank my mentors, Jane, Thibaud, and Scott, for helping and guiding me throughout the process. I also would like to thank Lb for helping me get comfortable with the open source community during the application period.