Visibility. Optimization. Compliance.

Digital Accessibility Guidelines

Protocol CSS Accessability Guidelines

Request Consultancy Support ↗

Delivering accessible content digitally

REM font sizing - 1 REM (16px) and higher with 1.6 line spacing. Use system fonts to improve speed and legibility 

This web site is a work-in-progress testing site to develop Wordpress CSS / Email styling optimized for accessibility based on various best-practice principles. We appreciate you will never get accessibility 100% perfect but adopting some of these principles is a great starting point. If you have any suggestions for improvements feel free to contact us

More on fonts ↗

Writing for Dyslexia

Fonts, tone and more

The Dyslexia Friendly Style Guide outlines principles to create written content that considers the needs of dyslexic individuals and promotes readability for all. It advises considering these principles across all written communication forms, including emails, presentations, web pages, and printed materials, and to combine them with other accessibility guidelines such as WCAG.

For fonts, it recommends using sans serif types like Arial, Verdana, and Open Sans in 12-14 point size. Increasing letter and word spacing can improve readability, as can greater line spacing. It advises against underlining, italics, and using all capitals.

Headings should be 20% larger than normal text, and consistent structure should be used to aid navigation. Formatting tools should be used to align text, justify, indent, and manage spacing. Space should be added around headings and between paragraphs, and hyperlinks should be distinguishable.

Backgrounds should be a single color, avoiding patterns, with high contrast between text and background. Dark text on light, non-white backgrounds is preferred. For printing, matte paper is recommended to avoid shine and reduce bleed-through.

The layout should feature left-aligned text and avoid multiple columns. Sentences should be short and simple, and white space should be used to reduce clutter. Long documents should have regular section headings and a table of contents.

The writing style should use active voice and concise language. Images, bullet points, and numbering can support text. Instructions should be clear, double negatives and abbreviations should be avoided, and a glossary for abbreviations and jargon should be provided.

More guidance on Dyslexia →
Explain like I'm 5 years old →

Web safe fonts

Windows 10/11, Apple Mac OSX, Apple iPhone and Android

Web-safe fonts and their availability on various platforms:

  1. Arial: Arial is a widely used sans-serif typeface and system font designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype. It's included on many operating systems, such as Microsoft Windows and Apple macOS, and is also default installed on iOS and Android devices.

  2. Times New Roman: Times New Roman is a serif typeface commissioned by the British newspaper The Times in 1931. As a default font for many years in Microsoft Word, it's available on almost all systems, including Windows, macOS, iOS, and Android devices.

  3. Georgia: Designed by Matthew Carter and released in 1993 through Microsoft, Georgia is a serif typeface. It was intended to be a serif font that would appear elegant but legible printed small or on low-resolution screens. Georgia is included in the font libraries of Windows, macOS, iOS, and Android.

  4. Verdana: An optimally legible, sans-serif typeface, Verdana was also designed by Matthew Carter for Microsoft. Because of its excellent on-screen readability, it's a popular choice for web design. Verdana is available on Windows, macOS, and commonly installed on iOS and Android.

  5. Courier New: As a monospaced slab serif font, Courier New is a version of the original Courier font. Courier New was designed to mimic the look of a typewriter and later adapted for use on computers. It's a default font on Windows and macOS, and is also typically available on mobile devices.

  6. Trebuchet MS: Trebuchet MS is a sans-serif typeface that Vincent Connare designed for the Microsoft Corporation in 1996. It's a standard font on both Windows and macOS operating systems, and also available on most mobile devices.

  7. Helvetica: Helvetica is a neo-grotesque design, deriving from the style of 19th-century typefaces. It's a sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger. It is a default font on macOS and iOS devices but is not typically found on Windows or Android, where Arial is commonly used as a substitute.

Font Family Examples
Arial

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Times New Roman

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Georgia

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Verdana

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Courier New

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Trebuchet MS

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Helvetica

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

1234567890 !@#$%^&*()

Pack my box with five dozen liquor jugs.

Using system fonts

Use this CSS to apply system fonts to your project:


