Digital Accessibility Fundamentals

OIT, Technology Accessibility Program (TAP)

January 12, 2023

Digital Accessibility Fundamentals

Agenda:

• What is Digital Accessibility?
• Why does digital accessibility matter?
• Accessibility Laws
• POUR: Four Principles of Accessibility
• Digital accessibility basics
• Resources
• Questions

2

Getting Started with Accessibility

To avoid the peaks and valleys of the accessibility emotional roller coaster, people just getting started on their accessibility journey need to accept the following statement at face value: Your first effort at accessibility is unlikely to be outstanding. And that is OK!

Why Does It Matter?

It matters because:

• It’s the law. It’s a civil right. It’s a human right. It’s the right thing to do.
• Twenty-six percent of the U.S population has a disability (1 in 4)...that’s 61 million people, and nearly 1,015,417 Coloradons (23% of the population) - CDC.gov
• Enhancing the lives of everyone including those with and without disabilities
• Increasing general access to a much broader audience
• Increasing search optimization
• Promotes inclusivity and increasing language access opportunities
• Contributing positively to the digital community
• Showing demonstrated business and community leadership
• Improving your overall brand
• Increasing sales and completing online transactions

4

Accessibility Laws

This concept may feel new, but there has been a steady progression toward this project:

• 1964 - Civil Rights Act was signed into law.
• 1986 - Section 508 was added to the US Rehabilitation Act of 1973.
• 1990 - Americans with Disabilities Act (ADA) was signed into law.
• 2000 - Colorado web accessibility statutes first added (§24-85-103 and §24-85-104 C.R.S.)
• 2003 - U.S. Department of Justice issued guidance on web accessibility for state gov’t.
• 2008 - Web Content Accessibility Guidelines (WCAG) Version 2.0 were published.
• 2011 - State and Local Governments were added to the ADA.
• 2018 - WCAG 2.1 was published World Wide Web Consortium (W3C).
• 2018 - State of Colorado adopted the WCAG 2.0 standards.
• 2021 - State of Colorado adopted the WCAG 2.1 standards.
• 2021 and beyond - HB21-1110 planning and implementation.

5

POUR: The Four Principles of Accessibility

• Perceivable: People can identify content by way of sight, sound, and/or touch, regardless of device or operating system
• Operable: People can operate controls, buttons, and navigation by identifying it and then clicking, tapping, swiping, or using voice commands.
• Understandable: People can understand the content through consistency in functionality, design structure, language, imagery, and alternative representations.
• Robust: People should be able to choose their tech to interact with websites, online documents, multimedia, and other information.

6

Basic Elements of Accessible Websites

As outlined in the WCAG 2.1 and 2.2 guidelines, some of the basics of accessibility include:

• Proper (semantic) structure of regions, headings, lists, and other structural elements
• Images that are properly described (alt text) and provide readable color contrast.
• Links and buttons provide meaningful, descriptive text and can be visually distinguished
• Forms provide properly identifiable messaging, validation, and error recovery. Text labels are used to associate form input elements.
• Tables are used strictly for tabular data and formatted appropriately
• Videos are closed captioned, and audio includes accessible text transcripts.
• Fonts/Typography should be readable and understandable

7

Structure In Content

Content sits inside of larger sets of content, and you can follow the size of the nested boxes to know if you’re in a bigger or smaller section.

Elements (or markers) in the structure of your content allows readers to logically follow all the sections, and sub sections, of content as they tab, scroll, or scan through it.

These structural elements include things such as:

• Headings
• Bulleted Lists
• Numbered Lists
• Table Structures
• Regions/ Containers/ Page Layout

8

Headings and Heading Hierarchy

• Use headers in a logical order. (H1, H2, H3, etc.)
• Use ordered headings to provide a meaningful high-level outline of your content. This is like a table of contents that gives structure to the page.
• Use headings for the structure first and then style the headings.
• Don’t skip headings! Your audience will get lost and frustrated.
• Don’t use blank headers. People expect content associated with headers.
• Websites need only one single, descriptive H1 at the top of the page to tell the user what that page is about.

H2: �Follows the Sherpa

H1: �The Lead Sherpa

9

Lists

Lists are typically either a quick scanning set of similar or related items, or a numbered set of steps or instructions. When creating a list of content, you need to use the list function. Only use for true lists. Don’t use lists for paragraphs of text.

Numbered Lists (Ordered): Lists with a specific order such as steps should use the numbered list function - for screen reader users and visual readers

