Developing Core Skills
Taking the First Steps
Creating content with accessibility in mind can be daunting. Look at the core skills below and choose one to start. Learn that skill, then add another, then another and continue to grow your skill-set. You don't have to learn everything all at once! These core skills will give you a starting point as you design and develop accessible digital content.
The Core Skills
The skills below are a starting point and will help you to move forward with advanced skills later. Remember to use the "plus one" mindset - learn one skill, then add another, and then another.
Use Unique and Descriptive Links
The purpose of descriptive links is to provide users with the proper context of where the link will take them. "Click Here" or "Read More" labels do not provide the information of where the user will land. Screen reader users often navigate websites going from link to link. These links are usually spoken in list form and the listener uses the tab key (or shift-tab to go backwards) to select the link. Providing links that make sense is vitally important and necessary.
Use lists correctly
Use the tools within your applications to provide unordered and ordered lists. This provides structure to your documents providing a visual cue of where lists are on your page and also let screen readers know that information is presented in list form.
Use color with care
People with low vision, color blindness, or other cognitive disabilities rely on good contrast and the proper use of color. It is also important to follow the WCAG directives and make sure that color is not your only indicator of important content.
- Contract and Color Accessibility (WebAIM)
- Contrast (Univ of Minn)
- Color contrast (Univ of Washington)
- Understanding Color Blindness: A Guide to Accessible Design (Crux Collaborative)
- Colorblind Web Page Filter (Toptal)
- Types of Color Blindness (Colblindor)
- 5 Tips on Designing Color Blind-Friendly Visualizations (Tableau)
- Creating Graphic Design and Illustration for Color Blind People (envatotuts+)
Use tables for tabular data, not layout
Tables organize information visually and help show relationships between things. Screen readers read left to right, top to bottom. The information in the table should read in that format. Keyboard-only access should be able to follow proper order, understand context, and provide clear focus on the data cell selected.
Use proper heading structure and logical flow of interactive elements
When used properly and in the correct order, headings and proper structure provide accessible navigation. The headings must be visually clear and use clear wording. The heading structure of a page forms the outline of the page.
- Symantic Structure: Regions, Headings, and Lists (WebAIM)
- Headings (Univ of Minn)
- Headings (Univ of Washington)
Properly format forms
Electronic forms are more accessible than paper forms or PDFs that need to be downloaded and then uploaded when completed. However, they must be created with accessibility in mind.
- Forms (Univ of Washington)
- Forms Tutorial (WAI)
- Forms (WebAIM)
- Usable and Accessible Form Validation and Error Recovery (WebAIM)
- A beginner’s complete guide to form accessibility: the 5 things accessible forms needs and how to fix common errors (PopeTech)
Keyboard-only access should be logical and provide clear focus
There are many people who cannot use a mouse because of either an injury or the inability to move their hand enough to control a mouse. These users will need to move systematically through websites by using keys on the keyboard. They can use the "Tab" key to move through the links or form controls on a webpage one at a time.
- Keyboard Access (WebAIM)
- Keyboard Accessibility (Univ of Washington)
- What does “keyboard-only” mean? (UC Berkeley)
- Common Issues Identified During Keyboard-Only Navigation Testing (U Mass)
Include alternative text for images, charts, and graphs
Alternative text, or alt text, should be provided for images, charts and grapshs so that screen reader users can understand the message conveyed by the use of the image on the page. This is especially important for informative images such as info graphics. Alt text is also important when an internet connection is unstable. The alt text may be present when the image will not download due to limited internet speeds.
- Alternative Text (WebAIM)
- Alternative Text (Univ of Minn)
- Images (Univ of Washington)
- Accessible Images, Charts, and Graphs (UVA)
Assure accessibility of video and audio content
Video and audio content, such as videos, narrated slideshows, and podcasts are increasingly being used to enrich and deliver online experiences. Video and audio content must include text-based alternatives so all users can access the information.
Audio description is an audio track that narrates the relevant visual information in media. Audio description assumes that the viewer cannot see, and therefore depicts the key visual elements that are necessary to understanding the content as an accommodation for blind and low vision viewers.
- The Captioning Project at UVA
- UVA Captioning Guidelines
- Captioning and Transcriptions (UVA Digital Accessibility)
- Captions, Transcripts, and Audio Descriptions (WebAIM)
- Videos (Univ of Washington)
- What Is Audio Description (Univ of Washington)
- Audio Description for Video (Harvard)
Additional information / checklists:
- Top 10 Tips for Making Your Website Accessible (UC Berkeley)
- Perspective and How-To videos from Lucy Greco and others (UC Berkeley)
- WebAIM’s WCAG 2 Checklist
- Web Accessibility Evaluation Guide (WebAIM)