body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, 
    'Oxygen-Sans', Ubuntu, Cantarell, 
    'Helvetica Neue', sans-serif, 
    'Fira Sans', 'Droid Sans', 
    'Arial', 'Georgia', 'Courier New', 
    'Times New Roman', 'Trebuchet MS', 
    'Lucida Sans Unicode', 'Palatino Linotype';
}

Using system fonts can improve speed - and legibility for devices, here's how:

  • -apple-system targets the San Francisco font in Safari on Mac OS X and iOS, and it falls back to the Neue Helvetica and Lucida Grande on older versions of Mac OS X. It does nothing on non-Apple devices.
  • BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.
  • Segoe UI targets Windows and Windows phone.
  • Roboto targets Android and newer Chrome OS. It is also the default font for Google services like Google.com and Google Docs.
  • Oxygen-Sans targets Linux-based KDE devices.
  • Ubuntu targets the Ubuntu OS.
  • Cantarell targets the GNOME-based Linux OS.
  • Helvetica Neue targets pre-El Capitan versions of Mac OS X.
  • Fira Sans targets Firefox OS.
  • Droid Sans targets older versions of Android.

The last fonts, Arial, Georgia, Courier New, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Palatino Linotype are web-safe fonts and serve as additional fallbacks. Lastly, sans-serif is the final fallback to the system’s default sans-serif font.

This list is ordered so that if the user's device doesn't have the first font, it will try the next one, and so on, until it finds one it can render.

Columns are easier to digest large chunks of information

14 words per column recommended

Creating legible and easily readable text content on a website is a multifaceted task, involving many principles from typography and design. One of these principles is the use of columns. Columns help break down content into digestible pieces, making it easier for readers to scan and absorb the content.

Research has suggested that a column width of 14 words, or 50-60 characters, tends to be optimal for readability. When a line of text is too long, the reader's eyes will have a hard time focusing on the text. As they read to the end of the line, it can also be challenging to find the next line without losing their place.

Line height, the vertical space between lines of text, also plays a crucial role in readability. A line height of 1.4-1.6 times the font size increases the whitespace between lines, making it easier to differentiate one line from the next and avoid reading the same line twice.

Breaking text into short paragraphs also aids readability, as walls of text can be daunting and challenging to read. Paragraphs create a logical structure, helping to organize thoughts and ideas and guiding the reader through the text.

Utilizing text features like bold, italics, bullet points, and more can further enhance readability. Bold text is often used for headings or to highlight important information, while italics can be used to provide emphasis. Bullet points are excellent for lists, making the text easier to digest and understand.

All these aspects contribute to improved accessibility, a core part of the Web Content Accessibility Guidelines (WCAG). Following WCAG helps ensure that digital content is accessible to all users, including those with disabilities.

The use of columns, headlines, and other elements to enhance readability and attract attention has been a practice in newspaper design for a long time. Newspapers have learned that the effective use of these elements can guide the reader's eye and make the content more engaging.

In digital design, these elements still hold significant importance. Columns help in creating a visual hierarchy, improving the overall aesthetic of the page, and making the content more digestible. Good use of these techniques leads to better user experience, higher engagement, and ultimately, more successful communication of ideas.

Keyboard Navigation

Setting Tab Indices to help keyboard navigation

Title: Understanding 'Tab Index' for Web Accessibility

'Tab Index' is an attribute in HTML used to manage keyboard navigation among interactive elements on a webpage. It's especially important for users who rely on keyboards or assistive technologies to interact with your site.

