Privacy by Design is Not a Cookie Banner
Privacy by design means building safer data handling into platforms, analytics, CRM integrations, and workflows from the start, not relying on banners later.
Articles
Accessibility
A key principle in web development (and one which any front‑end developer should be very well‑versed in), accessibility refers to the practice of making websites inclusive, removing barriers that prevent people with disabilities from accessing or interacting with your website.
Below you will find a subset of articles from my blog specifically about Accessibility. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are eighteen articles collected together for you below.
Privacy by Design is Not a Cookie Banner. 
Understanding the Difference Between <b> and <strong>. Understanding the Difference Between
<b>and<strong>The `<b>` and `<strong>` tags both make text bold, but they serve very different purposes and convey different meaning. Here, I explain these differences.
Rethinking Carousels: Going Around in Circles. Rethinking Carousels: Going Around in Circles
I am not a fan of carousels, although I have built many in my career. Here, I discuss why they hinder UX and SEO, and explore alternatives for engaging content.
Common Accessibility Pitfalls in Web Development. Common Accessibility Pitfalls in Web Development
Accessibility issues often creep in through ordinary front‑end habits. This article covers common mistakes and the fixes that make sites easier to use.
Semantic HTML. Semantic HTML
Semantic HTML explained through meaningful elements, HTML5 structure, header, nav, footer, section, figure, accessibility, and more understandable markup.
Use Chrome's Developer Tools to Track Element Focus. Use Chrome's Developer Tools to Track Element Focus
Use Chrome Developer Tools to track focused elements, debug phantom keyboard focus, improve accessibility testing, and create a useful live expression.
Ethical Web Development: Part II. Ethical Web Development: Part II
Ethical web development part two covers accessibility, inclusivity, WCAG, open source responsibility, and how developers can make safer web experiences.
Changing the Colour of Placeholder Text. Changing the Colour of Placeholder Text
Change placeholder text colour with CSS ::placeholder, including browser defaults, form styling, input states, and accessible use of placeholder copy.
Ethical Web Development: Part I. Ethical Web Development: Part I
As a developer (and especially perhaps as a front end developer) we have a unique responsibility to our users, and to remove unethical practices from the web.
Intercepting Clipboard Events with JavaScript. Intercepting Clipboard Events with JavaScript
Browsers now support the 'copy' element event, which allows developers to intercept and modify content placed onto a clipboard, when copied from their site.
Accessibility in Reusable Front‑End Components. Accessibility in Reusable Front‑End Components
Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Creating a Discernible Name for Icon Links. Creating a Discernible Name for Icon Links
A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.
Hiding Empty Elements with CSS. Hiding Empty Elements with CSS
Hide empty elements with the CSS :empty pseudo‑class, including strict matching rules, whitespace caveats, supported selectors, and practical UI uses.
Disabling Text Selection Highlighting with CSS. Disabling Text Selection Highlighting with CSS
User‑select makes stopping visitors from selecting items on‑page easy, and can be combined with ::selection to capture the browsers where user‑select is absent.
Alternative Text in the CSS content Property. Alternative Text in the CSS
contentPropertyThe 'content' property in CSS is often used to insert graphical elements which ‑ on their own ‑ do not have an accessible alternative text available.
Optimising HTML Markup for SEO. Optimising HTML Markup for SEO
Optimise HTML markup for SEO and accessibility with semantic elements, heading structure, alt text, clean code, anchor text, and crawler‑friendly structure.
