Simplified WCAG 2.1 guidelines
24th December 2022
A micro site dedicated to help and train developers in resolving Accessibility issues.
webSemantics – forefront-enders
Part-time obsession – full-time profession giz a job!
No templates, boilerplates, or dinner plates. No frameworks, no libraries, no Wordpress, just keyboard press – old school.
Mike Foskett —
Latest and er… greatest?
Escaping HTML
3rd April 2020 (incept: 24-02-2020)
Replaces the characters: < > and & with HTML entities < > and & to facilitate embedding code examples into a web page.
Circle of Fifths: Interactive SVG chord wheel
21st January 2020 (incept: 17-10-18)
Find the guitar chords of most common keys using an interactive chord wheel. Built as an SVG representing the Major / Ionian scales.
Match element heights along a CSS grid row
17th June 2018
Maintains a consistent visual layout across a CSS grid-row when content size/length is variable in each grid-item. Image, heading and copy elements in each grid-item have their height dynamically adjusted across each grid row.
Vignette & brightness hover effect
28th July 2018 (incept: 17-02-2018)
Concentrates user focus on the central area. Values are individually set in the HTML allowing for fine control in a production environment.
HTML 5.2 dialog element
28th July 2018 (incept: 08-01-2018)
Trialing the new HTML 5.2 dialog element. JavaScript applied to work on any ES6 browser without dependencies.
Leading the popular front
Font size conversion: pixel-point-em-rem-percent
19th May 2020 (incept: 07-04-2010)
Freely convert between pixels (px), points (pt), ems or rems, and percent (%) values. Primarily for font-sizes and media queries. Calculator and chart provided.
Fluid-responsive property calculator
12th February 2023 (incept: 03-03-2017)
Easily generate fluid-responsive property (e.g. font-size) values for embedding directly into your stylesheet.
SVG to CSS background-image converter
22nd January 2020 (incept: 22-06-2016)
Reformat SVG images to URIs for use as, cross-browser, CSS background-images in your stylesheet.
Image to data-URI converter
24th February 2020 (incept: 28-01-2010)
Convert images to base64 data-URIs for embedding as image URLs directly into HTML or stylesheets.
Freshly twiddled
Displaying code in a web page
3rd April 2020 (incept: 25-01-2016)
Easily add example code to your web page. Handles JavaScript, CSS, HTML, and PHP, Beautifully semantic. Minimum fuss–Maximum effect.
Centring vertically and horizontally in CSS
20th May 2020 (incept: 31-07-2017)
Centring both vertically and horizontally, using various CSS methods, with support down to IE9.
A11y-oop!
FAQ using WAI-ARIA roles to meet WCAG 2 level AA
19th March 2017 (incept: 19-08-2016)
Semantically correct FAQ with animated show-hide accordion style. Vanilla JavaScript toggles ARIA attributes which are animated via CSS. Questions may be set open on-load or via a URI fragment.
Crop copy then restore on-click
18th March 2017 (incept: 23-01-2017)
Responsively crop your content copy down to a user-defined number of lines. Click to fully restore the content via a sliding drop-down animation. All delivered in an accessible manner.
Social links and email client: