Review and Address issues from Front End Checklist

[murny]

Full list found here: https://github.com/thedaviddias/Front-End-Checklist

Broken down list (for what I think is relevant?) is below:

HEAD

• Put important meta tags at top of page (charset, viewport, etc)
• Truncate long title tags, google wants them to be around 55 characters
• Generate Favicons for different devices/browsers/etc
• rel="noopener"
• Canonical url
• Facebook OG and Twitter Cards
• Need to figure out meta description (with regards to work already being done here Crawler Friendliness & Hardening #483 and we need the copy for the main description)

HTML

• Semantic elements being used
• Linting of HTML, W3C compliant, broken links etc.

CSS

• Website is responsive
• Website tested on various devices: various combinations of desktop, mobile, browsers, operating systems
• Unique Ids are actually unique on the page
• js prefix on css classes
• no embedded or inline css

Images

• Images have been optimized for web (thanks imgbot?)
• width/height set on <img> tag
• alt text being used properly
• Should use a better logo, that has better dimensions

Javascript

• No inline javascript
• Noscript tag?
• Do we need jquery everywhere?
• ESlint?

Security

• Scan and check website using various tools
  • https://securityheaders.io/?q=%09https%3A%2F%2Fera.library.ualberta.ca%2F&followRedirects=on (missing a few headers: Strict-Transport-Security, Content-Security-Policy, Referrer-Policy)
  • https://observatory.mozilla.org/analyze/era.library.ualberta.ca
  • Essentially we should configuring the application to not return unnecessary headers as this keeps information silent and makes it significantly more difficult to identify the underlying frameworks. Turn on secure cookies. Turn on HSTS
• Our SSL certificate has errors: This server's certificate chain is incomplete (Invalid certificate chain)
• Https used everywhere
• checks for CSRF/XSS
• ... more stuff maybe we should be checking?

Performance

• First meaningful paint under 1 sec, time to interactive under 5 secs for average configuration (crappy android phone on slow 3g network) and 2 secs for repeat visits
  • Big suggestion is to use a CDN for javascript/css assets (cookieless domain/cachable/etc)
  • Add headers like " Vary: Accept-Encoding Header", "Last-Modified or ETag " etc.
• Google pagespeed testing, scoring at least 90/100

Accessibility

• Progressive enhancement (major stuff should work without javascript)
  • Everything seems to work except Deposit (as it does a post request using javascript so this 404s)
• Color contrast should pass WCAG AAA
• All pages have an H1 and right order for sub headings (H1 to H6)
• Semantic HTML5 input types are used
• Labels are used (aria-label if label can't be displayed)
• Wave testing done
• Keyboard navigation testing done
• Screen reader testing?
• Focus style?

SEO

• Google analytics
• Structured data
• robots.txt
• Sitemap.xml
• Verify pagination links have proper rel="prev/next"
• HTML sitemap?