DA plays, everyone should learn and use these for creating accessible content.
Power plays, accessibilty skills for your specific role.
DA training, on-demand DA training through Level Access via the State of Texas (accessible content is required under Texas law).
Additional resources specific to your role.
Overview
Be a digital ally: create accessible content
We can all create accessible digital content, no matter our role. We can contribue to Digital Accessibility (DA) by using plain language, readable fonts and colors, and using tools like accessibility checkers to proof our content before sharing it. In the same way that we use spell check features so our email and documents
are free from spelling errors, we can use accessibility checkers to minimize accessibility errors in our content.
Important!Just like security, digital accessibility requirements will evolve as software and technology develop, please review this page regularly.
Summary: images must have associated text describing
the content of the image also called alt text. Some decorative images
do not require a description.
Writing a good image description
Describe
the image like you would to a person who wasn't in the room with you,
so they know what is happening in the image.
Write in sentence case.
Include
just the description, not introductory text like "An image of" or
"Image of" as screen readers will say something like, "Image: Image of
a red train going through a dark tunnel."
Indicating the image is a graph, photo, or screenshot is okay. It will often sound like Image:
Graph showing the number increase in sales" or "Image: Photograph of Mount Hood at sunset"
Include any text in the image (for example legacy images that haven't been updated)
If the image is complex or
needs more of a description, add a detailed caption to the image.
Basic verification
Run
the application's accessibility checker. If the application doesn't
have an accessibility checker (or wizard, etc.) Manually verify that
each image has a description.
Verify images
have alternative (alt) text
the image doesn't contain words as part of the image
The first time an acronym is used, all words should be written out,
followed by the acronym in parentheses. Subsequent instances can use
only the acronym.
For example:
The Americans with Disabilities Act (ADA) was passed in 1990. The
ADA was created to protect the civil rights of people with disabilities.
Exception(s)
Abbreviations such as PDF which has become common usage
Content Designers and Application Developers and Programmers Best Practices
Organizing your Word document or PowerPoint presentation with headings
Use the application's styles to apply headings.
Each document should have only one Title that is descriptive and relatively short; the title of the document
Headings should be used in order starting with Heading 1
Headings indicate meaning, a change in section or topic, and indicate the information hierarchy
Meaningful information should be at the beginning of the heading
so the reader gets the clarifying information first (helps cognitive
and screen reader accessibility)
Heading levels shouldn't be skipped
Heading styles should not be used for styling text, use the application's styles for changes to the look of the text
Color can't be the only way to indicate the meaning of an item.
Example 1
Hyperlinks (links) that are only indicated by a change in text color
Solutions:
Hyperlinks should be underlined
Additional
affects should be added for focus and hover that do
not rely on color alone. (UTMB is currently adding a second underline.
For example, cards on the this site have a dashed edge on hover)
Example 2
Using green to indicate good, yellow to indicate warning, and red to
indicate an error. A person with colorblindness or low vision will need
additional formatting to distinguish between them.
Solutions:
Use a label for each area in addition to the color
Use a pattern in the color (such as stripes, or dots) so the meaning can be identified by texture
There are two kinds of lists; ordered (numbered) and unordered (bulleted).
Ordered lists
Begin with a number
Indicate an order or level of importance to each item
Accessibility tip:
A screen reader would read this list as, "Ordered lists, list with
three items. One, begin with a number. Two, Indicate an order or level
of importance to each item"
Bulleted lists
Begin with bullets
Items have equal importance
Accessibility tip:
A screen reader would read this list as, "Bulleted lists, list with two
items. Bullet, begin with bullets Bullet, Items have equal importance"
Remember to
Decide which type of list is appropriate
If there's an order or importance to each item use a numbered list and list each item in order
Items are of equal importance; use a bulleted list
If there are multiple lists on a page, select the correct format for each list based on its contents
If there are multiple numbered lists, be sure to restart numbering for each new list of items
Accessibility tips
Use the built-in list formatting for each application to create the list so that screen readers will indicate it is a list
Web content creators and developers - these break the way that screen readers handle lists and shouldn't be used
Use "click here", "click to," "image of" in the link
Use the same link text for more than one link
Change the link formatting from the standard
Hyperlinks (Links) need to be clear and easy to understand.
Links should be a few words of text to a phrase
Best Practices
Short: Links should be under 50 characters
Unique text: Links shouldn't contain "More," "Read More," "Find out more," "Click Here," or have the same link duplicated on the page
Links should be meaningful and indicate what selecting them will do (go to a page, email someone, download a document, etc.
Avoid text instructing the user to click the link. If absolutely required; avoid using click, instead use select. (Not everyone is using a mouse and can click)
Hashtags create an automatic, descriptive label creating a label, highlighting the content's topic
In most applications it also creates a link which
activates a filter for other content that has been marked with that
hashtag
This makes content easier to find and increases exposure, sometimes it's also used to make a statement as in #ChangeMakers
Format
They begin with a # (called a hash or pound sign) to set them apart from the rest of the text
They don't use spaces, hyphens, or underscores
Hashtags should be title case (#TitleCase) -- capitalizing each word makes it easier to see the division
between words, for example in #utinservicetotexas it is difficult to
see each word, adding the capital letters #UTinServiceToTexas, makes a
big difference in readability
Read over your hashtags, sometimes when the spaces are removed
unintentional words form, though using title case helps to limit that. For
example, with #webart, our eyes are naturally drawn to "we" which changes
"web art" to "we bart." If you use title case you can see the two words clearly #WebArt
Use 5 to 7 hashtags per post
Examples
#UTMB
#MentalHealth UTinServiceToTexas #BetterTogether
#DigitalAccessibility
#Accessibility #Ally #Tech4Good
NOTE
Some applications will suggest the
lower case version of a hashtag, you'll need to manually capitalize them until the applications are made accessible.
Text alignment can affect reading speed and comprehension
Centered text
can be helpful or visually pleasing and a way to organize a page.
Unfortunately, long sections of centered text significantly slow reading
speed.
Block or justifiedtext
was originally used in newspapers to make the columns visually
appealing. This is achieved by randomly adding spaces between words so
that the last character of a word ends each column. Because the spacing
is different for each sentence this significantly slows reading speed
and can cause delayed comprehension.
Best practices:
Center short sections of text, primarily use for headings and new sections
WCAG discourages auto-playing audio, especially if it lasts more than three seconds. Unexpected audio can be very disorienting for a number of users as well as interfere with screen readers.
Best practices:
Have the users start the audio with a play button
If audio auto-plays keep it to less than 3 seconds
If it is imperative for audio to auto-play, have an obvious, correctly formatted button to stop audio at the top of the page
Organizing your information with headings on a webpage or digital application
Use semantic HTML to create headings
Each page must have only one Heading 1
Heading levels be used in order and not skipped
Headings indicate meaning, a change in section or topic, and indicate the information hierarchy
Meaningful information should be at the beginning of the heading
so the reader gets the clarifying information first (helps cognitive
and screen reader accessibility)
Heading styles should not be used for styling text; use CSS for changes to the look of the text
Breadcrumbs should be included on site subpages so that the user can quickly identify their location on the site, as well as quickly navigating to previous pages. The breadcrumb should be above the page title.
The page name should be short and easy-to-understand and create a readable URL.
The page title <title> short and easy-to-understand, summarizing page content.
The label for the browser tab is created using the HTML title tag.
For example:
<head>
<title>100 Days of A11y Home</title>
</head>
Quick check
Page name - easy-to-understand, summarizes the content of the page, generally short -- a few words
Page title - <title></title> - HTML with easy-to-understand, summarizes the content of the page, generally short -- a few words
Note: In Sitefinity, the name of the page is the page title and what will show in the browser tab
Avoid beginning every web page title with UTMB, because then it will be the first word in all open tabs; making difficult to discern which tab is which. UTMB can still be used, usually for just the first page in a section or site.
Page title tips:
Use short, meaningful names (tabs aren't very large)
Complete the registration form with your First and Last name, UTMB email address, and a new secure password *
Select the checkbox I Agree to the Terms & Conditions
Select the Register button
The account is immediately created and you may start taking courses immediately
* Important: Access Academy is a free service that doesn't utilize Single Sign On (SSO), so instead of using your UTMB user ID and password, please create a new, secure password that isn't shared with other applications. See Section D in the PDF UTMB's password guidelines (requires login).
Step 2: Take each course to learn the basics of digital accessibility.