c0debabe creates

Bootstrap Accessibility on Veilid.com

I had the honor of designing the website for the Veilid Framework. I used Bootstrap for the CSS framework and had to make some adjustments for accessibility.

Introduction

Bootstrap does a lot to empower accessibility for those willing to invest the well deserved time it takes to create interfaces for everyone. While the tools and features are there, the defaults could be improved.

When I was designing veilid.com, I wanted to make sure theme I made was accessible, as that is one of the key values we want the project to embody: privacy and security for everyone.

I built the site using cecil.app, which can compile your scss files for you. Most of these changes I made by overriding the default variables in Bootstrap's Sass files.

Options Used

One of the thing I want to call out that Bootstrap did a great job on is the new .nav-underline navigation style. It is a easy to see, easy to comprehend styling that does not rely on color to denote navigation position.

Overrides

Space

• base line-height increased;
  line spacing eases reading
• increased the difference between spacers increased;
  strong hierarchy of elements aids comprehension
• headers have a margin-top of 1.3em;
  improve section spacing
• headers have a margin-bottom same as .mb-1;
  keep them closer to their text
• list items (li) have vertical margins;
  increased comprehension by separating items
• p:last-child has no bottom margin;
  prevents spacing issues when in elements such as a card
• navbar items have additional spacing;
  eases selecting the intended element

Size

• code font size increased to a full 1em;
  the mono-space font we use does not appear over-sized in comparison with default font

Lines

• all link and button text is underlined;
  reduces cognitive load as clickable are clearly clickable

Color

• a high-contrast version of our color pallet;
  the default colors do not meet enough accessibility standards for contrast

Conclusion

I'm hoping I polish these idea some more an hopefully submit them as merge requests. I realize that generous spacing like this doesn't always work well in all projects so maybe I will at minimum suggest spacing modes such as dense, default, and spacious.