Accessibility Awareness

@a11yawareness.bsky.social

Helping you better understand web accessibility for people with disabilities. Created by @patrickmgarvin.bsky.social.

Avoid jargon whenever possible. When you have to use terms that might not be commonly known or used among your audience, explain what these terms mean. If you can't avoid a lot of specific terms, include a glossary of terms that users can refer to when needed.

Make sure that interactive elements that can be accessed by using a mouse, pen, trackpad or touch are at least 24 by 24 CSS pixels. This helps people with low vision and/or limited motor control select the intended element without accidentally selecting nearby elements.

Consider your site content that is routinely updated, like weather maps, Covid charts, or stock graphs. Screen reader users encounter maps and charts where the image has been updated but the alt text hasn't. This can lead to confusion. Always update alt text when updating images.

Don't forget to add alt text on Instagram and Facebook, too. When you forget, the auto-generated alt text is not as helpful, complete, or accurate as human-written alt text. A.I. can't know the purpose of a photo. Always add your own alt text on Instagram and Facebook.

Looking for information on accessibility laws? Lainey Feingold has a resource on digital accessibility laws and policies that she's updated over the years. Though not exhaustive, it has great insight, histories, explanations, and links. www.lflegal.com/global-law-a...

Global Law and Policy

The legal framework gives us permission to dream what is possible. Lizzie Kiama (Kenya) at Microsoft Ability Summit 2021 Welcome to LFLegal's Digital Accessibility Global Law and Policy page. The…

lflegal.com

In his post, "Automated testing won’t solve web accessibility," Eric Eggert explains that at its core, accessibility is about how people interact with computers. Automated tools might help identify issues, but they aren't a replacement for human expertise. yatil.net/blog/automat...

Automated testing won’t solve web accessibility · Eric Eggert

Over the past few years, accessibility companies have started to develop tools that claim to find accessibility problems automatically. Often the idea is that “automated testing is not quite there…

yatil.net

Some are suggesting you deliberately write inaccurate or confusing alt text, because they say this confuses AI scrapers that are analyzing images. The purpose of alt text is to help people who cannot see the image. Deliberately misrepresenting the image is a gross misuse of alt text. Don't do it.

You might personally choose not to use AI, but you might not have a choice as to whether your team or office uses it. If your organization is using AI to write alt text, always review it to make sure it's accurate and appropriate. AI won't necessarily understand how or why an image is being used.

When using Microsoft Word or Google Docs, don't just make text bigger and bolder to make it a heading. That will work for sighted users, but screen reader users will miss that and just hear it as normal paragraph text. Use actual heading styles, like level 1 through 6.

Intentional misspellings of words can confuse people. This includes people with cognitive and reading disabilities, and those learning the language. Depending on how much the word is misspelled, screen readers might not pronounce it like the actual intended word.

Chartability is a resource to help make data visualizations and charts more accessible. It's organized into principles with testable criteria aimed at making sure people with disabilities are able to access data. chartability.fizz.studio

Chartability

Chartability is a set of heuristics (testable questions) for ensuring that data visualizations, systems, and interfaces are accessible. Chartability is organized into principles with testable…

chartability.fizz.studio

Automatic captions make it difficult to watch videos because the viewer is forced to decipher misspelled or mistranslated words that appear in a string of text without any punctuation. These can be distracting and disorienting. Always edit your captions before publishing.

Color contrast affects readability on the web and in print. It is especially important for users who are low vision or for users who are colorblind. Good color contrast means all users can see your content no matter the device they’re using or the lighting of their surroundings.

Hyperlink text should make sense when read out of context. Screen reader users can navigate from link to link, and can listen to links in a list. When navigating this way, only the link is read. So "click here" or "read more" won't make sense.

In hashtags, it helps if each new word starts with a capital letter. Otherwise, sighted users could see a string of letters and not immediately know where one word ends and a new word begins. Capitalized words also help screen readers properly read out the hashtag.

Don't forget transcripts for video and audio. These will help blind users and low-vision users, deaf and hard-of-hearing users, people with ADHD, and people with audio-processing disorders. Transcripts also benefit search engines, people in quiet spaces, and people in a hurry.

Screen reader users can navigate from heading to heading. If HTML headings are used correctly, this allows users to get a basic outline of content and find the information they’re looking for. The highest heading level is <h1> and <h6> is the lowest. developer.mozilla.org/en-US/docs/W...

<h1>–<h6> HTML section heading elements - HTML | MDN

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the…

developer.mozilla.org

Did you know each emoji has a coded description that gets read aloud by screen readers? This demo by Alexa Heinrich shows what happens when a screen reader encounters a post that uses an emoji to function as a bullet point. www.youtube.com/watch?v=MSMs...

Taylor Nation Emoji Bullet Point Tweet

Demonstration of what a tweet with emoji used as bullet points sounds like when read by a screen reader. The tweet also uses a "show more" cut, which isn't accessible when the tweet is seen in the…

youtube.com

For people just getting introduced to accessibility concepts, the number of resources can be overwhelming for people who don't know where to start. These 10 tips from Lireo Designs can be a good way to introduce your team to the basics. www.lireo.com/10-ways-to-i...

10 Ways to Improve Accessibility on Websites and Social Media - Lireo Designs

My 10 tips for making your website and social media more accessible, whether you're a blogger, photographer, writer, designer, or developer.

lireo.com

Automatic transcription can be much faster than manual transcription, but it's not as accurate. Humans can catch errors that software may miss because of background noise or poor audio quality. Always review and edit transcripts before publishing.

Alt text is not the same as a photo caption. Captions are typically written to support a photo, and usually depend on users being able to see the photo. But alt text is meant to be the stand-in for the photo. The alt text is what a screen reader user gets in place of the photo.

Cognitive load refers to how much working memory or short-term memory someone is using at a time. Minimizing the cognitive load it takes to use your site makes it more accessible for people with cognitive disabilities. Limit what you're asking users to remember to use your site.

Hyperlink text should make sense when read out of context. Screen reader users can navigate from link to link, and can listen to links in a list. When navigating this way, only the link is read. So "click here" or "read more" won't make sense.

People often have difficulty reading content when there isn’t sufficient contrast, so it's important to have high color contrast. TPGi’s free color contrast checker tool allows you to determine the contrast ratio of two colors by using an eye-drop tool. developer.paciellogroup.com/color-contra...

Colour Contrast Analyser (CCA) - Vispero

Colour Contrast Analyser (CCA) Use Vispero’s free color contrast checker to optimize your content – including text and visual elements – for individuals with color-blindness or low vision…

developer.paciellogroup.com