Categories
Announcement ICT Accessibility News and Events

Excellent Resources from the AT3 Center

by Arlene Lugo, Program Director, CTTAP

The National Assistive Technology Act Technical Assistance and Training Center, also known as AT3, offers a wide array of resources on the AT3 Center website.

If you haven’t had a chance to take a look around I encourage you to do so. I’d like to call out two of the newer and very helpful resources:

  1. Free, self-directed Digital Accessibility Courses – three courses are now available with more to come! The courses include: 
    • “Accessibility in Microsoft Word,” 
    • “Web Accessibility Testing: Basic” and 
    • “Accessible Web Design & Content Authoring”

2. Explore AT – “a clearinghouse for information and resources on many different assistive technologies. You can find useful resources arranged by activity and disability.” 

Hope you will take a look around!

 

Categories
ICT Accessibility News and Events

Digital Accessibility Tip! Hashtags, Email Addresses and Usernames

Written by Adam Kosakowski, M.Ed., ATP

A hashtag is a metadata tool used to easily compile and cross reference digital content on the web. Hashtags also make it possible for posters to share a love of cats on social media with bigger audiences. Email addresses and usernames are, well, mostly used to receive junk mail and messages from people in high school you don’t want to reconnect with. Still, what do they all have in common, and what does that have to do with digital accessibility?

They all use words with no spaces between them! Today’s tip will focus on how you can type hashtags, email addresses, and usernames in the most accessible way possible.

Hashtags: Print Disabilities and Screen Reader Users

Whether you have useable vision or use a screen reader, try reading the following hashtag:

#catsarethebestanimalsever

It isn’t easy! Where does one word end and the other begin? Does it say, “Cats are the best animal sever” or “Cats are the best animals ever?” Depending on the person reading or the screen reader and its settings, either way is possible. When I tested it with NVDA (a popular free screen reader) it said, “animal sever”; if I am trying to post a cat picture, why would I try to convey that message? It’s nonsense!

To help everyone more easily read this, try using camel case. Camel case is the practice of writing with no punctuation or spaces, but using capital letters for the first letter in each word within. With camel case, the hashtag above becomes:

#CatsAreTheBestAnimalsEver

I bet most people would agree, even those without print disabilities, that this is much easier to read. Also, it ensures the hashtag says “animals ever” and not “animal sever.” The same goes for screen readers; this helps screen readers correctly identify the intended words.

Email Addresses and Usernames

The above case is becoming slightly more well known in the circles that focus on accessibility, but what about email addresses and usernames? I have noticed next to no one use camel case with these and yet it is just as important!

For example, my email address is obnoxiously long. I have a ten-letter last name and the text after the “at” symbol is “Oak Hill CT.” Without camel case it looks like this:

adam.kosakowski@oakhillct.org

Unless someone is familiar with Oak Hill or is employed in the same organization, the address is confusing when all lowercase. And when read with NVDA it says, “Adam dot Kosakowski @ Oak Hill dot org.” NVDA says something after “Oak Hill”, but it is not discernible. It sounds like it straight up skips the “CT”! This could make the difference between people knowing my email address and not. And while I’d like less spam, I want to help people with accessibility!

The solution is simple: use camel case. And when it comes to acronyms, make all the letters capital.

Here is my email without camel case vs with:

Adam.kosakowski@oakhillct.org vs Adam.Kosakowski@OakHillCT.org

And here is my Twitter handle without camel case vs with:

@neatwithadam vs @NEATWithAdam

The capital “W” after the all-caps NEAT acronym may look weird, but this follows the two rules that ensure screen readers will read it perfectly:

  1. Capitalize the first letter of each word.
  2. Capitalize each letter in an acronym.

I hope you find this helpful!

This column is written by Adam Kosakowski, M.Ed., ATP

Adam works as an Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center.

He can be contacted at Adam.Kosakowski@OakHillCT.org and followed on twitter at @NEATWithAdam

