Accessibility Core Skills
Alt text: What is it?
The best alternative (alt) text should be taken into account while creating current, interesting material and the associated pictures.
A direct written replacement for an image is alt text.
It is concise, informative, and descriptive. Many users of assistive technology should be able to understand the content and intent of the image thanks to your excellent alt text. For instance, screen readers can convert what is happening onscreen into braille or audio by identifying the alt text in a picture.
Why should I think about alt text?
Whether you know it or not, you already have contacts who use alt text.
Examples of alt text users:
- Details based on context
- Words that convey nuance and emotions in the tone of the content it accompanies and represents (professional, silly, technical, etc.)
- Diversity, ambience, and clothing if relevant
- Repetition of the image caption
- SEO keyword stuffing
- Photographer attribution (put that in the visible caption)
“Color contrast is the difference in light between font (or anything in the foreground) and its background. In web accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information.” (Bureau of Internet Accessibility)
- Due to the various perceptions of color, it is important to not rely on color by itself
to communicate information. While it may appear to you one way while designing a document,
it can look different to your audience for different reasons.
- Users who are colorblind
- Users who look at the document while in bright sunlight
- Adaptive technologies may change how colors appear on devices
- Instead of relying solely on color for distinguishing different things, utilize other
elements such as bold, italics, size, shapes, etc.
- Don’t use underline as it may make it appear as a hyperlink
- Don’t use italics in large amounts
- Black text on a white background always ensures good contrast. However, there are
different methods to test contrast for color and fonts.
- The WCAG guidelines have different contrast ratios for the size and weight of a font.
- 3:1 for normal text less than 14 points
- 4:5:1 for 14-point bold or 18-point non-bold text
- The WCAG guidelines have different contrast ratios for the size and weight of a font.
- The WebAIM Color Contrast Checker shows whether a document passes or fails the WCAG requirements for contrast.Color Reliance uses hue, shade, tint, or tone to convey information in different forms. However, issues arise when color reliance is the only form of conveying this information, the same as a contrast.
Headings are a form of organization. They provide structure and are useful for everyone.
Who needs headings?
- Without the use of headings, screen readers will read the document as a single long section.
- Everyone! For sighted users, a simple way to scan through the document would be to look for the headings, or even use a keystroke to jump from one heading to the next.
- For those using a screen reader, the screen reader can scan through all the headings so the user doesn’t have to listen to every body of text. Screen readers also identify the headings when the text is being read, enabling the user to identify the section they are in.
- Those with cognitive/learning disabilities may need a well-structured document in order to help them visually process and understand the content, and heading provides that organization!
- Most software applications or web content management systems will have a styles menu that allows you to organize and manage all your headings.
- If you are developing a website, a style of all headings can be set through CSS.
- The main heading, Heading 1, typically begins the document and is usually in big,
bold text that describes the entire document.
- Generally, there is only one Heading 1.
- Heading 2 is a large category that relates to Heading 1. And the order continues. Heading 3 is a subcategory of Heading 2, then Heading 4 is a sub-sub category of Heading 3.
- Since headings define a document’s structure, do not skip heading levels or go out
- A Heading 4 should not follow a Heading 2.
- Headings are not as simple as making the font size bigger or a different color either. If in Word or Google Docs, it is important to utilize the platform's Styles.
- Headings need to follow a specific order and hierarchy.
- The main heading, Heading 1, typically begins the document and is usually in big, bold text that describes the entire document.
Windows and Mac
- To create heading levels in Word, navigate to the Home tab and inside the Styles section, there is a Headings feature.
- Editing your document is also easier when headings are used. To modify a heading style, click the Styles gallery and then right-click a Heading type. This is where you can reformat the appearance of headings and it will apply to all current and future headings.
- Having a table of contents allows for easier navigation and preview for long documents
or web pages.
- By utilizing the styles feature, a table of contents can be generated in Word.
- For Mac, click Insert on the menu bar and select Index and Tables. Then you can select the Table of Contents tab and create your own table of contents.
- For Windows, select References from the menu bar and then select Table of Contents. From there, select an Automatic Table.
- Don’t replace a table of contents with anchor links to different sections of a page, unless you indicate what the links do.
- Having a table of contents allows for easier navigation and preview for long documents or web pages.
- A link is a form of navigation that is connected to another location such as a website or file. When a link is used, they usually appear as the URL which can be a random assortment of letters and numbers that usually isn’t descriptive of what you are navigating to. A link should be descriptive, contextual, and meaningful out of context.
- Specified links are important as sighted readers may scan a page for links. Those with a screen reader can do something similar, where they listen to a list of all the links on the page. Speech recognition users can also use voice commands to click on a link by stating “click ---” following it with the link text.
Guide - do's and don't
- Avoid using “click here” or “more” which cannot be understood without context
- Long URLs should be avoided
- Don’t link entire sentences
- Two links should not have the same text, specifically, if they link to different places as this can create confusion
- Make links visually distinct so sighted users understand they are links (such as the default light blue with underline).
- A useful way of utilizing links would be to embed them with other text. Insert the link into a part of the text that is being explained. This can be done by highlighting the text that can be the link text and using the keyboard shortcut control+K on Windows or command+K on Mac.
- Email addresses shouldn’t be linked in other text. When this is done, users won’t know the link will open an email client instead of a web page, PDF, etc.
- Ensure links aren’t confused for buttons
- Links lead to new pages while buttons submit information or perform actions. Buttons are also operable with the spacebar and enter key.
- Examples of issues this creates:
- This presents issues as people utilizing voice control may tell their software to “click button” however the software cannot respond correctly.
- It can create confusion for those with low vision when the screen reader says “link” however they see a button.
Both sighted and screen reader users will find it simple to comprehend content that has been arranged in a list. Screen readers can learn that these objects are related by using list styles. When a prepared list is presented, screen readers announce it and let the user know how many items are included.
For example, a screen reader will say “list with five items.” Bullets should be used for lists of things when the order doesn’t matter, and numbered lists should be used when there
Tables (header rows, etc.)
- Tables are a great way of formatting information, however, it can be very confusing if done incorrectly. If not formatted correctly, tables can be read by a screen reader in one giant block, with none of the information organized in an understandable manner.
- It is simple to create accessible tables. Simple solutions such as identifying a header row and including a table summary (as a caption or alt. text) will aid screen reader users.
- A sighted user follows a table cell by looking at the rows and columns and scanning up/down and left/right. A screen reader can only read each cell individually, therefore when the formatting is incorrect, it makes it difficult to determine the label of a cell.
- Simplify complex tables
- Only have a max. of one header row and one header column.
- Spell out abbreviations and acronyms
- It may be easier to create two or simpler tables rather than have multiple header rows, merged cells, or another table embedded within.
Guide - Do's and Don't
- Use descriptive text
- While captions are not necessary for each table, they can be useful for screen readers.
- Don’t repeat the heading by including the same text in the caption.
- Don’t repeat information in a caption if it’s already in a summary
- Don’t use tables to design a webpage. These layout tables can make web pages more difficult for screen readers to read cells in the proper order.
- Don’t create tables without table headers.
- Designate at least one row or column header.
- This enables screen readers to read the row and column header before the content in the cell.
- Changing the formatting of the text doesn’t create a table header as screen readers can’t tell the headers with the correct cells.
- Designate at least one row or column header.
- Don’t leave empty cells
- If a cell is left empty, both visual and screen reader users may suspect that information is mistakenly missing.
- Screen readers may skip data causing a misalignment with header rows and the correct data cells.
- Use n/a, none, not applicable, etc., instead of leaving a cell blank.
Layout tables vs data tables
- Layout tables are less accessible than data tables. They can be, but it is typically easier/simpler to utilize data tables.
- Both layout and data table’s meanings are affected by the order in which the content is presented.
- Despite this, they are different. Screen readers read the content of the table based on the source code order for layout tables.
- Screen readers identify the presence of the table in data tables. This includes reading the columns and rows and the numbers. Screen readers, for data tables, also provide table navigation functionality.
- Screen readers are able to distinguish between data and layout tables by performing an analysis of the table markup and structure and are able to ‘guess’ which table.
- Layout tables are typically used for having flexible control over elements on a page. The concern with layout tables is due to a lack of flexibility for content adjustments such as text sizing.
- The main guide with layout tables is simple is better. It is common for layout tables to be overused for design which creates confusion for the screen reader and its user.
Video and Audio
Videos, narrated projects, and podcasts are just a few examples of ways of sharing information. For a deaf or hard-of-hearing person, these platforms can be difficult or even impossible to utilize without proper accessibility.
- In order to share videos and other audio-related content ensure it includes captions and audio descriptions. These features allow users to read the spoken dialogue and sound effects.
- Captions are time-coded and appear at the bottom of a video. They can be “closed,” meaning they can be turned on or off, or they can be “open,” meaning they are on the entire time.
- Transcripts are text versions of the speech or audio in a multimedia presentation. It captures all the spoken audio including on-screen text and descriptions of key visual information. They are not time-coded, such as captions.
- While deaf and hard of hearing are some of the first people we may think of utilizing these accessibility materials, almost everyone can benefit from them in some way.
- These accessible materials can be useful to:
- People learning a new language or the audio content isn’t in their native language
- People with learning disabilities or other cognitive impairments or process information in different/multiple ways
- When in a quiet environment, such as a library
- When in a loud environment and it is too difficult to hear with audio
- Audio output, such as headphones, isn’t supported by a device/equipment
- People with blind or low vision
- People who cannot look at the video due to being in a visually consuming environment
- When videos have technical issues or accessibility problems, transcripts are an alternative choice
- Captions are one form of a text based alternative to multimedia content. Ensure that your videos have adequate captions by reviewing your videos. Look for labels when someone changes speaking and that the captions match what is being said.
- If you are sharing a video and there are no captions either replace the video or ask the owner of the video to caption it. To edit captions on videos you made, edit auto-generated captions in YouTube, or you can use either sites such as Kaltura and VoiceThread.
- More in-depth captioning
- With auto-generated captions, there are likely to be mistaken with misinterpretations, missed speech sounds, etc. You should fix spelling mistakes, add any missing words, and fix the punctuation. Do not paraphrase or censor the speaker.
- It is also important that the captions are aligned with the audio. Each block of caption text should be no more than 2 lines, generally. The block should be on-screen for about 1.5 to 6 seconds. The lines of the caption should be short and easy to read with around 5 to 6 words per line. If there is a long line, break them into two shorter lines. A break could happen when some words are longer than others or for sentence cadence, where a sentence breaks similarly to when speech normally pauses.
- Add speaker identifiers when there’s more than one speaker and it’s not clear who is speaking.
- Specific Speaker captions
- When there is a back-and-forth conversation between speakers, include a block of text for each speaker.
- When names are unknown, use general labels.
- When it is clear who is speaking (they are on screen), they do not need to be identified.
Instead, use an angled bracket, >, to identify the speaker
- And once the speaker changes, use a double-angled bracket, >>
- Sound and music specific
- When a sound’s source is present on screen, it does not need to be identified.
- When there are sounds, not speaker-related, include them in brackets on their own line
- Include a sound’s source description
- When a song is playing, the caption should include the performer and the song title if it is known
- Ensure that lyrics are captioned verbatim
- When describing music, use objective words