Bugcrowd design system: Accessibility

We have two core accessibility commitments:

1. Inclusive design for our current and future users by taking an empathetic approach to a user’s scenario.
2. Complying with the Americans with Disabilities Act by meeting WCAG 2.1 level AA.

We believe the Design system as of writing meets level WCAG2.1 AA compliance.

Practice inclusive design with accessibility provisions for permanent, temporary, and situational needs.

For example, take sight:

• A user could be blind (permanent);
• They could have forgotten their reading glasses (temporary); or
• They might be outside in the sun causing glare off the screen (situational).

Please make use of the UK’s Government Digital Service (GDS) accessibility posters:

You can download all the posters in the one PDF.

There are other language versions available on the Dos and Don’ts posters GitHub page.

These posters are licensed under Creative Commons BY-NC-SA.

Maintain a meaningful reading order

Webpages have three logical orders that should be kept aligned and consistent:

1. Source or markup order
2. Visual display order (across all responsive breakpoints)
3. Tab or keyboard focus order

To maintain a meaningful flow developers should:

• Use semantic markup and structure its source order with respect to the visual design’s logic
• Test that the tab order matches the source order as close as possible
• Avoid altering the tab order from the source order.

Source order can be determined by temporarily disabling CSS.

Color

Color is not to be used as the only visual means of conveying information.

The WCAG 2.0 level AA compliance level requires color luminescence contrast ratios of

• 3:1 for text with a size of 18 points (14 points if bolded) or larger
• 4.5:1 for text with a size less than 18 points.

Type

• Line measures (the width of a line) should not extend more than 80 characters
• Line height (leading) within paragraphs should be at least 1.5 (times the font size)
• Paragraph spacing should be at least 1.5 times larger than the line height.

Our features are more accessible because the web development and accessibility communities share information and best practices. If you do any testing please share your results.

Automated testing

We use pa11y to help test for accessibility within the build pipeline.

In a local development setup, you can also run this yourself:

npm run test:a11y

Excluded tests

Due to technical limitations we have disabled WCAG2 color contrast ratio compliance testing in pa11y.

If you need to track color contrast compliance see the bc-color-a11y() function. The Design system’s color setup uses this function to ensure accessible contrast ratios between fore- and background colors.

• WCAG 2.0 at a glance
• WCAG 2.0 specification
• Primer on ADA compliance
• Introduction to ARIA
• The A11Y Project