ABCDEFGNOPQR
1
LocationViewColor schemeSeverityDescriptionSuggested fixesEffort to fixReviewed byAuditorIssue/PR
2
Global: BothBoth1 BlockerDecorative shapes overlap section subheadings. Part of the text is covered and unreadable.Make sure icons are always behind text elements in z-index layering. Add a solid background according to theme behind the text. Ideally, apply the solid background on an inline element so it only shows exactly where there is text.

Nice to have: change the width of the elements dynamically based on font size. Container queries. font size min/max/clamp functions.		SAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/457
3
Global: Header navigationLaptop onlyBoth1 BlockerWhen zooming in 200% or more, some navigation items in the mobile menu become inaccessible.

Adjust scrolling styles on `.header__nav--mobile.is-visible` to make sure the whole height of the element’s children is reachable via scrolling. SThibaud ColasSherryhttps://github.com/wagtail/wagtail.org/issues/456
4
Global: Cookie policy modalBothBoth2 MajorThe cookie policy modal is not easily navigable. It has no heading and is identified by non-descriptive link text (”find out more”). Screen reader users typically navigate using headings or links for efficiency. 1. Move the modal container to the top of the document.
2. Use a (visible or hidden) heading element.
3. Use descriptive link text that works out of context.
4. Add auto focus on the modal container.		MAlbina Starykova (VoiceOver MacOS)Sherryhttps://github.com/wagtail/wagtail.org/issues/460
5
Global: FooterBothBoth2 MajorWHCM: Social media icons are not using the correct color (linktext)Override the icon color with CSSXSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/454
6
Global: Header navigationMobile onlyBoth2 MajorLinks within the toggle menu are being announced with "minus" because of the <span class="u-sr-only">-</span> element.Investigate alternative techniques to better support block-level links across all screen readers.

https://www.nomensa.com/blog/how-build-accessible-cards-block-links/		MAlbina Starykova (VoiceOver MacOS)Sherry
7
Blog page: Mobile onlyBoth3 ConfusingURLs directly as link text do not reflow correctly when there is text resizing or on mobile sizes.Replace URLs in rich text content within descriptive link text, for all pages where this happens

AND Introduce validation rule within the site to prevent people from saving content with URLs as link text		SThibaud ColasSherry
8
Blog page: Code blockMobile onlyBoth3 ConfusingParts of code do not reflow correctly when there is text resizing or on mobile sizes.SThibaud ColasSherry
9
Blog page: Code blockBothBoth3 ConfusingInsufficient color contrast in syntax highlighting for code.1. Increase the contrast in the current syntax theme
2. Add support for multiple themes
3. Add a way to view code snippets outside the site

