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.
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.
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.
- 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
keep them closer to their text
- list items (
li) have vertical margins;
increased comprehension by separating items
p:last-childhas no bottom margin;
prevents spacing issues when in elements such as a card
navbaritems have additional spacing;
eases selecting the intended element
codefont size increased to a full
the mono-space font we use does not appear over-sized in comparison with default font
- all link and button text is underlined;
reduces cognitive load as clickable are clearly clickable
- a high-contrast version of our color pallet;
the default colors do not meet enough accessibility standards for contrast
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.