Accessibility Workshop on OER for Hostos

 

These accessibility best practices can be used across items. Think of them when you are creating a word document, a Power Point presentation, a website, or a PDF.

Page Titles

Why are page titles important?

• Screen readers announce the page title when they load web pages or documents.
• A good page title helps orient users to the content of the page or document.

How to create good page titles:

• Page titles should be brief, clear, informative, and unique.

Layout

Why is layout important in accessibility?

• A site or document which is well-structured is easier to understand and navigate.
• Everyone can benefit from a site which is well-structured.
• A well laid out page helps people with visual impairments, including low vision, orient themselves on the page and understand content.
• Keyboard users can browse pages and their sections more efficiently.
• People with cognitive and learning disabilities can more easily find and prioritize content on a well laid out page.

How to create good layout?

• Use headings to separate sections.
• Use lists.
• Don't use tables for layout.
• Don't only use visual cues to show the layout.

Headings

Why use headings?

• Organizing a web page, word document or pdf with HEADINGS helps users get an idea of the page's structure and organization. 
• When people can follow a site or document's organization and structure, it is easier for them to comprehend the content.
• Headings become a navigation tool for both those who can see visually and those who use screen readers.
• For those who use screen readers, the use of headings allows them to listen to a list of all the headings and skip to the desired area on the page or document.
• For those who can see, the use of visually apparent headings allows them to quickly visually scan the document or site to get an overall idea of meaning of the site or document. 
• Headings also help those with cognitive disabilities understand and navigate.

How to use headings:

• Make heading text brief, clear, informative, and unique.
• There should only be one Heading 1 <h1> per page, however there can be more than one <h2> to <h6> per page.
• Each level of heading, indicates the relationship from one part of the content to the other parts.
• The sub-sections under a heading relates logically to a heading above it.
• Duplicate headings can exist on separate pages, but each heading should be unique within the same page, if at all possible.

Lists

Why use lists?

• Use different types of lists to group information according to its nature to provide orientation for users.
• When list are used correctly, assistive technologies are able to convey information to their users as they navigate to and within lists, such as the total number of items and the relative position of each item in the list.
• Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate and sometimes we provide info in tables that really would be better suited to lists.

How to create lists:

• Use the built in "lists" option in WYSIWYG editors (what you see is what you get) to create lists.
• Don't create lists by manually typing in numbers or indenting, these are not accessible.
• Create Ordered Lists <ol> for when there is a defined sequence or order intended for the items in the list.
• Create Unordered Lists <ul> for when there is no specific order intended for the list you are creating.
• Create Description Lists <dl> for when a specific structure is needed to provide definitions for terms.

Meaningful Link Text

Why use meaningful link text?

• Screen readers pull up lists of links and reads them out so they need to be written in meaningful text to provide users with meaning.
• Links such as "Click Here" or "More" don't provide any information to screen readers and are meaningless out of context.

How to create meaningful link text:

• Make sure the link text is informative and provides context.

Alt-text for Images

Why use alt-text for images?

• Making images and graphics "visible" to all users is one of the first principles of accessibility. 
• Adding alternative text ("alt text") will make images and graphics "visible".
• For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
• Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
• Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.

Don't shy away from using images:
"Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content."  -- World Wide Web Consortium (W3C). (2017). Web Accessibility Tutorials. Retrieved from: https://www.w3.org/WAI/tutorials/images/

How to create alt-text:

• Remember that context matters when creating alt-text.
• Always ask yourself "What is the context and purpose of this image/graphic?"
• Create alt-text which provides a textual alternative to non-text content.
• Describe the content and function represented by the image/graphic.
• TIP: Place a "." period at the end of your alt-text, this notifies screen readers the alt-text is done.

Videos

Why make videos accessible?

• Videos should be produced and delivered in ways that ensure that all members of the audience can access their content. An accessible video includes captions, a transcript, and audio description and is delivered in an accessible media player.
• Captions are text versions of the audio content, synchronized with the video. They are essential for ensuring your video is accessible to students, employees, and members of the public who are deaf or hard of hearing. They also help non-native English speakers to understand the video, make it possible to search for content within the video, help all students learn the spelling of technical terms spoken in the video, and make it possible to generate an interactive transcript where users can click anywhere in the transcript to watch the video where that text is spoken.

How to make videos accessible:

• Create captions for your video

Tables

Why make tables accessible?

• Tables used for layout are not accessible. Using tables for layout is bad practice.
• Creating a properly structured table helps a blind, low-vision and/or screen reader user make sense of a table by reading out the heading titles and then cell content.
• Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers.

How to use tables:

• Make sure your tables have header rows.
• Tables which are not formatted with table headings are not accessible.
• Always use the simplest table configuration possible.

Color Contrast

Why worry about color contrast?

• Choosing accessible colors for your documents and site is important.
• Colors affect the readability of your document and site for all users, not just those with vision impairments.
• The only people for whom the color choices don’t matter are those using screen readers.

How to use color correctly:

• Don't use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
• This is true for the main text of your document, links in blocks and images of text.
• In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
• Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
• To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).