Possibily in addition: research best practices for code color contrast		MThibaud ColasSherry
10
Blog page: Code blockBothBoth3 ConfusingWHCM: Code blocks should have a clear separation from regular content.SAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/454
11
Features: BothBoth3 ConfusingNon-consecutive heading level used (h2 to h4). Heading levels should not be skipped and should be built with consistent hierarchy.Use appropriate markup for heading levels and avoid skipping levels in the hierarchy (e.g., <h4> and <h2> headings without having <h3>)XSThibaud ColasSherry
12
Global: BothBoth3 ConfusingHeadline and hero blocks use heading elements right after other heading elements. This pattern should be avoided.SThibaud ColasSherryhttps://github.com/wagtail/wagtail.org/pull/458
13
Global: BothBoth3 ConfusingIncluding alt text for images within a component that already has a descriptive <figcaption> is redundant. This is confusing for screen reader users, since they'd hear the same information twice.Omit alt text for images within components that already have a descriptive <figcaption>. Screen readers will prioritize the <figcaption> content.SAlbina StarykovaSherry
14
Global: BothBoth3 ConfusingComponents with dark backgrounds arent rendered correctly in print. The text appears gray instead of black. Override CSS in print stylesheet (background: transparent, color: black)SAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/461
15
Global: Header navigationBothBoth3 ConfusingThe CTA link within sub-navigation panel has a focus border only on the left side. Focus border should be applied to the whole perimeter or at least be more noticable.Change `.nav-cta` to use an inner outline offset: `outline-offset: -10px`.XSAlbina StarykovaSherryPR
16
Global: Header navigationLaptop onlyBoth3 ConfusingWhen hovering over links in the sub-navigation panel, it becomes hard to tell which specific link will be selected due to the entire panel displaying a mouse pointer.Remove cursor: pointer from .primary-nav__item classXSThibaud ColasSherryPR
17
Global: Header navigationMobile onlyBoth3 ConfusingWhen opening the mobile toggle and navigating through all links, the main page content is still announced by the screen reader, even though it is visually hidden.Thibaud talk to Albina. aria-hidden on page content or inert attributeMAlbina Starykova (VoiceOver iOS)Sherry
18
Global: Sign up formMobile onlyDark mode3 ConfusingInsufficient color contrast between sign up button text and envelope icon in the background.XSThibaud ColasSherryhttps://github.com/wagtail/wagtail.org/pull/458
19
Home page: BothDark mode3 ConfusingWHCM: "Royal College of Art" logo image isn't visible.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/463
20
Global: CTA buttonBothLight mode3 ConfusingWHCM: Arrow icon isn't visible when hovered.XSSherryhttps://github.com/wagtail/wagtail.org/issues/454
21
Global: FooterBothLight mode3 ConfusingWHCM: All social media, “sponsor wagtail”, and “contribute code” icons aren't visible.MAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/454
22
Global: Header navigationBothLight mode3 ConfusingWHCM: Close icon in the search modal isn’t visible.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/454
23
Global: Header navigationMobile onlyLight mode3 ConfusingWHCM: Menu toggle isn't visible.XSSherryhttps://github.com/wagtail/wagtail.org/issues/454
24
Global: Header navigationBothLight mode3 ConfusingWHCM: Arrow icon within CTA link in sub-navigation panel isn’t visible.XSSherryhttps://github.com/wagtail/wagtail.org/issues/454
25
Home page: BothLight mode3 ConfusingWHCM: Copy icon in "pip install Wagtail" button disappears when clicking on it.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/issues/454
26
Global: Mobile onlyBoth4 Minor"Skip to main content" link is being announced by the screen reader, but it's not visible or accessible.SAlbina Starykova (VoiceOver iOS)Sherry
27
Global: BothBoth4 MinorInsufficient color contrast for arrow icon within signup and search form components.XSAlbina StarykovaSherry
28
Global: BothBoth4 MinorNumerous instances where complex images (screenshots containing graphics and
text) use undescriptive alt text.		1.Use text descriptions that describe both the graphics and text that the image contains, using the "alt" attribute.
2. Implement a constraint on the site that would prevent editors from using unhelpful words like "screenshot," "photo of," or "image of" when writing alt text.		SAlbina StarykovaSherry
29
Global: BothBoth4 MinorOnly important iconography and images should be retained for print.Consider applying a grayscale filter to these elements to increase their contrast / print in black and white.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/461
30
Global: BothBoth4 MinorIn-line href attributes should be used in print so that users are aware of destination of each link.@media print {
a::after{
content: " (" attr(href) ") ";
}
}		XSSherryhttps://github.com/wagtail/wagtail.org/pull/461
31
Global: BothBoth4 MinorInteractive content such as header navigation elements (search, menu toggle), sign-up forms, and videos should be hidden for print.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/461
32
Global: Comparison tableBothBoth4 MinorTable header is empty.If the table has an empty header cell, it shouldn’t be marked up as an empty <th> element. Use an empty <td> instead.

Table column headers (first row in bold) should be semantically marked up as <th scope="col">

