/
Accessible Digital Design

Accessible Digital Design

For digital resources to be accessible, inclusive, and usable for as many people as possible, they must be designed with accessibility in mind. Not only do federal law and PSU’s Digital Accessibility Policy require that digital resources be accessible for people with disabilities, but the choice to apply best practices for accessible digital design facilitates greater usability for everyone. Use OIT’s Accessible Digital Design Checklist and the resources below to begin designing accessibly.

Table of Contents

Backend HTML and frontend Rich Text design

Style

Style refers to the aesthetic choices we make at the beginning of digital design process. Before we make or validate our structural design decisions, we almost always begin by making style decisions that have a substantial impact on visual learners with cognitive or vision disabilities.

Typography

Font style and size can have a significant impact on the accessibility and readability of your content for the 13.9% of U.S. adults who have a cognitive disability that involves serious difficulty concentrating or the 5.5% who have a vision disability characterized by blindness or serious difficulty seeing.

Font Types Illustration
Avoid serif fonts in favor of more readable text. For people with learning disabilities like dyslexia, fonts with clean lines and no embellishment can be easier to read. Garamond and Times New Roman are examples of a serif font. They’re more compact, and the tails on serif lettering can make text run together for some readers. Verdana is an example of a sans serif font that still clearly differentiates between similar characters like the capital letter I, lowercase letter l, and the number 1. Avoid ALL CAPS outside of explained acronyms. The up, down cadence of title or sentence case can be easier for people with cognitive or learning disabilities to read than the block-like, homogeneous shape of words in ALL CAPS. Use larger fonts, reducing content as needed. Best practice is to use a minimum size of 12 point font or larger for electronic documents, and a minimum size of 24 point font or larger for presentations. Less accessible, smaller font sizes are often employed in service of keeping the total length of a given digital resource down to a certain number of pages, slides, or lines. This is when content should be thoughtfully reduced both for readability and to allow for a larger font.

Use of Color

Conscientious use of color can make your content more visually dynamic and engaging; however, content that relies on color alone to convey meaning or content with insufficient color contrast can create barriers for people with low vision, color blindness, blindness, or deaf-blindness.

Color Dropper Illustration
Never use color alone to convey meaning. To accessibly differentiate between elements that you might typically identify with color, you can instead use heading structure, accessible tables, or list structure. Color may still be used decoratively, but it should never be used alone to convey meaning. Always ensure appropriate color contrast. Input the associated hex keys into a color contrast checker like the Web Accessibility in Mind (WebAIM) Contrast Checker to determine whether or not you have a color contrast issue between foreground text and background colors. If you don’t already have access to the original hex keys (in other words, the unique identifiers for each color), you may use a color dropper browser extension to find the unique hex keys associated with your background and foreground colors.

Readability

Prioritizing readability ensures that people with varying learning styles and abilities can understand your content. Not everyone processes information in the same way. Text-heavy content can pose accessibility barriers for users with cognitive disabilities and should be edited for brevity and clarity.

Readability Illustration
Use the simplest language appropriate. Unnecessary jargon and overly technical phrasing can confuse your message to readers. Use layout strategically to improve readability. The strategic use of empty space, columns, horizontal line separators, bulleted and numbered lists, and other structural elements can break up text-heavy monotony. Use dynamic content to supplement text. Images, graphics, and diagrams are helpful for breaking up large blocks of text and providing an alternative means of access and engagement for visual learners. Proofread for grammatical errors. Misspellings, grammar errors, and broken or outdated links can dramatically impact accessibility and usability for everyone, particularly screen reader users.

Structure

Structure refers to the programmatic ways in which our digital resources are organized. Without properly formatted structural components such as headings, links, and lists, digital resources can pose significant accessibility barriers for people who may be unable to use a mouse.

Heading Structure Illustration

 

Heading Structure

Properly formatted headings allow people to quickly and efficiently navigate digital resources. Headings should not simply look bigger or feature a bold or italicized font. True headings must be coded as such or selected from provided styles in order to ensure recognition by assistive technology.

