The CivicPress Advantage for Accessibility

Designed to align seamlessly with the US Web Design System, CivicPress ensures compliance with the government’s most rigorous design standards for consistency, accessibility, and exceptional user experience. Our platform is built on the foundation of making information accessible to everyone.

By embracing the comprehensive guidelines outlined in WCAG 2.2, CivicPress goes beyond mere compliance to offer a tool that simplifies the creation of websites that are visually cohesive, functionally robust, and accessible to all users, regardless of their abilities.

Independent Accessibility Audit – February 2024

In December 2023 Lone Rock Pont contracted Equal Made, LLC of Broomfield, Colorado to conduct an accessibility audit of the CivicPress WordPress theme. The intention of Equal Made’s audit were to assist in ensuring that website code and content meet WCAG 2.2 success criteria.

Equal Made delivered its audit report in February 2024. This report identified 34 accessibility issues requiring remediation.

The CivicPress development team has remediated 20 of these issues. The remaining 14 identified issues are outlined in the table below.

Known Accessibility Issues – March 2024

wdt_ID wdt_created_by wdt_created_at wdt_last_edited_by wdt_last_edited_at User Impact Element Issue Issue description Remediation Approach Remediation Status Guideline
1 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Social links in footer Social links should be inside a Social links should be inside a Wrap the
    for the footer social links in a
WP core issue (cannot wrap social links block inside nav) WCAG 1.3.1 A
2 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:50 PM Critical “How you know” element The “how you know” element has a few issues Instead of being wrapped in a section, it should be wrapped in an and moved outside of the . Change the inside the element to a
. Make the “Here’s how you know” button look more interactive. Add underlines or make it “loo
 Moved out of header and added text-decoration to button. The rest matches USWDS structure. Cannot add custom aria-labels in WP core.
3 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Low The search form in the header nav The search form is not a navigation element Move the search form outside of the WP Core and USWDS Issue (both allow search in nav)
4 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major The search form in the header nav The search form in the header nav needs a label Add an aria-label to the
element, e.g. “Search the website”
 WP Core issue (no custom aria attributes)
5 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:49 PM Major The search icon in the header search form The search icon in the header search form does not have a label The search icon in the header search form does not have a label, so it is currently a graphic without alt text As the icon is decorative, and the button has a valid aria-label, you can set the as decorative by adding aria-hidden=true to the svg element. WP Core issue (no custom aria attributes)
6 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:50 PM Critical The header nav dropdown buttons The header nav dropdown buttons are missing an aria-controls relationship The buttons that trigger the submenus do not have a relationship with the item they are controlling. The buttons that trigger the submenus need an aria-controls=”id of the submenu il element” attribute. The
    s controlled by the need unique IDs to be assigned to the aria-controls. You should also add aria-label attributes to the ul elemen
 WP core issue (no custom aria attributes)
7 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Low Unnecessary aria-hidden attributes aria-hidden=true is unnecessary on
and elements
 aria-hidden=true is unnecessary on
and elements because they’re already ignored because they’re “generic” elements. The only time the aria-hidden=”true” might be necessary is when the
or has been given the meaning of another elem
 Remove the aria-hidden if the element is a ignored generic element. If the element has CSS pseudo content, the CSS content can be hidden to screen readers with the following syntax: [content: ‘\f307’ / ”] May be a WP core or USWDS issue
8 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Elements that are buttons or “look” like buttons The hover and focus styles for these elements do not have enough contrast At an inactive state, the “buttons” have a dark blue. On hover and focus, the blue is only slightly darker. This change of color needs a higher contrast. Examples include the search submit button in the header, and the “Post Comment” button Make the hover/focus blue a much darker blue, or perhaps black. This currently matches USDWS spec for hover states
9 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:52 PM Major Cards The cards are currently in an
    format which is problematic from a semantic perspective
 As each blog post has a heading and text and a link, this is a better situation for an layout vs
    format
 Replace the ul around the blog list with section with a proper aria-label attribute or add a h2 id=”” and add aria-labelledby to the that points to the h2. Ideally, the section needs a heading, in this case an h2, but whether you use WP core issue (does not allow converting query block elements to different html structure) WCAG 1.3.1 A
10 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Cards: “Continue reading” or “click” link for blog When screen reader users navigate to the link, all they hear is “Continue reading”, which has no context for what they will continue reading when they click Add aria-label to the that reads WP core issue (no custom aria attributes) WCAG 1.3.1 A
11 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Collections: Media Thumbnail Similar to issue #17 Similar to issue #17, adjust the markup from a
    format to a
    with and wrap each heading with a
    and the author, date, and term chip in a
WP core issue (does not allow converting query block elements to different html structure) WCAG 1.3.1 A
12 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Collections: Calendar Similar to issue #17 Similar to issue #17, adjust the markup from a
    format to a
    with and wrap each heading and date with a
    .
 WP core issue (does not allow converting query block elements to different html structure) WCAG 1.3.1 A
13 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Latests posts component
    should be wrapped in a
    should be wrapped in a
WP core issue (does not allow converting query block elements to different html structure) WCAG 1.3.1 A
14 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM Major Search results markup Search Results for “test” – CivicPress Demo Similar to issue #17 in the global list WP core issue (can’t change html structure of query) WCAG 1.3.1 A
15 jjtoothman 19/03/2024 03:47 PM jjtoothman 19/03/2024 03:47 PM