• If you extend your hand for a handshake, you’d need to announce it. “It’s nice to meet you. I’m extending my hand to shake yours.”
• If they have a sighted companion that is walking with them or guiding them, that’s a completely different person. Speak directly to the blind person – do not relay communication through someone else.
• It’s ok to offer help. It’s ok for them to not need it. If you do offer assistance, do so in a way that is respectful and non-intrusive, and wait for their response to your offer instead of assuming it’s a yes.
• A common way to describe where things are is to use clock positions. If at a dinner meeting at a restaurant, for instance, you could mention “your water is at your 2 o’clock”.
• Also, at restaurants, while you might want to offer to read the menu, don’t assume you should order on their behalf.
• If you leave the room, or enter the room, say so. To just come and go without doing so can be considered sneaky.
• If someone takes you up on an offer to guide them, tell them “here is my elbow” for them to take on their own. It’s not on you to grab them.
• When giving directions, pointing doesn’t work. Use descriptive directions like “take a right at the next street”.
• Half-open doors can be kind of dangerous. If you’re in a blind person’s home, don’t leave a door half-open – either close it all the way or open it all the way.
• Speak at a normal volume that you would for anyone else. Blindness doesn’t mean deaf!
• No need to constantly apologize for using words like “look” or “see,” as they are part of common language.

Advice for meeting a blind person with a guide dog

Another thing you may encounter when meeting someone who is blind is their guide dog. A service animal is much different than a pet, and there are some additional tips I’ve gather for that.

• Do not distract the dog: Guide dogs are trained to be focused on their work and to ignore distractions. If you try to pet or interact with the dog, it could distract them from their important duties and put their handler in danger. It’s important to treat guide dogs with the same respect and professionalism that you would give to their human handlers.
• Ask for permission: If you want to interact with a guide dog, always ask for permission from the handler first. They may be happy to let you meet the dog, but it’s important to follow their lead and respect their wishes.
• Do not feed the dog: Guide dogs are trained to follow a strict diet and feeding schedule. Giving them extra treats or food can disrupt their training and lead to health issues. Avoid offering the dog any food, even if it seems friendly.
• Don’t call the dog’s name, make eye contact with a working dog, or attempt to give the guide dog directions. If you’re meeting with a blind person who has a dog, talk to the person only.

Children and Guide Dogs

I’ve known a few kids who think every dog is there for them to pet them. Guide dog aside, it’s important to teach children to ask before petting another person’s dog. But especially for guide dogs, it’s important to explain to your child that guide dogs are not pets, but are working animals that help people with disabilities. Teach them that it’s important to be respectful of the dog’s job and not to pet or distract them while they’re working. Encourage them to ask questions and learn more about guide dogs and their important role in society.

In summary

I hope that helps someone before they meet a blind person for the first time. Again, I wish I had been aware of those items – I would’ve felt a little less ignorant.

I’m still learning, and I welcome feedback. If you have any thoughts, questions, comments, or corrections, email me or leave a comment via Mastodon.

The post Advice for meeting someone who is blind appeared first on Learning A11y.

What does ‘discernible text’ even mean?

It means that a screen reader, or even a search crawler, can’t see any text here. I often see this on pages that use logos for links to social media.

Example

For example: here is some basic HTML showing a link to a twitter account:

<a href="https://twitter.com/walmart">
  Follow us on Twitter
</a>

In the above example, a machine can read over that HTML and determine “this is a link”, as well as determine where the link is going, and also what the link says.

But what if someone chooses to use an image of a Twitter logo instead of the text above:

<a href="https://twitter.com/walmart">
  <img src="twitter-logo.png" />
</a>

In the above HTML, a machine can read of that HTML and determine “this is a link”, as well as determine where the links is going, but there is no text of what this link is supposed to say. There is no discernible text. It might as well look like this:

<a href="https://twitter.com/walmart"></a>

Just blank!

One way to fix this, when using an img tag especially, is to include an alt attribute:

<a href="https://twitter.com/walmart">
  <img src="twitter-logo.png" alt="Follow us on Twitter" />
</a>

