{"id":426,"date":"2021-09-17T16:05:33","date_gmt":"2021-09-17T21:05:33","guid":{"rendered":"https:\/\/wp.stolaf.edu\/accessibility\/?page_id=426"},"modified":"2026-04-08T14:35:29","modified_gmt":"2026-04-08T19:35:29","slug":"key-concepts","status":"publish","type":"page","link":"https:\/\/wp.stolaf.edu\/accessibility\/key-concepts\/","title":{"rendered":"Key Concepts for Accessible Digital Content Design"},"content":{"rendered":"
\n

Where to Start<\/h2>\n\n\n\n

Whether you’re writing a syllabus, creating a poster, or drafting a web page, there are six key concepts you can start to employ now to create accessible digital content. The following handful of practices are a great place to start if you’re new to considering accessibility in the work you create.<\/p>\n\n\n\n

    \n
  1. Headings<\/a><\/li>\n\n\n\n
  2. Lists<\/a><\/li>\n\n\n\n
  3. Contrast<\/a><\/li>\n\n\n\n
  4. Audio and Video<\/a><\/li>\n\n\n\n
  5. Links<\/a><\/li>\n\n\n\n
  6. Alternative Text<\/a><\/li>\n<\/ol>\n\n\n\t\t\t\n\t\n\t\t\t
    \n\t\n\t\n\t\t\t\t\t
    \n\n\t\t\t\t

    Headings<\/h2>\n\n\t\t\t<\/header>\n\t\t\n\t\n\t\n\t
    \n\n\t\t
    \n\t\t\t\n
    \n\n\t
    \"list<\/figure>\n\n\t\t\t
    \n\t\t\t

    Using headings within a document, slideshow or web page serves two purposes: it provides a more readable visual layout, AND it makes it possible for visually impaired users to use a screen reader to make sense of the content.<\/p>\n\n\t\t<\/figcaption>\n\t\n<\/figure>\n\n\t\t<\/div>\n\t\t

    \n\t\t\t
    \n
    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tDo's and Don'ts\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Do<\/h5>\n

    When creating headings, it is critical to use the heading properties of whatever tool you’re working in, identifying headings with heading 1, heading 2, etc. This will allow your content to format more consistently across web browsers and screens, as well as make it intelligible for a screen reader.<\/p>\n

    Don’t<\/h5>\n

    Manually create a heading by increasing the size, font or boldness of the text. This will not mark it as a proper heading within the flow of a document.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t\n

    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tHow To\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    Headings in WordPress<\/a><\/p>\n

    Headings in Google Docs<\/a><\/p>\n

    Headings in Word<\/a><\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t<\/div>\n\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\n\t\t\t<\/div>\n\t\n\n\n\t\t\t\n\t\n\t\t\t

    \n\t\n\t\n\t\t\t\t\t
    \n\n\t\t\t\t

    Lists<\/h2>\n\n\t\t\t<\/header>\n\t\t\n\t\n\t\n\t
    \n\n\t\t
    \n\t\t\t\n
    \n\n\t\n\n\t\t\t
    \n\t\t\t

    Like headings, lists aid in readability of your content by grouping related items and guiding the eye. Lists also help screen readers identify related items for visual impaired users.<\/p>\n\n\t\t<\/figcaption>\n\t\n<\/figure>\n\n\t\t<\/div>\n\t\t

    \n\t\t\t
    \n
    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tDo's and Don'ts\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Do<\/h6>\n

    As with headings, it is important to use formatting tools to create lists (like bullets and numbers – unordered and ordered lists) This not only improves the layout and organization, it is what identifies a list as such for screen readers.<\/p>\n

    Don’t<\/h6>\n

    Manually create lists using numbers or hyphens.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t\n

    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tHow To\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    You may already be familiar with using lists by selecting the bullet or numbered list buttons in your text editor, which can be found in any editor you’re using, whether in WordPress, Moodle, Word, Slides, and more.<\/p>\n

    Lists in Word<\/a><\/p>\n

    Lists in Google Docs<\/a><\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t<\/div>\n\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\n\t\t\t<\/div>\n\t\n\n\n\t\t\t\n\t\n\t\t\t

    \n\t\n\t\n\t\t\t\t\t
    \n\n\t\t\t\t

    Contrast<\/h2>\n\n\t\t\t<\/header>\n\t\t\n\t\n\t\n\t
    \n\n\t\t
    \n\t\t\t\n
    \n\n\t\n\n\t\t\t
    \n\t\t\t

    Contrast is another characteristic of digital content that can be used as both a design element (think\u00a0bold<\/strong> font, or distinct colors), and as a consideration for accessibility. For example, a light gray font on a white background doesn\u2019t provide sufficient contrast to be readable, and especially by visually impaired users. In this way, when referring to contrast and accessibility, it\u2019s typically in terms of color<\/em>\u00a0contrast and making sure that fonts are readable against the background colors they appear on.<\/p>\n\n\t\t<\/figcaption>\n\t\n<\/figure>\n\n\t\t<\/div>\n\t\t

    \n\t\t\t
    \n
    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tDo's and Don'ts\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Do<\/h6>\n

    Use built in accessibility checking tools and a contrast checker to determine sufficient color contrast. Accessibility checkers built in to Word, Powerpoint, Adobe Acrobat will analyze contrast and flag items that don\u2019t meet WCAG standards.<\/p>\n

    Don’t<\/h6>\n

    Try to eyeball contrast because vision and monitor settings can be misleading.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t\n

    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tHow To\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    In choosing color schemes, designers can use the free WebAIM Contrast Checker<\/a>\u00a0and enter the foreground and background color values to determine appropriate contrast.<\/p>\n

    Using Grackle Docs<\/a> in Google Docs<\/p>\n

    Accessibility Checker in Microsoft 365<\/a><\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t<\/div>\n\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\n\t\t\t<\/div>\n\t\n\n\n\t\t\t\n\t\n\t\t\t

    \n\t\n\t\n\t\t\t\t\t
    \n\n\t\t\t\t

    Audio and Video<\/h2>\n\n\t\t\t<\/header>\n\t\t\n\t\n\t\n\t
    \n\n\t\t
    \n\t\t\t\n
    \n\n\t\n\n\t\t\t
    \n\t\t\t

    All video and audio content that is shared via school websites, within departments or via courses should have text-based alternatives available. Captions and transcripts benefit hearing impaired users, as well as those learning the language used in the content, or any user who finds reading preferable to listening given their situation.<\/p>\n

    Furthermore, some applications allow keyword searching of captions\/transcripts to make it easier for users to locate relevant content, such as in Panopto videos’ captions interface.<\/p>\n\n\t\t<\/figcaption>\n\t\n<\/figure>\n\n\t\t<\/div>\n\t\t

    \n\t\t\t
    \n
    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tHow To\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    The simplest method of adding captions is to use tools that can create captions automatically, such as uploading content to Panopto. The auto-captions here are then editable to correct any mis-identified words. Please refer to Panopto’s captioning documentation<\/a> for additional information.<\/p>\n

    Content that is created and streamed through Broadcast Media’s services will also automatically provide captions.<\/p>\n

    Videos uploaded to other sharing services, such as YouTube, also have a means for editing auto-created captions<\/a>.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t<\/div>\n\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\n\t\t\t<\/div>\n\t\n\n\n\t\t\t\n\t\n\t\t\t

    \n\t\n\t\n\t\t\t\t\t
    \n\n\t\t\t\t

    Links<\/h2>\n\n\t\t\t<\/header>\n\t\t\n\t\n\t\n\t
    \n\n\t\t
    \n\t\t\t\n
    \n\n\t\n\n\t\t\t
    \n\t\t\t

    You’re likely familiar with linking to content within digital documents and web pages as this is a core asset of digital media. Learning how to use links in effective ways can benefit users of all types.<\/p>\n\n\t\t<\/figcaption>\n\t\n<\/figure>\n\n\t\t<\/div>\n\t\t

    \n\t\t\t
    \n
    \n \t\t\n\t\t\t\t\t \n\t\t\t\t\t\tDo's and Don'ts\t\t\t\t\t<\/span>\n <\/button>\n \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Do<\/h6>\n

    Use short descriptive phrases as your link text by writing as you normally would and then linking a portion of a sentence that is most relevant to the information the link is pointing to.Example: The Accessibility at St. Olaf site outlines key concepts<\/a> to adopt in order to create accessible content.<\/p>\n

    Don’t<\/h6>\n

    Avoid pasting a full URL in the body of a document\/page as this can be both visually problematic and it will be read out character by character to a visually impaired person using a screen reader.<\/p>\n

    Avoid short non-descriptive text links such as:<\/p>\n