Table row headers (first cell in bold) should be semantically marked up as <th scope="row">		XSThibaud ColasShubham Oulkarhttps://github.com/wagtail/wagtail.org/issues/318
33
Global: FooterMobile onlyBoth4 MinorFooter link announced as "Contribute code 2-0-0 plus contributors in 2022, 200+" instead of the intended "Contribute code, two hundred plus contributors in 2022"SAlbina Starykova (VoiceOver iOS)Sherry
34
Global: Header navigationMobile onlyBoth4 MinorScreen reader announces “Enter a search term, search text field. Search” even when the search modal isn't being displayed.MAlbina Starykova (VoiceOver iOS)Sherry
35
Global: Header navigationLaptop onlyBoth4 Minor"Give Wagtail a go" text should be a heading in the "Get Started" modal.Use an appropriate heading level. Perhaps <h2>XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/458
36
Global: Header navigationLaptop onlyBoth4 MinorCTA link within sub-navigation panel isn't identifiable as link due to the arrow icon being hard to see.Make sure the arrow is more distinguishable from the background (change color, or fill the arrow)XSThibaud ColasSherryhttps://github.com/wagtail/wagtail.org/pull/455
37
Global: Header navigationBothBoth4 MinorThe fieldset element should not be used for the search form as it's not grouping several form inputs. XSSherryhttps://github.com/wagtail/wagtail.org/pull/458
38
Global: Sign up formBothBoth4 MinorScreen reader announces "Enter your email address. Enter your email address, edit, required. Enter your email address"Consider reading through https://www.w3.org/TR/accname-1.2/#mapping_additional_nd_te

Consider replacing label element with aria-label. Consider changing the label to something shorter ("Email"), if we are ok with visible and screen reader label to differ.

Try different variations in a CodePen, report findings

https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html
https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html		MAlbina Starykova (VoiceOver MacOS)Sherryhttps://github.com/wagtail/wagtail.org/pull/458
39
Global: Sign up formMobile onlyBoth4 MinorDecorative icon positioning needs improvement for mobile devices. The icon is hidden behind the form field and button.SAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/458
40
Home page: BothBoth4 MinorThe copy icon in "pip install wagtail" button is undersized.SThibaud ColasSherry
41
Global: BothLight mode4 MinorInsuffient color contrast between page section headings/subheadings and decorative shapes in the background.XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/458
42
Global: CTA buttonBothLight mode4 MinorInconsistent transition speeds between CTA button heading, subheading, and icon..cta__title {
color: var(--color--interaction);
margin-bottom: 10px;

//remove transition
transition: color .25s ease-out;
}		XSAlbina StarykovaSherryhttps://github.com/wagtail/wagtail.org/pull/455
43
Global: BothBoth6 FYI onlyInconsistency in the markup for listing features - presentational listing of Wagtail's features is being marked up using the <ul> tag. However, in the "Advanced enterprise workflows" section on the features page, <div class="grid"> is used.Use the <ul> tag for the case of feature listings.SAlbina StarykovaSherry
44
Global: BothBoth6 FYI onlyImage link contains both alt text and surrounding link text.Could review each instance individually or ensure that when creating links the link text is descriptive enough on its own.SAlbina StarykovaSherry
45
Global: BothBoth6 FYI onlyThe site uses more than 3 to 4 links per page, so it's a good idea to display a visited link state. This helps individuals with short-term memory loss by indicating which content they have already visited. Also, it is helpful for long pages when viewed on small-screen devices. SThibaud ColasShubham Oulkar
46
Global: FooterLaptop onlyBoth6 FYI onlyUndersized target size of 21px for footer navigation links.Increase the target size to minimum 24x24pxXSAlbina StarykovaSherry
47
Global: Header navigationLaptop onlyBoth6 FYI onlyButton dropdowns used to open sub-navigation panels use aria-expanded properties but do not use aria-haspopup.Use aria-haspopup="true" to indicate to screen reader users that they can expect a submenu to be opened when the button is clicked.XSSherry
48
Global: Header navigationBothBoth6 FYI onlyThe Wagtail logo svg is not announced by screen reader. It should be announced as an image that conveys the company logo.Use an alt text attribute that indicates it's the logo of the company. For example: "Wagtail CMS logo".XSAlbina StarykovaSherry
49
Global: Sign up formBothBoth6 FYI onlyMultiple elements referenced with the same id attribute: emailUse a unique id for each instance of the sign up form (in main content and footer)XSThibaud ColasSherry
50
Global: Sign up formBothDark mode6 FYI onlySign up button background changes to white on hover. This makes it hard to distinguish input field and signup button as it looses contrast.Make changes in the hover effect similar to light mode buttons or make changes similar to dark mode button (see signup button from footer)
OR add a border for sign up button in dark mode so that it's more distinguishable.		SThibaud ColasShubham Oulkar
51
Global: Laptop onlyLight mode6 FYI onlyHovering the skip to main content link, the text is invisible.XSThibaud ColasSherry
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100