@A11yAwareness@disabled.social avatar

A11yAwareness

@A11yAwareness@disabled.social

Helping you better understand web accessibility for people with disabilities, whether you're a student, teacher, journalist… whomever!

Run by https://mastodon.social/@patrickmgarvin

This profile is from a federated server and may be incomplete. Browse more on the original instance.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Everyone who works on a website has a role to ensure the site and its content are accessible. This resource from Vox Media breaks down some accessibility tasks by job role, including content creators, designers, developers, project managers, and testers.

https://accessibility.voxmedia.com/

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

For screen readers to recognize headings, heading text can't just be body text or normal text that's been made to look bigger and bolder. It must be formatted as a heading. In Microsoft Word and Google Docs, this can be done in the styles box. In HTML, use the tags h1 through h6.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Some will publish podcasts but wait up to 24 hours before adding transcripts instead of publishing them together. The end goal should be to have the transcript ready at the same time as the podcast. This will require multiple teams working together toward that goal.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Any image shared on social media needs alt text. So today, as you share Super Bowl images, memes, screen shots, and more, don't forget alt text. This helps everyone using a screen reader, whether they are blind, have low-vision, have a cognitive disability, etc.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

For beginners, it can be difficult to know what to put in alt text, as well as when alt text is needed and when it isn't. This decision tree from @w3c helps you determine what to do, based on specific situations.

https://www.w3.org/WAI/tutorials/images/decision-tree/

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Many struggle with writing alt text for charts and other other data visualizations. Amy Cesal's "Writing Alt Text for Data Visualization" hammers home the importance of explaining the chart type, the type of data, and the reason for the chart.

https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

You probably wouldn't publish an article filled with mistakes, so don't do it with transcripts or video captions, either. Auto-transcription services can be a great starting point, but that's what they are: a starting point. They still need editing to be publication ready.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

When writing alt text, focus on what is actually in the image. Any relevant information that isn't describing the image itself should be in a caption below the image, not in the alt text. This includes photo credits, permissions, and copyright information.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

If you have an election results chart, the alt text needs to communicate the results. "Election results" is not enough. The same rules apply for alt text for images of weather charts. "Weather chart" doesn't cut it and doesn't convey what the chart is actually saying to users.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

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.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

When creating PDFs, avoid using "Print to PDF." A screen reader user may still be able to access the text of PDFs created this way, but heading structure, alternative text, and any other tag structure will be lost. Using "Save As" or "Export" can preserve these tags.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Alt text is meant to convey the information or context that sighted users get from an image. But if your alt text includes extra information that isn't in the image, you're giving screen reader users additional context that isn't conveyed to people not using screen readers.

A11yAwareness,
@A11yAwareness@disabled.social avatar

@scy Alt text is meant to give screen reader users the equivalent content and context that sighted users gets. If a picture shows people waiting in line outside of a polling place, the alt text can say that and describe the picture in some detail. But there are some things that sighted users couldn't possibly get from that image: how many hours that polling place was open that day, how many people came in total, etc. That should go in a caption, for everyone to get, rather than the alt text.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

For audio-only content like podcasts, provide a transcript. For videos with audio, provide both transcripts and captions. In the transcripts and captions, include the spoken information and sounds that are important for understanding the content.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Avoid using images of big blocks of text. Using actual text instead of images of text will help screen reader users, but also will help people with reading disabilities. Using actual text helps users who need to adjust the text's font, color, size, and alignment.

A11yAwareness,
@A11yAwareness@disabled.social avatar

@davidtoddmccarty @rolle

Hi David, thanks for reaching out. The point of accessibility is not to "avoid doing anything that seeing people might enjoy." A chart that is made with HTML and CSS can be just as visually appealing as a chart made that is a static image. Furthermore, that chart can appear in more screen sizes, not to be mention also be customized by people using assistive technologies. A lot of things can be rendered using HTML, CSS, and images, avoiding static images of text.

A11yAwareness,
@A11yAwareness@disabled.social avatar

@davidtoddmccarty @rolle

If your comment was not meant to be snarky or troll-like, there are journalists working to make news sites more accessible to people with disabilities. There are visual journalists who able to create things that "seeing people might enjoy" that also can be used by people with disabilities. They don't have to be mutually exclusive.

In your neck of the woods, Joe Amditis of the Center for Cooperative Media is doing some great work demystifying accessibility.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Don't forget to consider attention spans when you're writing alt text. Ask yourself, "What is imperative for me to share about this image? Am I adding useful context for this image? Or am I adding distracting information that will make it more difficult for people to comprehend?"

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

When writing alt text, be specific but also succinct. Stick to as few words as you can. Is the clothing relevant? Is the color of the plate important? What about the weather in the background? Decide whether this info adds or distracts from the context of the image.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Automatically updating content can be extremely distracting, especially for users with vestibular disorders or attention difficulties. This could force users to scroll through page content to not see the animation, or to just look away. Allow animations to be paused or stopped.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

When writing alt text, ask yourself if you would picture an approximation of the image if it was described to you over the phone using the alt text you've written. Doing that exercise can be a good way to determine if you're on the right track.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Automated accessibility testing involves running a page through tools and software to detect errors. Manual testing involves humans testing pages. Automated testing can be faster, but automated tests can't catch every error. Thus, use both automated and manual testing.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

Some people replace the word "season" with "szn" or the word "please" with "plz." Not all sighted users will know what those spellings are supposed to mean, and many screen reader users won't, either. Many screen readers will read "szn" as S-Z-N and "plz" as P-L-Z.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

You don't necessarily want to use the exact same alt text each time a specific image is used. Alt text must consider the context of the image and why it's being included on a site, post, article, etc. In other words, alt text depends on where you're including the image and why.

A11yAwareness, to random
@A11yAwareness@disabled.social avatar

People who are new to writing alt text sometimes feel they must describe every detail in every visual, including logos. This is unnecessary and will overwhelm screen reader users. For example, it's OK to write "Google logo" rather than describing the logo in exhausting detail.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • kavyap
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • tacticalgear
  • khanakhh
  • Youngstown
  • mdbf
  • slotface
  • rosin
  • everett
  • ngwrru68w68
  • Durango
  • JUstTest
  • InstantRegret
  • cubers
  • GTA5RPClips
  • cisconetworking
  • ethstaker
  • osvaldo12
  • modclub
  • normalnudes
  • provamag3
  • tester
  • anitta
  • Leos
  • lostlight
  • All magazines
    •