benjystanton

HTML head

• https://www.matuzo.at/blog/html-boilerplate/
• https://htmlhead.dev/

benjystanton

Accessibility tests

• WAVE
• Axe
• HTML
• JS off
• CSS off
• Grayscale
• Invert colours
• Keyboard

benjystanton

Browser testing

• Windows 7 Edge
• Windows 7 Internet Explorer 11
• Windows 7 Mozilla Firefox
• Windows 7 Google Chrome
• macOS Google Chrome
• macOS Safari
• macOS Mozilla Firefox
• iOS Safari for iOS

benjystanton

Typography

• https://css-tricks.com/accessible-font-sizing-explained/
• https://www.smashingmagazine.com/2021/04/designing-developing-fluid-type-space-scales/
• https://css-tricks.com/accessible-font-sizing-explained/
• https://www.benjystanton.co.uk/blog/how-improving-typography-can-help-us-to-meet-user-needs/
• https://www.benjystanton.co.uk/blog/accessibility-checklist/
• https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/
• https://adrianroselli.com/2019/12/responsive-type-and-zoom.html
• https://www.theleagueofmoveabletype.com/

benjystanton

Pagination components

• https://ons-design-system.netlify.app/components/pagination/
• https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination
• https://ebay.gitbook.io/mindpatterns/navigation/pagination
• https://moj-design-system.herokuapp.com/components/pagination
• https://component.gallery/components/pagination/#description
• https://www.a11ymatters.com/pattern/pagination/
• https://bbc.github.io/gel/components/load-more/

benjystanton

SVG

• https://mailchi.mp/smashingmagazine/smashing-newsletter-294-svg-generators-and-tools
• https://boxy-svg.com/

benjystanton

Auto-generated social share images

https://twitter.com/piccalilli_/status/1336592837220175872

benjystanton

CSS reading list

I'm looking for tips on updating old codebases, writing maintainable code and testing design changes. https://twitter.com/benjystanton/status/1336640300744380417

Plan

• CSS basics
• Build tools / asset pipelines (e.g. Gulp)
• Visual regression testing

benjystanton

ARIA Landmark roles and HTML5

… there are still support gaps in browsers and screen readers for exposing some landmarks. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information.

Further reading

• https://www.a11yproject.com/posts/2013-01-14-aria-landmark-roles/
• https://www.scottohara.me/blog/2018/03/03/landmarks.html

benjystanton

Testing everything (or not)

• https://twitter.com/OfficeOfWilson/status/1334774453406998528
• https://sanjaypoyzer.medium.com/how-to-find-and-prioritise-your-riskiest-assumptions-4d3729c18795
• https://www.doteveryone.org.uk/project/consequence-scanning/