Use properly formatted, hierarchical heading structure. Programmatic, built-in heading styles often used inappropriately or not at all. For example, if the default Heading 3 style option is visually appealing, it may be mistakenly used as a means of emphasizing text. Headings should be used for section and subsection titles only. Following a single Heading 1, headings should appear in order, much like an outline, where subsections begin with a Heading 2, and all sub-subsections begin with a Heading 3, etc. Ensure that there is only one Heading 1 (not a Title). Main content should begin with a descriptive Heading 1 rather than a Title. The Title style will be read by assistive technology as normal text (i.e. indistinguishable from a normal text). A single Heading 1 allows screen reader users to easily skip to the main content of a page.
Backlink Illustration

 

Descriptive Links

Accessible, descriptive, and functional links can increase navigability and usability for all users. To ensure accessibility for people who use adaptive technology like screen reading software, you must—at minimum—validate link functionality and ensure descriptive text that makes sense out of context.

 

Use link text that makes sense out of context. Do not use generic phrases like "learn more, “click here," or “more information.” Visible, selectable text should indicate the direction in which users will be taken on selection. Ensure that active links are not indicated via color alone. This is best practice since the default color contrast between links and surrounding text will not always be sufficient. Avoid lengthy or complex URLs as link text. URLs as link text should be avoided, unless a URL is relevant content. Examples include situations in which a digital resource may also be distributed in print. In cases like these, you can include a URL in parentheses: "Please visit the OIT website ( ).”
List Structure Illustration

 

Programmatic Lists

Including bulleted and numbered lists is a readability consideration as much as a structural one. Breaking up the monotony of text with lists is best practice. You just have to ensure that your lists are properly formatted in order to be fully accessible and usable for people using assistive technology.

Use built-in list structuring options. Lists are are often rendered inaccessible when they are generated by simply typing a number or symbol or by pasting listed items from another location. Digital content authoring tools do not always recognize and reformat numbers and symbols automatically to structured lists. When a sighted user sees a list of four to-do items, and item three instructs them to navigate elsewhere, they know they need to come back to that resource, and that list, for item four. When a list is created using built-in list structuring tools, screen reading software will likewise announce a “list of four items…item one, item two, item three, etc.”

Data

Data is a category that includes both contextual data—such as file properties, language attributes, and form field design—and visual data, most often displayed via tables. Data accessibility is critical to ensuring that screen reader users are able to navigate equitably.

Properties

Properties may not be editable in a web content management system, but for digital resources like electronic documents, you must ensure your file properties are fully accessible. Inaccessible file properties can create significant barriers for users who rely on assistive technologies, like screen readers.

File Properties Illustration
Include both a descriptive file name and title. Nonsensical or abbreviated file names can make navigation and selection difficult for screen reader users. The file name will be the first thing a screen reader user hears or feels via refreshable braille display, making it crucial for understanding the purpose of a resource. Verify that languages are defined appropriately. Screen reading software will respond to defined authoring, display, and proofing languages. Spanish content—read in English by screen reading software—will be less accessible and likely unintelligible. If your resource contains multilingual excerpts, each must be defined.

Data Tables

Tables are a common way to present complex information in an organized manner, making it easier for users to comprehend. It is critical for the accessibility of that content that any tables are used solely for data and are organized with a clear table structure, including a header row or column when appropriate. 

Data Table Illustration

 

Do not use tables as a design tool. Tables should be used for organizing data only and not as a layout or design tool. This is because tables can be difficult to navigate via keyboard only. Screen reading software makes navigating tables easier as long as data is organized simply, with properly formatted header rows and or columns when feasible. Use header rows and columns. Information, structure, and relationships conveyed through presentation must be programmatically determined or available via text (WCAG 2 Success Criterion 1.3.1). Unless a table is simple and small enough to navigate and understand easily via screen reading software, it should have a header column, header row, or both. Avoid any merged table cells. Most document authoring tools do not offer a means of applying the HTML markup necessary for scoping merged cells to the appropriate header row or column.

Forms and Surveys

For a form or survey to be accessible, people with disabilities must be able to navigate all fields, determine if a field is required, respond to all fields, understand and resolve errors, and submit. HTML is typically a more sustainable format than PDF for creating and maintaining accessible forms.

