RhianaH
Rhiana is a front end developer specialising in making web sites and applications accessible for people with disabilities. Combining her background in educational psychology and a love of computers.
Accessibility basics for marketers and designers
Rhiana Heppenstall
Accessibility Lead
About me
Background in educational psychology
Rhiana
Switched to tech
Became an accessibility advocate
Outline
Accessibility
Accessible design is good design
It benefits people who don't have disabilities as well as those who do
– Steve Ballmer,
Former CEO of Microsoft
Cognitive
People with intellectual or developmental disorders
Vision
People with visual impariments, including different levels of blindness.
Hearing
People who are deaf or hearing impaired
Mobility
People who have difficulty with motor movements
Speaking
People who have difficulty with or are unable to speak
Who's it for?
VPAT
(Voluntary Product Accessibility Template)
(Web Content Accessibility Guidelines)
| Criteria | Supporting Features | Remarks |
|---|---|---|
| 1.1.1 Non-text content | Partially supports | Some images missing alt text |
| 1.2.1 Audio-only and video-only (pre-recorded) | Supports | |
| 1.2.2 Captions (pre-recorded) | Does not Support | Videos do not have captions |
| ... | ... | ... |
Accessibility Reports
A
Subtitles
Colour for colour blindness
Alt text for images
Labels and instructions
Headings and structure
AA
Goal
with audio descriptions
contrast for low vision
no images of text (logos ok)
helpful errors
good text spacing
AAA
Amazing to use
with sign language
even more contrast
error prevention
Nice to use
Able to be used
absolutely no images of text
glossary with definitions
Accessibility Levels
Colours
That are easy to see
- DO: Check your colours to see if they pass
Do's
- DON'T: Rely on colour only to convey meaning
Don'ts
Low Contrast
High Contrast
| Platform | Tool |
|---|---|
| Web | Find the HEX code: Colour Eye Dropper Compares HEX: Colour Contrast Checker |
| Figma | Figma plugin: Contrast Built into the colour picker: |
| Photoshop | Photoshop plugin: Check Contrast Ratio |
| Word | Check accessibility button: |
| Canva | Checker under file: |
tips and tools
Low Contrast
High Contrast Shadow
High Contrast text border
Colour Vision
Colour Blindness
Password
Repeat password
Colour Vision
Colour Blindness
Password
Repeat password
| Platform | Tool |
|---|---|
| Web | For images: Colour Blindness Simulator |
| Mac and iOS | Screen overlay: Sim Daltonism |
tips and tools
Colour Vision
Colour Blindness
Save
On Interaction
Save
Base
Colour Vision
Colour Blindness
Save
On Interaction
Save
Base
Words
That are easy to read
- Break up content with headings
- Clear labels and instructions
Do's
- Have the letters run too close together
- Have more than 75-80 characters wide
Don'ts
Writing
Heading 1
There can only be one!
- Consistently underline your links
- Have the full url for external links in pdfs
Do's
- Have "Read More!" links
- Overuse capitals, bold or italics
Don'ts
Links
Colour Vision
Colour Blindness
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet fringilla nunc, quis pretium lacus. Donec in eros in erat tempor sollicitudin at in justo. Mauris sodales augue et urna blandit, vitae tincidunt nisi ullamcorper.
Colour Vision
Colour Blindness
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet fringilla nunc, quis pretium lacus. Donec in eros in erat tempor sollicitudin at in justo. Mauris sodales augue et urna blandit, vitae tincidunt nisi ullamcorper.
With Vision
Screen Reader
| Platform | Tips |
|---|---|
| Word | Navigation pane: |
| Adobe PDF | Bookmarks pane: |
| Canva | Canva PDF Accessibility Guide |
Tips and Tools
Use built in headings, don't just increase font
- Use words like “to” and “from” for ranges rather than dashes
-
Write the number out for zero and one
Do's
- Use apostrophes for decades
- Write your date using just numerals
Don'ts
Numbers and Dates
Images
That are easy to "hear"
- Provide descriptive alt text
- Make icons consistent
- Add descriptions of graphs
Do's
- Put SEO terms into the descriptive alt text
- Use vision dependant descriptions
- Use "image" or "logo"
- Duplicate written info
Don'ts
Limited time offer! Jump for joy, save 50% with an annual plan. Claim now!
Example alt text
Mathseeds prime map for 19 lessons on numbers to 100000.
""
Example alt text
Phone number
A chart of people with disabilities in Australia. 65% are none, 17% hearing, 11% motor, 4% intellectual and 2% visual.
Example alt text
ABC Readingeggs
| Platform | Tips |
|---|---|
| Word | Right click on the image to go to "Format Picture" Add description in "Alt Text" section. |
| Adobe PDF | Prepare for accessibility! Adding alt text in adobe guide |
| Figma | Figma plugin: Alt Text Assistant |
| Canva | Right click the image and select: |
Tips and Tools
Thank you!
Any questions?
Contact me!
A11y 101 for Designers
By RhianaH
