Website Accessibility

The Web Content Accessibility Guidelines (WCAG) provide the technical criteria for creating accessible websites and digital content. Encourage staff members in your organization to engage with the WCAG in these ways:

• Learn more about the WCAG: The guidelines are organized into three levels of conformance: A, AA, and AAA. WCAG 2.2 is the latest version, with Level AA being the most common conformance level. These guidelines aim to make content accessible to users with disabilities, using assistive technologies including screen readers, screen magnifiers, and alternative input devices.
• Ensure your site is designed to be universally accessible: Follow WCAG principles to accommodate all users, including those who rely on assistive technologies.
• Embed accessibility throughout the design process: This helps guarantee that content is perceivable, operable, understandable, and robust for everyone. A website cannot know when a person is using assistive technology. A universally designed site that is accessible to everyone, all the time is the goal.

Additionally, incorporating these design and navigation features can help enhance website accessibility for all:

• Ensure full keyboard navigation: Make sure your site can be fully navigated using keyboard-only controls, including all links, buttons, forms, and other interactive elements.
• Use high visibility focus indicators: All interactive elements (links, buttons, forms) must have a visible focus indicator to help users who are navigating with a keyboard. Browser defaults often do not provide enough contrast, so be sure to ensure the indicator is visible on both light and dark backgrounds.
• Properly format interactive elements: Ensure that all interactive components — such as accordions, modals, tables, and form fields — are accessible with keyboard navigation, proper labeling, and clear structure for screen readers.
• Organize content with headings: Use clear and structured headings (H1, H2, etc.) to help users, especially those using screen readers, navigate your site efficiently.
• Apply landmark roles: Define key sections like navigation, main content, and footer with landmark roles for easier access and to enhance navigation for screen reader users.
• Allow resizing: Ensure your content can zoom up to 400% without breaking the layout. Pages should reflow smoothly when resized, ensuring no functionality is lost.
• Check color contrast: Follow WCAG guidelines for color contrast — 3:1 for large text (18 point or greater, or at least 14 point bold), 4.5:1 for regular text, and 3:1 for non-text objects (such as visible keyboard focus indicators, highlighting, or icons not paired with text). Avoid relying on color alone to convey meaning, as this may be inaccessible to blind and low vision users.
• Avoid images of text: Images of text cannot be resized, read aloud, or translated. Ensure that all text is presented as selectable and resizable text, which can be adapted to user preferences and read aloud by screen readers.
• Create accessible widgets: If your site utilizes sliders, carousels, or other methods of displaying information, be sure that this content is created using ARIA standards. This includes ensuring that content is keyboard-navigable, has clear focus indicators, and is screen reader-friendly.

These features of web design can ensure that images, links, and forms are are accessible as possible:

• Provide alt text: Ensure all images that convey meaning have clear and concise descriptive alt text. Avoid stating “Image of” or “Picture of,” as screen readers already indicate that it’s an image, and don’t convey information that’s already repeated in nearby text. For decorative images, use alt=”” so they’re skipped by screen readers.
• Make links descriptive: Avoid vague text like “Click Here” or “Learn More.” Instead, use text that describes the link’s purpose, such as “Read the full article” or that indicates where the link leads, such as “View our Accessibility Guidelines (Opens PDF).”
• Make links visible: Links in the middle of body text must be clearly visible. Use underlines and a different color or weight.
• Ensure accessible forms: Label all form elements clearly for screen readers, use fieldset and legend to group related fields (e.g., billing address), and ensure all fields (e.g., search boxes, sign-ups, donation forms) are accessible and navigable via keyboard. When users make mistakes, offer clear, accessible error messages to help them correct their input.
• Offer accessible documents: Ensure that any documents linked to on your site, such as PDFs, are accessible and fully readable with a screen reader. Scanned copies or photos of physical documents are rendered as graphics and cannot be read by screen readers.
• Provide accessible CAPTCHA: If your website requires a visitor to solve a CAPTCHA challenge, ensure there is an audio option available for users who cannot visually interpret the CAPTCHA. This ensures that CAPTCHA does not block accessibility for blind and low vision users.

Multimedia components of your website (such as video and audio) come with special accessibility considerations, including:

• Captions: All video content should include captions, with the choice of open or closed captions depending on the context.
• Audio descriptions: For videos with critical visual content, provide audio descriptions for blind and low vision users.
• Transcripts: Provide transcripts for audio and video content for those who are d/Deaf or hard of hearing.
• Screen reader access: Ensure that all video and audio clips on your website can be played by users of screen readers.

In addition to the technical considerations of creating accessible websites, it’s important to consider what accessibility information needs to be shared on websites and how. (Visit the Hub page on Communicating Access Information for more details.)

Below are some broad considerations and practices:

• Ensure it’s easy to find: The accessibility page of your website should be easy to find (aim for one or two clicks).
• Share access policies and procedures: Share any specific access policies that are important for the public to know (e.g., policies relating to service and emotional support animals, procedures for requesting services, etc.).
• Share clear and detailed information: Clearly describe what access features and services your organization offers, as well as how, where, and when they can be accessed and requested. Avoid vague and unhelpful statements such as “The museum is fully accessible,” which don’t provide useful information.
• Provide contact information: Share the contact information of your access staff or department, including phone numbers (and times to call), email addresses, and any other contact information that is relevant. Make sure you follow up in a timely manner.

If your organization works (or is planning to work with) a third-party developer or consultant for your website, it’s essential to ensure they understand and meet accessibility standards. Here’s how to integrate accessibility into the procurement process:

• Incorporate accessibility in RFPs: Include accessibility requirements in Requests for Proposals (RFPs) to ensure vendors understand the need for compliance. Tailor RFP requirements to reflect legal and cultural standards, and require vendors to demonstrate expertise (e.g., accessibility engineers, testing with assistive technologies, and involving people with disabilities in testing).
• Request accessibility documentation: Ask for Voluntary Product Accessibility Templates (VPATs) or Accessibility Conformance Reports (ACRs) to assess conformance. Ensure the VPAT version is appropriate (WCAG for most, EU-specific for international audiences).
• Evaluate vendor capabilities and ongoing support: Ask about testing methods, challenges faced, and ongoing support to ensure vendors provide continuous updates to maintain accessibility throughout the product life cycle.

Finally, here are some further best practices and considerations to include in your website accessibility planning:

• Consider accessibility from the start: Incorporate accessibility from the beginning of your website development process to prevent costly retrofitting later. Work across teams to align on accessibility goals and ensure accountability throughout development.
• Monitor and maintain compliance: Accessibility is not static — monitor and maintain compliance and accessibility as your website evolves. Treat accessibility as an ongoing process rather than a one-time checklist.
• Seek feedback: Regularly engage user/experts, access consultants, and/or community feedback to ensure that your website remains accessible, especially after significant updates.
• Avoid accessibility overlays: AI-powered accessibility tools and overlays are not sufficient to make a site or app fully accessible. They often create additional barriers for users of assistive technology that did not exist before the overlay was installed.