Learn accessibility basics

We will introduce the top 10 accessibility categories to focus on. Once you know what they are, you can quickly make improvements.

Learning to identify and fix some common issues is easier than you may think.

1. Keyboard navigation: Some people who are blind, have low vision or limb differences, or have difficulty using a mouse use a keyboard to navigate online. You can learn to perform simple accessibility tests using just the Tab, Enter, spacebar, and arrow keys.

• Try navigating your website using only the keyboard.
• Your site needs improvement if you can’t reach and use all buttons, links, and forms.
• Users must be able to do anything using only a keyboard that can be done with a mouse.
  
  Example: A dropdown menu that causes users to get ‘stuck’ and does not allow them to continue navigating the page. That is called a ‘keyboard trap’ and it is a significant usability problem for people who do not use a mouse.

2. Forms: Forms need to work for people who navigate with their keyboards, have low vision, or can’t distinguish colors.

• People use forms to interact with websites and apps.
• As a best practice, forms should be kept simple and provide clear instructions. Too many questions to answer and confusing instructions make users leave.
• Many sites have forms to register, log in, submit questions, chat, and add comments.
• For forms to work best, they need to meet several requirements:
  
  
  • clearly marked required fields
  • associated labels
  • error messages that help users fix problems
  • keyboard accessibility
  • grouped related fields
  
  Example: A form with a date field that doesn’t have clear directions on how to enter the date can cause users to try many formats unsuccessfully, get frustrated, and possibly leave the site.
  
  

3. Images and media: Accessible photos, images, audio, and video help you engage people with sensory disabilities, such as hearing or visual disabilities.

• Media
  
  
  • Videos with dialogue have captions that:
    • match the words being spoken
    • include any text that is embedded in the video
    • are timed to match the video
      
      
  • Audio descriptions are necessary to describe relevant actions taking place
  • Audio-only files, such as podcasts, have text transcripts available
  • If captions are not readily available, make a complete text transcript of the video content
    
    
• Media Controls
  
  
  • Users are able to pause, stop, or hide all page video, audio, and animation. They should also be able to control the volume.
    
    
• iFrames - for all media in an iFrame, there is a title attribute
  
  
• Alternative (Alt) Text - images have alt text attributes <alt>
  
  
• Flashing Animation - no animations should flash more than three times per second
  
  Example: Your videos don’t have any captions for the dialogue, so users with hearing loss can’t understand what’s being said.

4. Color: Not everyone perceives color; they may not see the same shade if they do.

• Color shouldn’t be the only way of sharing information with users. Include text labels or patterns with a legend.
• Color shouldn’t be used in instructions.
• Use a color contrast checker to make sure that text is easily read against its background.

Example: A form has instructions that say, “Required fields are red.” Some users can’t see the red.

Similarly, avoid depending solely on color to indicate an action. Let’s say you use blue to show that a link will open in a new window; this directive can confuse someone who doesn’t perceive the same color—or colors.

5. Structure: Well-structured content helps users with cognitive and learning disabilities navigate sites and understand information more. Users with screen readers can quickly skip to their desired page sections.

• Headings - All pages have one unique <h1> heading, which is the main title/topic of the page.
  
  
• Headings - Headings <h2>-<h4> are only used for text that precedes and describes or categorizes a collection of content; calls-to-action (CTAs), business names that appear on each page, and quotes are not headings.
  
  
• Headings - Heading styles are consistent. An <h2> looks the same on every page.
  
  

6. Languages - If there are sections of the page in a different language, the <lang> attribute is used for that span of text.

7. Lists - Semantic lists are used <ul> or <ol> with <li> for a series of related content.

8. Bypass Blocks of Content - Within the first four ‘tabs’ into the site, pages must have a way to bypass large blocks of interactive content, such as the main menu  ('Skip to Main,’ ‘Skip to Chat’).

Example: A site has a helpful chatbot but users have to tab through the whole page to reach it when they need help.

9. Tables: Tables on web pages are problematic for accessibility. Choose to present the content in a different way when possible. If you must use them, ensure users with assistive technologies, such as screen readers, can use the data.

• Tables help organize and show logical data relationships.
• Tables should always include row and/or column headers.
• Tables should have a title or summary that describes the purpose of the table or data in it.
• Tables should not have merged, split, or empty cells.
• If a table is very complex, consider breaking it into multiple, simpler tables.

Example: A table has no column headers, causing confusion as users try to figure out the data’s purpose. This also prevents screen readers from helping users know where they are in the table.

10. Content changes: Your site or app may have content that updates or responds to user actions. Those who use screen readers should be able to understand the change clearly as it occurs. Does your page content change with user input, such as search results and filters?

Example: An emergency ‘seek shelter’ notice appears on the screen but is not announced by the screen reader. This could put the user in danger.

• Make sure content updates notify users of the change that has taken place.
• If a popup opens on the screen, be sure it is announced by screen readers.
• When error messages or alert notifications appear on the screen, screen readers should announce them.
  
  

11. Links: Your linked text should be descriptive and, if repeated, go to the same destination.

• Links make the most sense when they give precise directions and descriptions.
• Don’t use vague and too-common phrases such as:
  
  
  • Click here
  • Learn more
  • Read more
  • Get info
    
    
• Instead, include short and accurate link descriptions that let the user know the purpose or destination of the link before they click on it.
  
  Example: “Read about accessibility” is a good, descriptive link. “Read more” is not. Linking the text “Order museum tickets” is better than “Order tickets at https://www.museum.com.”
  
  

12. Resizing: People with low vision may use software or hardware to magnify the screen or simply zoom in using their browser.

• Users can resize text so that no content is lost when zoomed to 200% and components do not overlap.
• There should be no maximum scale set in the code.

Example: When a user zooms in, your headline becomes too big, so it wraps and makes it difficult to read.

13. Documents: Use the skills you’ve learned in previous steps to verify color contrast, form and keyboard accessibility, correct page structure (headings, lists, etc.), and more. This will ensure that your documents are accessible to people with low vision, color blindness, cognitive disorders, motion sensitivity, or hearing loss.

• Prioritize your top 20 - most important and most frequently accessed - documents to be made accessible.
• Accessible documents are more straightforward for all users to understand.

Example: A PDF document has a form that users must complete to access services, but it is not accessible. People with screen readers can’t use the form since the fields are not keyboard accessible and are not labeled.