Digital Accessibility Basics

Overview of Digital Accessibility Basics

Whether you're posting on social media, designing a webpage, or creating course materials, these tips will help ensure your content is accessible for everyone. Unsure where to begin? Start with the basics. Been working with digital accessibility for a while? Sometimes it’s good to revisit the basics.

Common accessibility mistakes when creating digital content:

• Poor or missing alt text for images
• Poor color contrast
• Poor link text
• Poor or missing heading structure
• Poor keyboard navigation

Writing for Accessibility

Writing style influences the reader and affects content accessibility. WebAIM has a great resource on Writing Clearly and Simply.

Here are some tips to make writing more accessible:

• Be clear and concise.
• Avoid all caps.
• Reserve underlining for links only.
• Use respectful language.

Accessible Text

A lot goes into making content accessible. The font selection, spacing, and headings all impact the accessibility of the content. There is no one right answer. Designing with accessibility in mind is helpful when formatting text. Here is a video that is approximately 10 minutes long, showing various fonts, font sizes, and spacing to help with selecting fonts.

Fonts

Fonts need to be readable. When viewing on a screen, certain fonts appear more visually appealing than others.

Guidelines for digital content fonts:

• Stick to sans-serif fonts. Some recommended fonts are Arial, Calibri, Helvetica, Tahoma, and Verdana.
• Use at least 12-point font for body text and 18-point or larger font for presentation.
• Headings should be larger than the body text or visually distinct, such as bolded or a different font.
• Check the number 1, the uppercase I (Indiana), and the lowercase L (listen) in the chosen font. These characters appear identical in certain fonts, which makes the content harder to read.
• Avoid special fonts. To view the font correctly, the user will need access to the font, which isn’t always possible. If the font appears correctly for sighted users, screen readers may interpret it differently. Here is a demonstration of a screen reader reading a post with special fonts.

Although Times New Roman is a serif font, it is considered an accessible digital font. If using it, please ensure it is Times New Roman, not Times or Times Roman. The Times New Roman font has undergone slight changes to make it web accessible. Our department recommends using Times New Roman solely for headings or documents that will mainly be printed.

Spacing

White space serves a purpose. It enhances both visual appeal and readability.

Guidelines for spacing:

• Use 1.15 to 1.5 times the font size for line spacing or line height.
• Use twice the font size between paragraphs.
• Separate headings from the body of the text.
• Break up long paragraphs.
• Use lists to break up content.
• Add space between form fields.

Headings

Headings are used to structure content. Think of them like chapter titles. Every web page or document must have at least one heading.

Use the following structure for headings:

• Heading 1 is the main title of the page or document.
• Heading 2 is for major sections under Heading 1.
• Heading 3 is a subsection of Heading 2, and so on.

Although only one Heading 1 is permitted, multiple headings for other levels are allowed. Use headings to organize content. Screen reader users use headings to quickly scan the page or document. Headings allow them to quickly jump to a section. Keep headings descriptive and concise. Use styles to structure headings rather than using bold or font size alone.

Color

Avoid relying on color alone to convey meaning. For example, if there is a graph with two solid lines, one red and one blue, color alone distinguishes the lines. Instead, make one line dashed so sighted users can benefit from the color; but with one line dashed and the other solid, color isn’t the only way to tell them apart.

Ensure sufficient contrast between text and background. Use tools such as WebAIM Contrast Checker or TPGi’s Colour Contrast Analyzer to check contrast ratios. TPGI’s Colour Contrast Analyzer is available for installation on Northeast State Community College's computers. Please submit a Help Desk Ticket to have it installed on a college-owned computer.

Images

Images can enhance digital content, but screen readers can’t interpret images without assistance. Adding alternative text, also known as alt text, is how a screen reader describes the image. It’s also what appears when the image doesn’t load on the screen.

Tips for adding alt text:

• Describe the essential content or function of the image.
• Don’t repeat text that is around the image.
• Keep it brief but meaningful.
• Avoid phrases like image of or picture of because screen readers will announce it as an image.

Links

Accessible links help everyone understand where a link leads and what it does. Look at the previous links. Is it clear what is available when clicking the link? That is the goal!

Tips to create accessible links:

• Avoid using the phrase Click here when adding a link.
• Be descriptive so the link's purpose is clear.
• Avoid typing the full address. Screen readers read URLs character by character.

Making links descriptive helps screen reader users understand where the link goes and improves the experience for visual users.

Keyboard Navigation Basics

Not everyone uses a mouse. Make sure all content is accessible with just the keyboard.

Tips to improve keyboard access:

• Avoid hover-only interactions.
• Test navigation using the Tab key.

Tables

Tables are a great way to organize information, but several key considerations should be kept in mind when using them.

Tips to make tables accessible:

• Use tables for tabular data only.
• Always set a header row, header column, or both.
• Header cells can never be blank.
• If using a header row and a header column, ensure the top-left cell contains text.
• Don’t merge cells. If necessary, review the table structure and consider modifications.

Acronyms and Abbreviations

Not only can acronyms and abbreviations be hard to understand, but they can also be inaccessible to some people with disabilities. If using acronyms or abbreviations, be sure to spell them out the first time using them on a page, document, or social media post.

For example, if you encounter the letters 'TN', what do they mean? My guess is Tennessee.

Consider the following 'TN' examples:

• Reference the TN when inquiring about payment.
• The monitor uses a TN panel.
• The patient was diagnosed with TN.

Here is a better way to approach the previous examples:

• Reference the Transaction Number (TN) when inquiring about payment.
• The monitor uses a Twisted Nematic (TN) panel.
• The patient was diagnosed with Trigeminal Neuralgia (TN).

Captions and Transcripts

Captions and transcripts are not the same thing.

• Captions, also called closed captions, are the text that appears on a video. If available, most video players provide the option to turn them on or off.
• Transcripts are provided separately from the video. It may be in the form of a document, or the video player may have a separate area to display the transcript.

AI is doing remarkable things with auto-generated captions, and it is a great first step for creating captions. YouTube captioning is approximately 70% accurate, and YuJa captioning is around 90% accurate. Notice neither is 100%. The quality of the video affects how well the auto captions work. Always review the captions and correct them to meet WCAG success criteria 1.2.2.