1. Go to the hamburger joint
2. Pay for your meal
3. Eat your burger

Bulleted Lists (Unordered): Lists with no order to them should use the bullet functions so that both screen reader users and visual readers can understand the structure and hierarchy of listed items.

• Pickles
• Cheese
• Bacon

10

Links and Buttons

When designing buttons or links, the purpose of each link should be able to stand alone and be well understood.

• Make sure the button or link is clearly labeled. Example: “See a List of Services” or “Pay Bill Online”
• Avoid using ambiguous terms like “click here”, “more”, or “click for details”
• Links and button text should make sense out of context
• Be succinct. Don’t overkill and include every detail.
• Links do not need to include the word "link" in the link text
• Include instructions and related info at the end of the link; not the beginning. Example: “Pay online (opens in new window)” or use a meaningful icon with aria-label
• Buttons and links should have clearly visible states for default, hover, and visited states
• Hover states should also have a secondary visual style such as dashed border if color is the only other visual indicator.

11

Tables

Avoid using tables for layout purposes. Only use for tabular data.

• Include a title and summary in the table properties
• Make sure that color contrast in tables are also accessible
• Always include table headers. Short and self-explanatory tables can sufficiently use just column headers. Long and more complex tables should include both row and column headers.

Delivery slots

Example from w3.org

12

Images and Alternative Text

Images should be clear, easy to read and understand, and have proper contrast for all key elements. This is true for photography, graphics, and iconography.

• Quality image resolution and scalable for different devices/screen types
• Iconography should be easy to understand, meaningful and consistent (e.g.- line versus solid icons)
• All images should have some sort of description included or remain blank for decorative images

Alternative text, or “alt tags”, are image descriptions that help describe an image to someone using assistive technologies.

• Descriptions should be no longer than 125 characters.
• Do not use the word “graphic or image”
• Avoid text as images, if possible. Text in images must be included in the image description or a supplemental transcript.

Example Alt Tag:

“Downhill snow skier in bright green jacket and black pants carving out snow with their skies on a mountain slope” – 97 characters

13

Color Contrast & Color Dependency

Color should not be used as the only means of conveying information, because some users may not see colors or see them in the same way. When using color to convey information, use an additional means to convey the same information in another way (like text).

There are two aspects to consider regarding accessible color; Color contrast and color dependence.

• Color contrast is the ratio of the foreground color (text) and the background color.
• Color dependence is the need to see color to understand the information.
• Provide an alternative method, such as text, to provide the same information.

Use a color contrast checker to help identify and guide you to the appropriate contrast levels. You can also test for various types of color blindness using the Spectrum Chrome browser extension.

14

Audio & Video Content

Captions are a text version of audio or video content provided for people who are deaf or hard of hearing.

Transcripts help further explain the content of a video and are required for audio only files. They can also provide easy translation for non-English languages.

15

When You Need Captions and Transcripts

• Audio-only (e.g., podcasts): Accurate transcripts for listeners who are deaf or don’t easily capture all auditory information.
• Video with audio content: For pre-recorded and live videos, you will need accurate captions.
• Live video (happening in real time): Captions are required
• Video only (no audio): Captions are not needed for “Video only” files because there is no audio information to capture.

16

What to Include in Captions?

• Normal punctuation and grammar rules
• The delivery or style of the speech when possible
• All words spoken by characters, including a narrator
• Music including words to songs and who is singing, if possible
• Identification of off-screen speakers.
• Descriptions of sound events that have an impact on the story or meaning.
• Text on screen

17

Accessibility Is

A Journey

You can’t build accessible content overnight…It’s about making progress one step at a time. One small moment of victory propelling you forward to the next. Accessibility is journey, not a destination

18

Keep Moving!

The best accessibility is done in a continuous process improvement program loop, being visited and revisited throughout the entire design and development process. This continuous accessibility reassessment will make it easier to determine the low hanging fruit that can benefit from more accessibility love in your organization. Work with team members to leverage each other’s efforts; you shouldn’t do this work alone.

Commitment is the key. Just start.

19

Resources

• WAVE Web Accessibility Evaluation Tool, WebAIM
• Siteimprove Browser Extensions (Chrome and Firefox), Siteimprove*
• Selecting Web Accessibility Evaluation Tools, W3C
• Writing for Web Accessibility, W3C
• Accessibility Principles, W3C
• OIT website accessibility

20

Questions?

If you’re thinking it… most likely someone else is as well.

Reach out to the Technology Accessibility Program at OIT_Accessibility@state.co.us.

21