Categories
ICT Accessibility News and Events

Digital Accessibility Tip! Link Text

Written by Adam Kosakowski, M.Ed., ATP,  New England Assistive Technology (NEAT) Center

Links are everywhere and are used in every type of digital content. As such, making links accessible is incredibly important. But, how to do so is not common knowledge, and there are many wrong ways to do it that will make the experience worse for people using assistive technology. Thankfully, doing it right is fairly easy once you know how.

Proper Link Text

The worst way to provide a link is to copy and paste the URL into your writing. Imagine a screen reader reading an amazon link with countless numbers, special symbols, and slashes; it does not make an accessible reading experience. Instead, create proper link text. To do this in Microsoft Word or Outlook, do the following:

  • Put your text cursor where you want the link and right click.
  • Choose Link to open the Insert Hyperlink window.
  • In the “Address” field, paste that URL.
  • In the “Text to display” field, type in a few words to describe the purpose of the link. Do not put the URL here.
  • Click OK.

The result is a link that looks like this, Candy on Amazon, rather than a garbled mess that any one wouldn’t enjoy reading let alone people using assistive technology.

Best Practices using Proper Link Text

Like Alternative Text (see my previous column), proper link text is easy to learn but a bit tricky to master because of the question, “What should I use as the link text? The general idea is that link text should be concise and describe where the link will bring the user. Here are some best practices and things to avoid:

  • Avoid “Click here”, “Read more”, “link to [some link description]”, etc.
    • Reason: Screen readers will inform the user that a link is a link even if the text on screen does not say so. “Click here” does not inform where the link goes and is not meaningful.
  • Links can be standalone or be a part of a complete sentence, just make sure the text is meaningful.
    • Standalone example: Amazon Products.
    • Part of a sentence: Read more about Amazon Products. Notice how I used “Read more,” that is OK here because it is not part of the link text, instead it is put in context of a meaningful sentence.
  • Avoid creating very short link text, take the alphabetical index for example:
    • Reason: Small links like this are small targets to access, people with motor challenges trying to click on the right letter here will have a hard time!

Alphabetical Indexes

  • Links should have an underline and be colored differently than the surrounding text.
    • Reason: People need a way to distinguish a link from the surrounding text. The best way to distinguish a link is by color AND a non-color indicator. By underlining a link, people who are colorblind will have an easier time distinguishing it from surrounding text than by color alone.

To learn more about color contrast, read this WebAIM article on Links and Hypertext.

Adam Kosakowski works as an Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center. He can be contacted at Adam.Kosakowski@OakHillCT.org and followed on twitter: @NEATWithAdam

Categories
ICT Accessibility News and Events

Digital Accessibility Tip! Headings

Written by Adam Kosakowski, M.Ed., ATP, Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center

Headings are an incredibly important accessibility element on websites as well as digital documents such as Microsoft Word, Google Docs, and Microsoft Outlook emails. Visually, headings are those big bold words on screen at the top of every section of text. Think of them like chapter or section titles. They draw in the eyes of sighted users and give them a sneak peek of what they’re about to read below. But, if you’re blind or otherwise use a screen reader, unless headings are created correctly, they’ll just be read like normal text. This column will help you do Headers right!

Screen readers don’t announce to the user the size of text, so if a heading is only a heading due to its visual size, that’s considered an accessibility fail. Accessible headings need to be tagged as a heading, behind the scenes, in the coding of the document or website. If tagged appropriately, a screen reader user will know it is a heading and will be given access to a plethora of screen reader shortcuts empowering the user to navigate the document by those headings similar to how sighted readers do so with their eyes.

Creating Headings

Luckily, you do not need coding knowledge to create tagged headings in documents and websites. You just need to know where to look:

