Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

2017

Latest
Latest
Compare
Choose a tag to compare
@paulrobertlloyd paulrobertlloyd released this 28 Dec 15:44
v2017
36c25c8

This release was largely focused on improving accessibility and usability.

Accessibility

  • Reviewed page source order, moving navigation above the content and replacing the ‘skip navigation’ link with a ‘skip to content’ link (which appears upon focus).
  • Updated heading levels. Was previously using <h1> for all headings but, as we can’t have nice things like the HTML5 document outline, headed back to 2005 and bought back some ranked heading elements.
  • Menu button is now adjacent to element it controls within page source order.
  • Menu can now be closed by clicking outside of it.
  • Ensure document content is set to inert when menu is open. Now ATs can’t access links that lie outside opened menu.
  • Better labelling of controls using aria-label.
  • Updated the .c-summary component so that it contains only two links (one to the article, one to the author), and no longer includes comment count. It previously trapped focus; this has also been fixed, meaning it should be easier to navigate index pages with a keyboard.
  • Removed unnamed SVG images from a11y tree.
  • Added focuable="false" to SVG images to avoid bug in IE11.
  • Removed role="main" from main element.
  • Removed ALL CAPS styling for author name in summary cards. Screen readers tend to mis-pronounce unknown words such as rare names/surnames if they are styled as uppercase.
  • Removed repetitive labelling from labelled navigation landmarks.
  • Replaced generated chevron on .c-continue link with ‘border art’, to ensure chevron isn’t announced by ATs.
  • Support for -ms-high-contrast. Replace/augment box-shadow generated rules with border when Windows High Contrast Mode is active. Changed implementation of summary card so that the folded corner no longer uses border art (which WHCM would incorrectly highlight).
  • Support for prefers-reduced-motion to ensure author images don’t scale upon cursor hover.

Layout

  • Replaced .l-grid with a new .c-listing component, which uses CSS Grid (falling back to Flexbox). This is now used for author and summary listings.
  • Ensure layout adapts to the height of the viewport, as well as its width.
  • Added a max character width to prose copy, removing the need for padding on the right-hand side of .c-section containers.

Performance

  • Load Google Fonts stylesheet directly from HTML, not via a CSS @import.
  • Updated the rel="dns-prefetch" to point to the new location for Google Font assets.
  • Ensure <meta charset> is first item in <head>.

Sponsorship

  • Added sponsorship page template.
  • Created sponsored summary example, with .summary--taken modifier for taken slots.

Miscellaneous

  • Fixed glitchy animation on menu’s ‘humburger’ icon.
  • Added overflow-y: hidden to body to prevent vertical scrolling.
  • Adjusted default size of SVG icons from 24px to 16px so that they appear better if CSS styles don’t load.
  • Removed downloadJSAtOnload function for deferring loading of JS. Using <script defer> instead.
  • Linted JavaScript and fixed issues with the help of XO.
  • Updated dependancies.
Assets 2
Loading