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.
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 that I have worked with for many years, and have managed to write about quite a few times. There are sixteen collected together for you below.
Understanding the Difference Between <b> and <strong>. Understanding the Difference Between
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.
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.