Styles Ribbon from Microsoft Word screen shot with Normal text style highlighted.
Does this screen shot look familiar? If not, open up Microsoft Word, go to the Home tab and look for the “Styles” ribbon. Normal, Heading 1, Heading, 2, and Heading 3, etc. are all selectable options that change your visual text upon selection. Not only that, if you choose one of the Heading options and start typing, behind the scenes and in the coding your typed text will then have that associated heading tagged! It’s that easy! Many word processing applications have the ability to apply heading tags, you just need to find it! If you’d like to learn how to do headings in your favorite word processor or website builder, you can Google something like “labeling headings in <insert application name here>”

Heading Order

Creating headings is half the battle. Next, headings must have appropriate hierarchical ordering. Heading level 1 is usually reserved for the title of a document or webpage. If there is a section title on that same document or webpage, that would then be a heading level 2. Heading level 3 could be a subsection title that logically belongs under its associated heading level 2, and so on. The idea is to use headings as you logically need them, but do not skip levels, i.e., don’t have a level 3 without having a level 2 associated with it.

Here’s an example to help you think through this and get hungry (for headings)! Think of your favorite restaurant menu and think of how they order their heading text. I love breakfast, so we’ll write a breakfast example:

  • Adam’s Breakfast Nook (This is the title of the restaurant, so this should be a Heading level 1, it would be at the top of the page, big and bold AND tagged as a heading 1)
    • Egg Dishes (This is a type of breakfast dish served at the restaurant, it’s a Heading level 2)
    • Pancake Dishes (This is another type of breakfast dish, it’s also a Heading level 2)
      • Savory Pancakes (This is a “subtype” of pancake dishes, so it’s a Heading level 3)
      • “Healthy Pancakes” (This is also a subtype of pancake dishes, so it’s also a heading level 3)
        • Banana Pancakes (This is a specific dish; it could be Normal text or a Heading level 4)
        • Strawberry Pancakes (Another specific dish, same as above)

This column is written by Adam Kosakowski, M.Ed., ATP. Adam works as an Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center. He can be contacted at Adam.Kosakowski@OakHillCT.org and followed on Twitter: @NEATWithAdam.

Categories
ICT Accessibility News and Events

Accessibility Tip: Everyone Uses Captions!

Written by Adam Kosakowski, M.Ed., ATP, Assistive Technology Specialist at New England Assistive Technology (NEAT), an Oak Hill Center

If you’re deaf or hard of hearing or know someone in that population, you likely know about captioning and how it’s needed on videos in order for them to be accessible. But, did you also know that 80% of people who use captions are not deaf or hard of hearing? I am part of that 80%, and although I do not identify with deafness or being hard of hearing, I always turn on
subtitles/captioning when available because it improves my comprehension of dialogue and increases my engagement with the video.

I love captions!
What I’m saying is, captions are used by a huge audience!
(For this statistic and more, check out this link: captioning statistics article by 3PlayMedia)

Quick fact! Captioning and subtitles are technically different. Subtitles are displayed during a video that includes spoken dialogue. Compare this to captioning, which includes spoken dialogue as well as non-dialogue noises like laughter, coffee pouring, explosions, etc. But, the two terms are often used interchangeably nowadays. This article will use the term captioning in
this flexible way.

So, nearly everyone wants captioning, whether or not they have a disability. But, captioning on videos in social media is rare, especially when you consider how many videos are posted every day. The good news is that you don’t need to be a video editing expert to add captions to your videos. There are a myriad of ways to add captions to your videos and my favorite is Clipomatic on Apple devices.

Clipomatic costs $4.99, but it is so worth it. When you start up the app, you press the big red record button and start recording, just like you would in other recording apps. While you record, the app automatically hears what you’re saying and adds captions to your video. When you’re done, press the stop button. Before you save your video, you can even tap a caption it created and then edit it, which is great when the app makes a rare mistake in its word recognition.

Using apps like this, you can seamlessly add captioning to your videos and post to social media. Taking this small, extra step can help you make a statement as an accessibility advocate!

Contact Adam at Adam.Kosakowski@OakHillCT.org and follow him on Twitter: @NEATwithAdam