Online Form Illustration
Be selective about the form or survey application you use. Review a given vendor’s accessibility documentation and guidelines in order to ensure that you have the information you need to facilitate an inclusive user experience. Vendors will often document which question types are most accessible via assistive technology. Validate form functionality using only a keyboard. Particularly for Portable Document Format (PDF) forms, it is critical that you reference a PDF Accessibility Checklist to ensure the accessibly of file properties, reading order, alternative text, tag structure, field labels, required field indication, tab order, and error recovery. Adobe Sign, Foxit PDF Editor, and OnBase, tend to provide more back-end control over form elements and tab order than survey tools like Google Forms or Qualtrics. For more detailed instructions regarding how to design a fully accessible form using complex controls and labeling, please refer to WebAIM’s article on Creating Accessible Forms.
Adobe Sign Use Case Scenario → Use for external-facing information gathering that requires validation. Self-Support Materials → Reference Workflow for Creating Accessible PDF Forms (Adobe). OIT Support Pathways → Review the entry in the OIT Service Catalog for Adobe Sign. Google Forms Use Case Scenario → Use for internal-facing information gathering that does or does not require validation. OIT Support Pathways → Review the entry in the OIT Service Catalog for Google Forms. OnBase Use Case Scenario → Use for internal-facing information gathering that requires validation. OIT Support Pathways → Review the entry in the OIT Service Catalog for OnBase. Qualtrics Use Case Scenario → Use for internal or external-facing information-gathering that does not require validation. Self-Support Materials → Reference Check Survey Accessibility (Qualtrics)Tool. OIT Support Pathways → Review the entry in the OIT Service Catalog for Qualtrics.

Media

Media refers to dynamic and engaging visual content like graphics, illustrations, or videos that is essential to the usability of your digital resources. Accessible media allows for higher levels of engagement from users with cognitive learning disabilities and greater usability for everyone.

Video Player Illustration

Audio and Video

Videos and live audio must have both synchronised captions and an accompanying transcript in order to be accessible for people who are deaf, hard of hearing, or deafblind. Audio description for any undescribed visual content may likewie be necessary to make videos accessible to people who are blind.

Captions are an audio-synchronized text alternative to the speech and non-speech audio information present in a video. Captions are displayed within the media player and provide context to people who are hearing impaired and others who rely on written information to process media, such as non-native speakers.
Transcripts are key for deafblind audience members and others who rely on or prefer written information. Transcripts are also helpful for people who want to quickly read through video dialogue or quote a video. A transcript must be placed adjacent to its associated media and be easily identifiable for all users.
Audio description, or descriptive narration, provides an auditory alternative for strictly visual components, such as text or other silent activity on screen. These descriptions provide critical context for people who are blind or deafblind and can often be facilitated during the design process through conscientious narration.
You can use the built-in editing tools in PSU Media Space, YouTube, and other video editing platforms to manually edit automated captions and ensure that they are synchronized, equivalent, and accessible. Similarly, you can use YouDescribe to add your own audio descriptions. Reference Required Digital Accessibility Tools for more information regarding the supported captioning, transcription, and audio description tools available to you at PSU. Alternatively, you may request external, third party Digital Media Remediation Services at cost.
Image Editor Illustration

 

Graphics

Both simple and complex images are excellent methods to make content more dynamic and accessible for visual learners and for those with cognitive disabilities. To ensure accessibility and usability for everyone, however, you must include a text-based alternative for all contextually relevant non-text content.

Alternative (alt) text should briefly present content and function. Avoid using introductory words like "graphic," "picture," or "image," as screen reading software will automatically introduce an image with the word “graphic.” Use the fewest number of words necessary. Screen reader users will have to listen to alt text all the way through; it should be a succinct description of the image’s content and function. If an image is a link or hotspot, ensure that your alt text describes the link’s function, or intended destination—indicating where users will be sent on selection. Complex images should be both usable and navigable. When necessary, include additional context such as a linked, tabular representation of data, additional context in surrounding text, or a linked appendices. Ensure clear tab order and focus indicators to ensure that data points and comparison parameters are navigable for people who are using assistive technology. For more detailed instructions regarding how to include meaningful, descriptive alternative (alt) text for graphics and images, please refer to WebAIM’s article on Alternative Text.

If you have any additional questions regarding digital accessibility for non-instructional digital resources at PSU, please submit a request for Digital Accessibility Support.

Comments