A11y Tips

As part of a recent social media campaign, we've put together a series of bite-size digital accessibility tips. On this page, you'll find the plain text version as well as a downloadable tagged PDF for each tip.

AD Web Key Tip 003 - Become a Keyboard Warrior

Contributors: Karl McCabe

Become a Keyboard Warrior PDF

Accessibility checks in 5 Steps With ADWebKey

Unsure where to start when it comes to assessing your website’s accessibility?

Checking for keyboard access is one of the easiest but also one of the most critical accessibility checks you can perform.

Focus order
Navigate through the page using the tab key. Keyboard focus should move from one element to the next in a predictable, logical order.
Visible Focus Indicator
This tells sighted users which element on the page is currently receiving focus. It should have a colour contrast ratio of at least 3:1 with the background.
What should receive focus?
All of the interactive elements on a page must be able to be navigated to using the keyboard alone. Such as links, buttons, menus, and form fields.
Watch Out For Keyboard Traps
A keyboard trap occurs when a user can navigate into an element or section of a page and then can’t navigate out using the keyboard alone.
Character Key Shortcuts
Keyboard shortcuts that use only letter, punctuation, number or symbol characters should be able to be turned off, remapped or only become active when receiving focus.

Thank you!

Feel free to share this post or save it for later. And follow us for more accessibility tips.

Web Key IT Accessibility Tip 002- Is it socially accessible?

The Web Key IT Top 5 Accessible Social Media Tips In 60 seconds or less...

Alternative Text

Add alternative text to your images using the Alt Text function on Facebook, Instagram or Twitter.

Or include an image description as part of your post.

Caption Videos

YouTube’s auto captioning feature allows you to edit the caption text.

Ensure all words spoken, sung or narrated are captured.

Describe any sound events that may impact story or meaning.

Use Emojis Sparingly

Emojis include alt text, which is important for users who rely on screen readers.

Add the heart emoji to the end of a post, but one is sufficient.

Otherwise screen reader users will hear multiple audio occurrences of the emoji.

Use Camel Case

Use camel case for hashtags to ensure universal readability.

This is particularly helpful for screen reader users, making it possible for screen readers to interpret the separate words in a hashtag.

But what is camel case?

Camel Case

Camel case is the practice of capitalizing the first letter of each word when multiple words are strung together without a space in between.

For Example:

#WebAccessibility #InclusiveDesign #WebKeyIt

Hashtags & Mentions

Place hashtags and mentions at the end of your post.

This ensures the main part of the post can be read without interruption, making it easier for users to process the information.

Recap...

1. Add alternative text.

2. Caption videos.

3. Use emojis sparingly.

4. Use Camel Case for hashtags.

5. Place hashtags and mentions at the end of your post.

Thank you!

Feel free to share this post or save it for later.

And follow us for more accessibility tips.

Web Key IT Accessibility Tip 001 - Can Your Red Be Read?

Can your Red be Read tagged PDF

www.webkeyit.com

Contributors: Amanda Mace and Karl McCabe

Red text is used for lots of things including highlighting new items, warnings, reminders of missing entries, and asterisks to show that information is required (more on that user in another post). But there’s a problem…

The red we see used most is pure red. This red has a hex value of #FF0000 and RGB values of (255, 0, 0).

So, what’s the issue with pure red?

Here’s the thing. It has a color contrast ratio, with white, of only 4:1. This can be problematic when it comes to passing color contrast requirements.

Okay. Well, what does a more accessible red look like? So glad you asked!

Here’s some we prepared earlier.

Darker red Hex #ee0000 RGB (238, 0, 0)

This darker red has a contrast ratio, with white, of 4.53 to 1 and passes WCAG at the A A level for all text sizes.

Deep red Hex #b60000 RGB (182, 0, 0)

This deep red has a contrast ratio, with white, of 7.03 to 1 and passes WCAG at the A A A level for all text sizes.

Thank you!

Feel free to share this post or save it for later. And follow us for more accessibility tips.

Brought to you by Web Key IT