Increase font size for improved accessibility

[tomkeays]

Current font size is 12px. I think that was the Bootstrap default size.

Bumping font size to 16px does improve readability and overall impact on the layout of the site is fairly small. Here are two PDFs of screenshots comparing pages at those two font sizes:

• Library homepage
• AskUs page

The one major impact (and possibly the underlying reason for the current font size) is that, at 16px, the banner navigation dropdown menus overflow at a screen width smaller than typical desktop and before the hamburger menu is invoked. We'd either need to drop a menu item or leave it at 12px.

Other concerns:

• most of the 12px size is controlled by the body element
• but the .btn class is set separately to 12px
• need to look at heading sizes, especially h3 (23px) and h4 (17px) to see if they need to be bumped up; if so, do the others need resizing too?
• not related to font size, per se, but form elements probably ought to be set to inherit from the body -- Adrian Roselli suggests:

textarea,
input {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

[tomkeays]

These are a quick pass at the elements that need boosted. Haven't looked to see what else needs attention.

Can test them by adding them to Custom JS/CSS setting in Admin > Look & Feel.

Edit: 2020-02-13

  <style>
    /* Accessibility Enhancements */
    body { font-size: 16px }
    .btn { font-size: 16px }
    #s-lg-guide-header-info h1, .s-lib-header h1 { font-size: 28px }
    .s-lib-box .s-lib-box-title { font-size: 14px } /* these are the h2 */
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    * + h3 { margin-top: 1em; }
    * + h4 { margin-top: 1em; }
    .breadcrumb, #s-lib-bc .breadcrumb { font-size: 13px }
    textarea,
    input {
      font: inherit;
      letter-spacing: inherit;
      word-spacing: inherit;
    }
    blockquote {
      padding: 0px 10px;
      margin: 0 0 20px;
      font-size: 1em;
    }
    .s-lg-small, .s-lib-debug, .s-lib-small {
      font-size: 14px;
    } 
    #s-lg-az-results .s-lg-az-result-title {
      font-size: inherit;
    }
  </style>

[tomkeays]

Dec 20, 2019: I added the accessibility styles above to LibGuides Look & Feel settings. We're closed for the break, so this makes a good time to assess how well it works before rolling it up in the global stylesheet.

[tomkeays]

Global stylesheet now incorporates the increased font size that was prototyped in LibGuides.

• https://libapps.s3.amazonaws.com/sites/20/include/bootstrap-custom.min.css

Some of the domains needed to have the local styles for breadcrumbs removed. LibCal, on the other hand, needed to have a local style for breadcrumbs added.