With above example, while a machine scanning this code may not be able to tell what the twitter-logo.png looks like, it can see the alt value! So adding an alt attribute with an appropriate value could be one way to resolve this issue.

What about Font Awesome?

Many sites use a font logo system, like Font Awesome, to display social links:

<a href="https://twitter.com/walmart">
  <i class="fa-brands fa-twitter"></i>
</a>

In this instance, there is no img tag above, therefore the alt attribute doesn’t apply. What can one do here? One method is to use aria-label, like so:

<a href="https://twitter.com/walmart" aria-label="Follow us on Twitter">
  <i class="fa-brands fa-twitter"></i>
</a>

In the above example, an aria-label attribute is added to the link, and machine screen readers know how to interpret that value.

Title

While not suggested, another alternative is the use of the title attribute instead of aria-label:

<a href="https://twitter.com/walmart" title="Follow us on Twitter">
  <i class="fa-brands fa-twitter"></i>
</a>

Use of title is also picked up by screen readers. Not only that, people who use a mouse can mouse over this link, and a common browser behavior is to display the title text as a tooltip after half a second of mouse hover.

Aside: so what’s the problem with title?

While this makes the “Links must have discernible text” message go away, it’s not a recommended practice. Historically, some browsers have latched onto the tooltip hover effect of title. The problem is that not all browsers implemented this consistently, nor do screen readers have a consistent way of supporting access to the title attribute. Additionally, the tooltip cannot work on mobile/touchscreens, and therefore authors should likely avoid this because of the inconsistency it provides to end users.

So while it gets rid of that message, it doesn’t necessarily make my site more usable.

Text just for Screen Readers

Another tool, other than applying attributes to the link, is to insert text and styling it in a way that it doesn’t show up to sighted users, but it still accessible by screen readers. Take the example below:

<a href="https://twitter.com/walmart">
  <i class="fa-brands fa-twitter"></i>
  <span class="sr-only">Follow us on Twitter"</span>
</a>

Note the span with the class of sr-only – by itself this class doesn’t do anything special. If you don’t add any styles associate with that class name, then the text ‘Follow us on Twitter’ will just show up. But if you include the following snippet in your stylesheet, it will disappear from sight, while still being available to screen readers:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

Does that look more complicated than display:none? Why not use display: none? The answer is that screen readers will also ignore text that is styled to display: none, so best to avoid it if you want screen readers to pick up on the text.

Or just show the text to everyone!

Another method that is worth mentioning is to just show the text to all users – not hide it. Not everyone has memorized what these logos represent. Maybe having text alongside the logo available for everyone to see will make the area more usable. The less a user has to think about what an action will do, the more usable a site will feel.

<a href="https://twitter.com/walmart">
  <i class="fa-brands fa-twitter"></i>
  Follow us on Twitter
</a>

So running scans again after the above adjustments should address the ‘Links must have discernible text’ – at least for those instances.

In summary

I hope that helps give some insight into how to solve for “Links must have discernible text”. The above techniques are what I’ve used, and the common areas where I’ve seen this sort of thing.

The Mastodon post for this article is a good place for thoughts, questions, comments, or corrections. I’m still learning, and I welcome feedback.

Updated 2023-02-09: Incorporating feedback from Dan Keck .

The post How to fix “Links must have discernible text” appeared first on Learning A11y.

What is axe DevTools? That sounds complicated.

The axe DevTools browser extension is powerful but not complicated. It’s a tool you can add to your desktop browser for free. Whenever you want, you can tell it to scan the page you’re browsing for accessibility issues. It then shows you a list of issues to address. I think it’s helpful to be walked through it once to get oriented, but from there it’s smooth sailing.

Who is axe DevTools for? It sounds like a developer thing.

Anyone can install and run the axe DevTools browser extension. Web designers can and should install it. Quality engineers can and should install it. Web developers can and should install it.

What types of websites can I run this extension on?

You can run the axe DevTools extension on any web page that you are browsing. Does the site require a login? That’s easy – as a user, just log in and the run axe DevTools scan again. Do you have different views and layouts based on a responsive layout? No problem – change your screen size, and run the axe DevTools scan again. The scan runs against whatever is in your browser.

Is axe DevTools this free? What aren’t you telling me?