There are three main ways we use the 'Tab Index' attribute:

  1. 'Tab Index' set to "0": Elements with 'Tab Index' set to "0" are included in the keyboard tab order based on their position in the HTML document. This is useful for making elements that are not normally focusable (like 'div' or 'span' elements) focusable without disrupting the natural tab order.

  2. 'Tab Index' set to "-1": Elements with 'Tab Index' set to "-1" are not reachable via the keyboard (they're skipped over when tabbing through the page), but can be focused programmatically (like with JavaScript).

  3. 'Tab Index' set to "1", "2", etc.: These positive 'Tab Index' values place elements in the tab order ahead of elements with 'Tab Index' set to "0" or no 'Tab Index', in the order of the 'Tab Index' number.

Best Practices:

Avoid using positive 'Tab Index' values. They disrupt the natural tab order, which can confuse users as the visual order doesn't match the tab order. They also become complex to manage on pages with many interactive elements or when multiple developers are involved.

Instead, rely on the natural tab order, which is the order elements appear in the HTML source code. This makes your website more intuitive to navigate for keyboard users.

If you need to make a normally non-focusable element able to receive keyboard focus, use 'Tab Index' set to "0". If you need to remove an element from the tab order, use 'Tab Index' set to "-1".

When structuring your HTML, aim for a logical and intuitive tab order that follows the visual flow of the page: left to right, top to bottom. If you need to visually rearrange elements, consider using CSS instead of 'Tab Index'.

Remember, a well-structured HTML document can help ensure a logical tab order and improve the overall accessibility of your website.

Example of Tab Index setting

Color design languages

Designing for visual impairment, accessibility and color blindness

Color theory for web accessibility is a crucial design concept that ensures content is not only visually engaging but also accessible to all users, including those with visual impairments and color blindness. When considering web accessibility, it is important to provide a strong contrast between text and background colors to facilitate readability. Also, the choice of color should not be the sole means of conveying information since some users might not distinguish certain hues due to color blindness.

Here are some tips for incorporating color theory in web accessibility:

  • Ensure high contrast between foreground and background colors. A common standard is a minimum contrast ratio of 4.5:1.
  • Avoid using color as the only means of conveying information. Also use symbols, text or patterns.
  • Use online tools to simulate how your design looks to those with various types of color blindness.
  • Design with a color blindness-friendly palette or make use of design techniques that can help distinguish different interface elements even without color.
  • Provide a high-contrast toggle option for users who prefer a higher contrast.
  • Be aware of how colors can be perceived differently across various devices and adjust your color palette accordingly.
  • Leverage web standards such as WCAG (Web Content Accessibility Guidelines) to ensure your site's colors are accessible.

In the following section, we will delve into the different design languages, such as Bang Wong's, and discuss how they address color usage and accessibility.

 

Google Material Design Color Palette:

Google's Material Design guidelines offer a wide range of color palettes with deep attention to accessibility. They also provide clear guidelines on which colors work well together, the psychology of colors, and how to approach color theming in UI design. Each color provides a main shade and nine variations to help developers design accessible and visually harmonious interfaces.


Atlassian Design:

Atlassian's design system uses a palette with two core colors (blue and navy), eight secondary colors (ranging from yellow to teal), and a grayscale for neutrality. Each color is available in different shades to provide contrast and visual hierarchy. Their palette was built with accessibility in mind and avoids using colors that would be hard to distinguish for color-blind users.
U.S. Web Design System (USWDS): This design system, designed for U.S. government websites, focuses heavily on accessibility. They have a simple and clear color palette, with different grades of each color to provide enough contrast and visual hierarchy. They also provide a color pairing tool that makes it easy to create accessible combinations.


Shopify Polaris:

Shopify's Polaris design system offers a palette with a small number of base colors (blue, green, teal, purple, and red), a full grayscale, and variations on each base color. The palette was designed with digital interfaces in mind, ensuring colors look good on screens and are accessible to all users.

Bang Wong Palette:

  • Specifically designed for colorblind people and as a scientific color palette.
  • Includes grayscale, purples, blues, oranges, and browns.
  • Each color group has a variety of shades, allowing for nuanced and detailed visualizations.

IBM Design Language Color Palette:

  • The primary palette is Blue, with nine different shades. Blue 60 is the primary blue.
  • The secondary palette is Gray, with ten different shades. Gray 100 is the primary gray.
  • Supportive palette includes a wide range of colors like Red, Magenta, Purple, Teal, and Green, each with ten shades. The 50 shades are the primary color.
  • Aimed at maintaining a strong brand identity, contrast, and color differentiation for accessibility.

Apple Human Interface Guidelines Color Palette:

  • Offers a system color palette with a variety of colors, each available in lighter and darker versions to use in Light and Dark Mode.
  • Vibrancy adjustments to apply to interface elements for focus and depth.
  • Accessibility adjustments like increased contrast and differentiation, and reduced transparency, to make sure the user interface is accessible for all users.
  • Also includes semantic colors, like label colors, link colors, placeholder text colors, background colors, grouped background colors, and separator colors.

UK Government (GOV.UK) Design System Color Palette:

  • Limited palette with a focus on usability and accessibility. Their main color is a deep, dark blue, used mainly for text.
  • Also includes colors like red (for error messages), green (for success messages), yellow (for warning messages), and a selection of neutrals.
  • Aimed at ensuring maximum legibility and readability.
  • They provide guidelines on color contrast and combinations to maintain the visual hierarchy and meet WCAG AA standard.
  • The design system also discourages using color alone to communicate meaning.
Here's some example palettes for inspiration

Bang Wong Palette

Bang Wong Palette
Orange #E69F00
Sky Blue #56B4E9
Bluish Green #009E73
Yellow #F0E442
Blue #0072B2
Reddish Orange #D55E00
Reddish Purple #CC79A7
Grey #999999
White #FFFFFF
Black #000000
Light Grey #CCCCCC
Dark Grey #777777

UK Government
Black #0b0c0c
Dark grey #6f777b
Mid grey #bfc1c3
Light grey #dee0e2
Yellow #ffdd00
Orange #ffbf47
Red #f47738
Purple #912b88
Green #00823b
Blue #003078
White #FFFFFF

US Government Palette
Navy #112E51
Blue #205493
Light blue #0071BC
Teal #02BFE7
Red #E31C3D
Maroon #981B1E
Gold #FDB81E
Yellow #F9B625
Gray 80 #4A4D53
Gray 50 #D6D7D9
White #FFFFFF
Black #000000

Canadian Government / WET
Dark Blue #26374A
Blue #335075
Light Blue #DFE6E9
Light Blue 2 #D0D6D9
Light Grey #F5F5F5
Grey #616366
Dark Grey #4C4C4C
Red #DF0000
Bright Red #FF0000
Black #303132
White #FFFFFF

IBM Design Language
Blue 60 #648FFF
Purple 60 #7850F7
Magenta 60 #DC267F
Orange 60 #FE6100
Yellow #FFC107
Green 50 #009E73
White #FFFFFF
Black #000000
Gray 100 #393939

Google Material Design Palette
Red #F44336
Pink #E91E63
Purple #9C27B0
Deep Purple #673AB7
Indigo #3F51B5
Blue #2196F3
Light Blue #03A9F4
Cyan #00BCD4
Teal #009688
Green #4CAF50
Light Green #8BC34A
Lime #CDDC39
Yellow #FFEB3B
Amber #FFC107
Orange #FF9800
Deep Orange #FF5722
Brown #795548
Grey #9E9E9E
Blue Grey #607D8B
Black #000000
White #FFFFFF

Adobe Colour Blind Safe
Pink #EB447E
Blue #1648DE
Green #C5E04C
Light Green #D6F078
Light Pink #FC6FCD

Protocol Chart Safe
Orange #f05039
Salmon #e57a77
Dusky pink #eebab4
Dark blue #1f449c
Mid blue #3d65a5
Light blue #7ca1cc
Dusky blue #a8b6cc

Additional typography

Text effects, link states and symbology
Highlighting important text

Mark Tag can be used to this is very important in HTML with yellow color. It doesn't require the use of CSS.

How to use mark html code →
Link strategy

Make links look like links. Visitors are drawn to defined buttons and links, text links in particular benefit from use of obvious underlines and color changes. Remember not to rely on color alone for navigation. Active and visited states can also help user navigation.

This is a link →
ℹ Symbology and iconography

Symbology and iconography can help visually impaired (including color blindness) quickly understand key content, common symbols include:

→ (U+2192) ←(U+2190) ↑ (U+2191) ↓ (U+2193)✓(U+2713)✗ (U+2717) "★" (U+2605) "☆" (U+2606) /"•" (U+2022) "…" (U+2026)ℹ" (U+2139) ↗ (Up-Right Arrow) - &#8599

Featured blocks

Simple feature blocks can draw attention

Make headings obvious

This is a bullet list - very useful for conveying information quickly

  • This is a list of information
  • Bullets are easy to scan read and absorb
  • Great for mobile and summary info

⚠️ Alert : Draw peoples attention with coloured callouts - be aware of color blindness so use other layout options such as indents, unicode icons and boxes

Take mobile-first approach

Build for touch devices and scale up
List of linksAnother visited
Example RSS feed

Table desktop / cards mobile

Color Name Hex Value RGB Value Color Science
Gray 10 #f4f4f4 rgb(244,244,244) IBM
Gray 30 #dcdcdc rgb(220,220,220) IBM
Gray 50 #bfbfbf rgb(191,191,191) IBM
Gray 70 #6f6f6f rgb(111,111,111) IBM
Gray 90 #262626 rgb(38,38,38) IBM
Blue 10 #edf5ff rgb(237,245,255) IBM
Blue 30 #a6c8ff rgb(166,200,255) IBM
Blue 50 #78a9ff rgb(120,169,255) IBM
Blue 70 #0f62fe rgb(15,98,254) IBM
Blue 90 #0043ce rgb(0,67,206) IBM
Teal 50 #00a78f rgb(0,167,143) IBM
Magenta 50 #ee538b rgb(238,83,139) IBM
Purple 50 #a56eff rgb(165,110,255) IBM
Red 50 #fa4d56 rgb(250,77,86) IBM
Orange 50 #ff832b rgb(255,131,43) IBM
Yellow 50 #f1c21b rgb(241,194,27) IBM
Green 50 #198038 rgb(25,128,56) IBM
Cool Gray 10 #f2f4f8 rgb(242,244,248) IBM
Cool Gray 50 #8d8d8d rgb(141,141,141) IBM
Cool Gray 90 #171717 rgb(23,23,23) IBM
Warm Gray 30 #bebebe rgb(190,190,190) IBM
Warm Gray 50 #7f7f7f rgb(127,127,127) IBM
Warm Gray 90 #1c1c1c rgb(28,28,28) IBM
Black (Bang Wong) #000000 rgb(0,0,0) Bang Wong
Orange (Bang Wong) #e69f00 rgb(230,159,0) Bang Wong
Sky Blue (Bang Wong) #56b4e9 rgb(86,180,233) Bang Wong
Bluish Green (Bang Wong) #009e73 rgb(0,158,115) Bang Wong
Yellow (Bang Wong) #f0e442 rgb(240,228,66) Bang Wong
Blue (Bang Wong) #0072b2 rgb(0,114,178) Bang Wong
Vermilion (Bang Wong) #d55e00 rgb(213,94,0) Bang Wong
Reddish Purple (Bang Wong) #cc79a7 rgb(204,121,167) Bang Wong
Color Name
Gray 10
Hex Value
#f4f4f4
RGB Value
rgb(244,244,244)
Color Science
IBM
Color Name
Gray 30
Hex Value
#dcdcdc
RGB Value
rgb(220,220,220)
Color Science
IBM
Color Name
Gray 50
Hex Value
#bfbfbf
RGB Value
rgb(191,191,191)
Color Science
IBM
Color Name
Gray 70
Hex Value
#6f6f6f
RGB Value
rgb(111,111,111)
Color Science
IBM
Color Name
Gray 90
Hex Value
#262626
RGB Value
rgb(38,38,38)
Color Science
IBM
Color Name
Blue 10
Hex Value
#edf5ff
RGB Value
rgb(237,245,255)
Color Science
IBM
Color Name
Blue 30
Hex Value
#a6c8ff
RGB Value
rgb(166,200,255)
Color Science
IBM
Color Name
Blue 50
Hex Value
#78a9ff
RGB Value
rgb(120,169,255)
Color Science
IBM
Color Name
Blue 70
Hex Value
#0f62fe
RGB Value
rgb(15,98,254)
Color Science
IBM
Color Name
Blue 90
Hex Value
#0043ce
RGB Value
rgb(0,67,206)
Color Science
IBM
Color Name
Teal 50
Hex Value
#00a78f
RGB Value
rgb(0,167,143)
Color Science
IBM
Color Name
Magenta 50
Hex Value
#ee538b
RGB Value
rgb(238,83,139)
Color Science
IBM
Color Name
Purple 50
Hex Value
#a56eff
RGB Value
rgb(165,110,255)
Color Science
IBM
Color Name
Red 50
Hex Value
#fa4d56
RGB Value
rgb(250,77,86)
Color Science
IBM
Color Name
Orange 50
Hex Value
#ff832b
RGB Value
rgb(255,131,43)
Color Science
IBM
Color Name
Yellow 50
Hex Value
#f1c21b
RGB Value
rgb(241,194,27)
Color Science
IBM
Color Name
Green 50
Hex Value
#198038
RGB Value
rgb(25,128,56)
Color Science
IBM
Color Name
Cool Gray 10
Hex Value
#f2f4f8
RGB Value
rgb(242,244,248)
Color Science
IBM
Color Name
Cool Gray 50
Hex Value
#8d8d8d
RGB Value
rgb(141,141,141)
Color Science
IBM
Color Name
Cool Gray 90
Hex Value
#171717
RGB Value
rgb(23,23,23)
Color Science
IBM
Color Name
Warm Gray 30
Hex Value
#bebebe
RGB Value
rgb(190,190,190)
Color Science
IBM
Color Name
Warm Gray 50
Hex Value
#7f7f7f
RGB Value
rgb(127,127,127)
Color Science
IBM
Color Name
Warm Gray 90
Hex Value
#1c1c1c
RGB Value
rgb(28,28,28)
Color Science
IBM
Color Name
Black (Bang Wong)
Hex Value
#000000
RGB Value
rgb(0,0,0)
Color Science
Bang Wong
Color Name
Orange (Bang Wong)
Hex Value
#e69f00
RGB Value
rgb(230,159,0)
Color Science
Bang Wong
Color Name
Sky Blue (Bang Wong)
Hex Value
#56b4e9
RGB Value
rgb(86,180,233)
Color Science
Bang Wong
Color Name
Bluish Green (Bang Wong)
Hex Value
#009e73
RGB Value
rgb(0,158,115)
Color Science
Bang Wong
Color Name
Yellow (Bang Wong)
Hex Value
#f0e442
RGB Value
rgb(240,228,66)
Color Science
Bang Wong
Color Name
Blue (Bang Wong)
Hex Value
#0072b2
RGB Value
rgb(0,114,178)
Color Science
Bang Wong
Color Name
Vermilion (Bang Wong)
Hex Value
#d55e00
RGB Value
rgb(213,94,0)
Color Science
Bang Wong
Color Name
Reddish Purple (Bang Wong)
Hex Value
#cc79a7
RGB Value
rgb(204,121,167)
Color Science
Bang Wong

Form (Contact Form 7 example)

    Favourite pet?


    Do you like cheese?


    Best fruit?


    Please agree to our Privacy Terms

    Query / Repeaters

    August 6, 2023
    Small dogs eating chews and treats

    A couple of quick fixes to make the contact form look better is to add some padding inside the input box and to make all the inputs full width. Space is so important for modern design and user experience so this alone is a big improvement to the previously small and nineties-esque form. A couple of […]

    Read More
    August 6, 2023
    Buildings, trenches and diggers

    I’ve also placed the label text all on the same line whereas before it was on two. that gets added to the frontend of the form. The <br> tag adds extra space between the form inputs and this can get in the way of styling the form later on so it’s my preference to remove […]

    Read More
    July 23, 2023
    Why America stopped building swimming pools

    Why America stopped building public pools By Nathaniel Meyersohn, CNN Updated 10:43 AM EDT, Sat July 22, 2023 New YorkCNN —  Growing up in Louisville, Kentucky, Gerome Sutton looked forward all week for his chance to swim at Algonquin Park pool on the weekend. “It was like Christmas in the summer time,” said Sutton, now 66 and […]

    Read More
    justin.anthony.hall@gmail.com
    + (0) 44 7948 622 196