๐๐ผ๐ ๐๐ผ ๐ฑ๐ผ ๐ถ๐ ๐ฟ๐ถ๐ด๐ต๐:
โ Describe the image meaningfullyโnot just โphoto.jpg.โ
Is alt text something youโve used before?
Posts by Caryn | Firefly Graphics
The heading and subheading are repeated in the caption. A photo of a chihuahua wearing a pink bow on its head is displayed in a frame. Next to the frame, there is a red cross and the words "image1". Below that is a green tick and the words, "A Chihuahua with a pink bow on her head looks towards the camera". A border collie dog looks towards the photo with one paw covering one eye.
๐๐ฑ๐ฑ ๐๐น๐ ๐ง๐ฒ๐
๐ ๐๐ผ ๐๐บ๐ฎ๐ด๐ฒ๐
If your post includes an image, does it have alt text?
๐ช๐ต๐ฎ๐โ๐ ๐๐น๐ ๐ง๐ฒ๐
๐?
A written description of an image for screen readers.
๐ช๐ต๐ ๐ถ๐ ๐บ๐ฎ๐๐๐ฒ๐ฟ๐:
Without it, blind users miss out on important information.
#AltTextMatters #InclusiveDesign #AccessibleContent
See mor
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll
Please:
๐น Use labels, icons, or patterns alongside colour.
๐น Test designs in greyscale to check readability.
Heading: Don't Rely on Colour Alone Sub-heading: Use patterns, labels, or icons alongside colour to convey meaning Example 1: A red dot and a green dot with the text next to them that says, "Not inclusive or accessible" Example 2: A red dot with a white X and a green dot with a white tick. The text next to them says, "A better option" A white dog, with a happy expression, looks towards the camera. For some he may be difficult to see though, he may fade into the pale grey and white background.
๐๐ผ๐น๐ผ๐๐ฟ ๐ฎ๐น๐ผ๐ป๐ฒ ๐ถ๐๐ปโ๐ ๐ฒ๐ป๐ผ๐๐ด๐ต to communicate meaning.
1 in 12 men & 1 in 200 women have colour blindnessโincluding my husband. He can often find clues that help, but sometimes, he can miss things.
Have you ever struggled with colour-based info?
#AccessibleDesign #InclusiveGraphics #VisibilityMa
Justified text can be particularly difficult for those with dyslexia and other vision impairments to read due to the varying distances between text and visual "rivers" that can be formed with the spaces.
Heading: "Keep Text Left-Aligned" Sub-heading: Especially for people with dyslexia, it's easiest to read Then a paragraph of text that has been justified and shows uneven spacing between words says, "Justified text can be particularly difficult for those with dyslexia and other vision impairments to read due to the varying distances between text and visual "rivers" that can be formed with the spaces."
๐๐ฒ๐ฒ๐ฝ ๐ง๐ฒ๐
๐ ๐๐ฒ๐ณ๐-๐๐น๐ถ๐ด๐ป๐ฒ๐ฑ
I preferred justified text; it looks so neat, but it can be harder to read.
๐น Uneven spaces = disrupted reading flow.
๐น Left-aligned text is easiest for most people.
Align left and help your audience read with ease!
#ReadableText #TypographyMatters #AccessibilityD
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll
Heading: โLine Spacingโ Sub-heading: โUsing at least 1.5 times spacing improves readability" Below is an example of a paragraph with 1.5 times spacing, with a green tick above it, then an example of a paragraph where the lines of text are too close together, with a red cross above it. The text in the paragraphs is used in the example paragraphs. In the bottom right corner of the graphic, a tan-coloured spaniel-type dog wearing reading glasses seems annoyed.
๐๐ถ๐ป๐ฒ ๐ฆ๐ฝ๐ฎ๐ฐ๐ถ๐ป๐ด:
Don't underestimate the importance of getting this right.
๐น Use 1.5x line spacing for body text.
๐น Avoid cramped textโit slows reading.
๐น Better spacing = better comprehension.
#TypographyMatters #ReadableDesign #AccessibilityTips
A black and white dog looks towards the camera with its head turned slightly away. The dog is wearing a baseball cap backwards. The text in the graphic is repeated in the caption, plus gives an example of two lines of text that are difficult to read when entirely in capital letters.
๐ฃ๐๐๐๐ฆ๐ ๐ฆ๐ง๐ข๐ฃ ๐จ๐ฆ๐๐ก๐ ๐๐๐ ๐๐๐ฃ๐ฆ.
๐๐งโ๐ฆ ๐๐๐ฅ๐ ๐ง๐ข ๐ฅ๐๐๐ ๐๐ก๐ ๐๐ข๐ข๐๐ฆ ๐๐๐๐ ๐ฌ๐ข๐จ'๐ฅ๐ ๐ฆ๐๐ข๐จ๐ง๐๐ก๐!
Using all capital letters can slow reading and can confuse screen readers.
๐น Words lose their shape.
๐น It can look aggressive.
๐น Use bold or colour instead.
#ReadableText #AccessibilityMatters #DesignTips
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll
A Rottweiler-looking dog looks towards the camera, tongue out, with a straw hat covering one ear and his eyes. The text in the graphic is repeated in the caption plus demonstrates a good, simple font choice thatโs easy to read and a script font thatโs not easy to read.
๐ฅ๐ฒ๐ฎ๐ฑ๐ฎ๐ฏ๐น๐ฒ ๐๐ผ๐ป๐๐
Some fonts are gorgeous, but if people canโt read them, then whatโs the point? ๐คทโโ๏ธ
๐น Stick to sans-serif fonts for digital content.
๐น Save decorative fonts for accents.
๐น Make sure the spacing isnโt too tight or too loose.
#FontMatters #ReadableDesign #TypographyTips
A Great Dane (dog) peers down at a very small Chihuahua-looking dog. The text on the graphic is repeated in the caption
Small text isnโt clever, itโs a readability nightmare.
๐น Web: At least 16px
๐น Print: At least 12pt
๐น Bigger is better (esp. for mobile users)
Small text = lost customers. Make it easy for people to read your social graphic, website, flyer or book.
#SizeMatters #InclusiveDesign #MarketingT
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll
Want to fix it?
โ
Use high contrast between text & background.
โ
Check colours with a contrast checker.
Simple? Yes.
Important? VERY.
The image demonstrates text on a background with high contrast and text on a background with low contrast. There is a black and white Greyhound off to the side with their head tilted. The text in the graphic is repeated in the caption.
๐๐ผ๐ป๐๐ฟ๐ฎ๐๐ ๐บ๐ฎ๐๐๐ฒ๐ฟ๐
People canโt read what they canโt see.
If your audience has to squint, thatโs not good design.
Low contrast = low engagement.
#AccessibleDesign #MarketingTips #SmallBusinessAustralia
๐จ๐๐ฒ:
โ Download the Guide
โ Sign up for the Newsletter
Are vague buttons becoming more common, or is it just me?
Heading: Use Descriptive Button Text Sub-heading: Make sure button text is descriptive - no vague "Click Here" Example 1: A button with the text reading, "Submit". It has a red cross above it. Example 2: A button with the text reading, "Click to Submit Details". It has a green tick above it. A large brown dog looks on with a perplexed look on his face.
๐จ๐๐ฒ ๐๐ฒ๐๐ฐ๐ฟ๐ถ๐ฝ๐๐ถ๐๐ฒ ๐๐๐๐๐ผ๐ป๐
Hate to break it to you, but "Click here" doesnโt cut it! Vague button text can confuse users, create accessibility barriers, and even impact SEO.
๐๐ผ๐ป'๐ ๐๐๐ฒ:
๐ซ Click here
๐ซ More info
๐๐ป๐๐๐ฒ๐ฎ๐ฑ:
See below ๐
#AccessibleWeb #ClearUX #InclusiveDesign
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll
Accessibility isnโt just about convenienceโitโs about safety.
Do you prefer smooth animations or minimal motion?
The text in the graphic is repeated in the caption.nA pug dog looks towards the text in the graphic; it's wearing dark sunglasses.n
๐๐๐ผ๐ถ๐ฑ ๐ ๐ผ๐๐ถ๐ป๐ด ๐ผ๐ฟ ๐๐น๐ฎ๐๐ต๐ถ๐ป๐ด ๐ง๐ฒ๐
๐
โ ๏ธ Flashing content can be unsafe for some users.
๐น Avoid animations that flash over 3 times per second.
๐น Fast flashes can trigger seizures.
๐น Use smooth animations instead.
#SafeDesign #AccessibilityMatters #UserFriendlyContent
๐๐ผ๐ ๐๐ผ ๐ฑ๐ผ ๐ถ๐ ๐ฟ๐ถ๐ด๐ต๐:
โ Describe the image meaningfullyโnot just โphoto.jpg.โ
Is alt text something youโve used before?
The heading and subheading are repeated in the caption. A photo of a chihuahua wearing a pink bow on its head is displayed in a frame. Next to the frame, there is a red cross and the words "image1". Below that is a green tick and the words, "A Chihuahua with a pink bow on her head looks towards the camera". A border collie dog looks towards the photo with one paw covering one eye.
๐๐ฑ๐ฑ ๐๐น๐ ๐ง๐ฒ๐
๐ ๐๐ผ ๐๐บ๐ฎ๐ด๐ฒ๐
If your post includes an image, does it have alt text?
๐ช๐ต๐ฎ๐โ๐ ๐๐น๐ ๐ง๐ฒ๐
๐?
A written description of an image for screen readers.
๐ช๐ต๐ ๐ถ๐ ๐บ๐ฎ๐๐๐ฒ๐ฟ๐:
Without it, blind users miss out on important information.
#AltTextMatters #InclusiveDesign #AccessibleContent
See mor
Make sure your:
โ
Website works with a keyboard
โ
Buttons & menus are clear
โ
Text resizes without breaking
โ
Videos have captions
Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility
#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos
The text on the graphic reads, โInclusivity in design gives businesses a leg up on the competition โฆโ. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherdโs head. The German Shepherd is lying down and the first dog is pushing one of the Shepherdโs ears down.
"๐๐ป๐ฐ๐น๐๐๐ถ๐๐ถ๐๐ ๐ถ๐ป ๐ฑ๐ฒ๐๐ถ๐ด๐ป ๐ด๐ถ๐๐ฒ๐ ๐ฏ๐๐๐ถ๐ป๐ฒ๐๐๐ฒ๐ ๐ฎ ๐น๐ฒ๐ด ๐๐ฝ ๐ผ๐ป ๐๐ต๐ฒ ๐ฐ๐ผ๐บ๐ฝ๐ฒ๐๐ถ๐๐ถ๐ผ๐ป."
โ McKinsey & Co.
Accessible design isnโt just about complianceโitโs about reaching more customers and standing out!
#InclusiveMarketing #AccessibilityWins #DesignForAll