The extension is free. There’s some other pro-related stuff you can use, but I don’t know enough about it to talk about it. I’ve just always used the free extension part. It also seems to be part of a suite of tools for doing automated testing, and running things against an entire site – I don’t know much about those extras. (That’s when it really seems to get into ‘this-part-is-for-developers’ territory.) I make hobbyist websites and the free axe DevTools browser extension is more than enough for my needs.

Are you paid by axe DevTools?

No. I have no affiliation to Deque (the maker of this extension) – I just use and like the free version of the tool.

How to install axe DevTools

I use Chrome on a MacBook, and I’m writing this from that perspective. I think the same applies to using Edge as well, and I don’t think it matters whether you’re on Windows or Mac. If any of this can be done on Safari, I’d be surprised. Also, I don’t know if it can work on Android or iOS at all.

In Chrome, do a Google search for ‘axe Devtools chrome extension’. Alternatively, here is a link to axe Devtools chrome extension.

On the chrome extension page, click the ‘Add to Chrome’ button.

Chrome will then do the equivalent of asking ‘Are you sure you want to install this’ – go ahead and add the extension.

After doing so, Chrome may route you directly to a page built by Deque (the company that makes axe) showing how to use it. You can read that but you don’t have to leave it open.

How to use axe DevTools

Now that you have the extension, pretty much on any part of a web page, you can right-click and choose ‘inspect’.

After left-clicking ‘Inspect’, the Chrome dev tools panel will appear.

DevTools can be positioned in a variety of locations – on the bottom of the browser window, or on the side, or even in its own window. The screenshots here assume it’s on the bottom. To get more familiar with how to position the Chrome DevTools menu, the reader will need to look elsewhere.

In the screenshot below, you can see that ‘axe DevTools’ is one of the menu items now in Chrome’s DevTools. It may be behind an arrow if there are too many options to show at once.

Select ‘axe DevTools’.

I think the first time you install, it may ask you to agree to the terms. It also asks what kind of role you have – I just say ‘Developer’

Once done, you’ll see the axe DevTools interface. This can look different depending on the size of the browser. My screenshots henceforth will assume a fairly wide window, as if using most of a 15″ laptop window.

I think the interface is a little overwhelming if you’re not in it day-to-day. The interface has changed over the years, and will likely continue to do so, so if what you see is different from what’s in this screenshot, that wouldn’t surprise me. To get started, I recommend just finding and clicking the option that says ‘Scan ALL of my page.”

I’ve gone to the Memphis Zoo website’s membership page and ran the scan. It came back with the following:

The red numbers in the screenshot above correspond to the following numbers in the list:

1. This is the ‘Re-run Scan’ button. If I have continued interacting with the page and maybe caused some new content to show or hide, I will often re-run the scan to ensure I’m seeing the results that match what I’m browsing.
2. This is the total number of issues. Think if it like a report card. Ideally, you want ‘0’ issues. In this case, it’s ‘7’.
3. Some issues are more severe than others, and axe has classified them into the following buckets: ‘critical’, ‘serious’, ‘moderate’, and ‘minor.’ If you have a large number of issues and wondering where to start, tackle the ‘Critical’ issues first. The number of issues next to each classification is clickable, and doing so will filter which issues get revealed on the right side of the report.
4. This is the listing of the issue types. You can expand each of these to reveal where exactly in the page this is occurring, and see tips on how to fix the issue.
5. The number on this side shows the number of instances for each issue type. Of the 3 issue types in this screenshot, two of them occur one time on this web page, while one of them (“Links must have discernible text”) was identified 5 times on this page page. Again, this area can be expanded and axe DevTools will try to give you options to identify where this was found, as well as more details around the issue and potential ways to remedy.

The issues found are sometimes about content that is missing, or HTML issues, or even styling issues. After fixing the issues – re-run your scan. Are there zero issues now? Great!

Zero issues means I’m done, right?

axe DevTools is a fantastic tool, but it has its limitations. It scans the DOM tree, but it didn’t try to actually use your site like a human would. Also, it cannot identify things that are more subjective in nature (like if the language used is clear). That said, I find it essential, as it’s a great tool to use regularly for those first-pass issues and low-hanging fruit of things to address.

Bottom line

Fixing issues reported by axe DevTools made me a better front-end developer, as in many cases, the axe DevTools report will check for valid HTML and best practices. I think it could help others, too. It will also helped site’s search engine optimization, as generally things that are good for assistive technologies are also good for automated crawlers. Fixing issues caught by axe DevTools means that you will likely also address issues picked up by other automated scan tools. (And many times that’s enough to avoid drive-by accessibility lawsuits that are just based on blanket scans.)

I’ve made using axe DevTools part of my regular design and development routine.

The post What’s the easiest way to check my website for accessibility problems? appeared first on Learning A11y.

Here are a few ways:

1. They have a friend or relative arrange their money for them.
2. They trust the cashier they are working with to be honest.
3. They mark them in some way themselves, like folding a corner, or attaching a paper clip in specific spots.
4. In recent years, it’s become possible to use a phone app to identify the bill.
5. The iBill Talking Bank Note Identifier is a small device available free of charge from the Treasury Department to any US citizen who is blind or visually impaired that helps identify their notes.

Like everyone else in the U.S., they also just use credit cards or their phone to conduct electronic payments.

In some other countries, bills are available at other sizes, and/or there are tactile marks embedded in the currency to help distinguish the bills from each other.

The post How do blind people tell the difference between a 1 dollar bill and 5 dollar bill? appeared first on Learning A11y.

1. Have an agenda. State what your meeting is about up front – this makes it easier for people to follow along.
2. When sharing a video of yourself, use good lighting so that those with visual impairments can see your lips and facial expressions.
3. If sharing a video, give an audio description of what you look like and what is in your video background. This gives equal information to non-sighted users.
4. If sharing your screen, ensure font size is bumped up. If you are sharing a screen from a large external monitor, viewers who only have a laptop or phone may not can see those details. Bumping up the font size enables everyone to follow your text.
5. Many services, such as MS Teams, allow for live captions. Describe to your audience how to access those from within the MS Teams menu.
6. Asks folks who aren’t speaking to remain muted.
7. If you post images in the meeting chat, provide text descriptions of what the images convey.
8. Use plain language, and consider using full phrases instead of abbreviations and company lingo. This helps new people as well as those who just don’t work daily in the same context as you do.
9. Describe imagery used in your presentation. Saying, “On this slide is a chart showing our stock price at a steady incline from January 2021 at the price of $45 up until December 2022 where the price is $60”.
10. Provide time for questions and answers, and offer to do so after the meeting as well.
11. Send a recap of the meeting discussion points to the participants. Include other meeting materials, such as any shared presentations, or a link to the video of the presentation itself.

With the tips above, this will help make meetings more accessible to all. Do you have additional tips for making virtual meetings accessible? If so, please send them over!

The post How do I make my Microsoft Teams meetings accessible and inclusive to those with disabilities? appeared first on Learning A11y.

That said, form the habit to consider :focus at the same time as considering :hover. In many cases, it makes perfect sense to apply the same styles.

Here’s a typical example:

button {
  background: blue;
}
button:hover {
  background: black;
}

In the above CSS, we have specified a :hover state for the button. But what about :focus? Do we need to also do this?

button {
  background: blue;
}
button:hover, button:focus {
  background: black;
}

In the above instance, if a keyboard user is tabbing through page elements, the button turns black when focus is set, just like when hovering over the button. This would be in addition to whatever the operating system and browser applies to focused buttons on web pages (often times an outline of some sort).

Mouse users get value from hover styles, like a background color of a button making a noticeable change. By default, many browsers change the mouse cursor when hovering over an interactive element.

Keyboard-only users also need to identify the currently-focused element. To my knowledge, all browsers use custom outline for the focused element, which ideally satisfies the need for someone to identify what has focus.

That said, it doesn’t hurt, and could be valuable, to duplicate the :hover styles to the :focus selector as well. But do not remove the outline on a :focus style – that can stay as well, and likely should to provide some consistency for keyboard users or those with assistive technologies.

I’m open to discussion via email or Mastodon.

The post Do CSS focus and hover styles need to match? appeared first on Learning A11y.