Designing Equitable & Accessible Websites

Introduction

Designing websites with equity and accessibility in mind is crucial for creating an inclusive online experience. Failing to make websites accessible negatively impacts many people with disabilities. Inaccessible websites erect barriers that prevent people from accessing information, completing tasks, and fully participating in society.

On the other hand, accessible websites have benefits that extend beyond users with disabilities. Accessible design principles help create interfaces that are intuitive, consistent, and easy to use for all people. Accessible sites offer better user experiences and help organizations reach broader audiences.

There are legal and ethical obligations to ensure websites are accessible. Many countries have web accessibility laws that require websites, especially government ones, to meet certain standards. Beyond legal requirements, designing for inclusion aligns with ethics of treating all people with equal dignity and respect. Accessibility enables more people to benefit from the educational, economic, and social opportunities that the internet provides.

Understanding Disabilities & Barriers

The internet has become an indispensable resource in modern life. However, many websites present barriers that make them difficult or impossible to use for people with disabilities.

There are many types of disabilities that can impact a person’s ability to access online content:

• Visual disabilities like blindness, low vision, and color blindness. Visual barriers include lack of text alternatives for images, poor color contrast, and small text size.
• Motor disabilities like paralysis, tremors, and loss of coordination. Motor barriers include content that requires precise mouse control.
• Hearing disabilities like deafness or difficulty hearing. Hearing barriers include lack of closed captioning for audio and video.
• Cognitive disabilities like Down syndrome, autism, and learning disabilities. Cognitive barriers include complex site navigation and lack of clear focus indicators.

People with disabilities often rely on assistive technologies to access the web:

• Screen readers vocalize page content for those who are blind or have difficulty reading. They cannot interpret images without proper alt text descriptions.
• Screen magnifiers enlarge content for those with low vision. Small text size can make content impossible to read when magnified.
• Closed captioning displays audio transcripts on videos and audio content for those who are deaf or hard of hearing.
• Voice control allows people with motor impairments to navigate sites through voice commands instead of a mouse or keyboard. Poor focus indicators make voice control difficult.

Inaccessible websites exclude people with disabilities from equal participation in society. By designing with accessibility in mind, we can create equitable online experiences for all.

Universal Design Principles

Universal design refers to the design of products, environments, and digital experiences to be usable by as many people as possible regardless of age, ability, or circumstance.

Universal design is based on 7 key principles:

1. Equitable Use – The design is useful and accessible to people with diverse abilities. It provides the same means of use for all users to avoid segregating or stigmatizing users.
2. Flexibility in Use – The design accommodates a wide range of individual preferences and abilities. It offers choice in methods of use and can adapt to the user’s pace.
3. Simple and Intuitive Use – Use of the design is easy to understand, regardless of the user’s experience or cognitive ability. It eliminates unnecessary complexity.
4. Perceptible Information – The design communicates information effectively to users through different modes – pictorial, verbal, tactile, etc. It provides adequate contrast and is compatible with assistive technologies.
5. Tolerance for Error – The design minimizes potential risks and adverse consequences of accidental or unintended actions. Fail-safe features are incorporated.
6. Low Physical Effort – The design allows for efficient, comfortable use with minimal fatigue. It avoids prolonged repetitive actions.
7. Size and Space for Approach and Use – The design provides appropriate size and space for approach, reach, manipulation and use regardless of user’s mobility, body size or posture.

By following these principles in design, websites and apps can be made more equitable, accessible, and usable for all. Some key benefits include better compatibility with assistive technologies like screen readers, improved navigation and readability, and avoidance of common access barriers.

Writing Alt Text

Alt text provides a text alternative for non-text content, such as images, to make content more accessible. It supports people who are blind, have low vision, use screen readers, or may have their images turned off. The alt text should convey the purpose and meaning of the image in a concise and informative way.

The main benefits of alt text include:

• Allowing screen readers to communicate what an image contains to blind users
• Providing context for images that fail to load properly
• Improving SEO by including descriptive keywords

To write effective alt text:

• Be accurate and equivalent in presenting the content and purpose of the image
• Keep it succinct – usually less than 125 characters
• Don’t repeat the caption or surrounding text verbatim
• For complex images, briefly describe the main focus or purpose

Best practices for alt text:

• Avoid phrases like “image of” or “graphic of” – just describe the content
• If the image is purely decorative, use an empty alt text (alt=””)
• For charts or graphs, briefly summarize key information
• Where possible, mention labels, values, trends and conclusions
• If the image contains text, reproduce the text in the alt text

By providing well-written and informative alt text, websites become more equitable and accessible to all users. The alt text ensures key information is available to those using assistive technologies or those who cannot view the image.

Designing for Screen Readers

Screen readers allow people with visual impairments to navigate websites and apps through synthesized speech or braille. They read the code and text aloud, conveying the content and structure of the page.

To optimize for screen readers:

• Use proper heading levels (h1, h2, etc) to create a clear document outline. Screen readers rely on headings for navigation.
• Add alt text to images, describing what’s shown visually. Images without alt text will be skipped.
• Structure links with surrounding text that gives context, like “Read more about accessibility guidelines” instead of just saying “click here”.
• Label interactive elements like buttons and forms. The label should indicate the element’s purpose.
• Ensure color is not the only way to convey meaning. Also use text or icons.
• Don’t rely on visual order alone. Use a logical source order in the code.
• Avoid overly long passages of text without headings. Break it up for easier navigation.
• Eliminate unnecessary divs, spans and styling that may confuse screen readers.
• Check that all functionality works with just a keyboard, without relying on hover or mouseover events.

To test with screen readers:

• Use built-in tools like VoiceOver (Mac) or NVDA (Windows) to experience your site.
• Tab through the page in a logical order, ensure all elements are reachable.
• Install browser extensions like WAVE to automatically flag accessibility issues.
• Work with users early and often to get feedback. Don’t just rely on automated tests.

With some forethought, we can create equitable digital experiences optimized for all.

Color Contrast

Ensuring proper color contrast is crucial for website accessibility. Many users have low vision or color blindness that makes it difficult to distinguish elements with low contrast. The Web Content Accessibility Guidelines (WCAG) recommend minimum color contrast ratios for text and interactive elements compared to their background.

The minimum contrast ratio for normal sized text (above 14pt regular or 18pt bold) is 3:1. For large text (above 18pt regular or 14pt bold), the ratio can be as low as 4.5:1. These ratios were chosen based on vision research to provide reasonable legibility for most users.

There are several free online tools for checking color contrast ratios, such as WebAIM’s color contrast checker. These tools allow you to sample colors from your site and determine if they pass accessibility standards.

Using sufficient color contrast provides many benefits:

• Improves readability for those with low vision conditions like cataracts or macular degeneration
• Helps users with common color deficiencies like red-green color blindness
• Makes it easier for everyone to read text on screens in varied lighting conditions
• Enables users to better distinguish interactive elements like links and buttons
• Provides a more inclusive experience that doesn’t disadvantage or exclude users

With some forethought and testing, it’s relatively simple to choose color palettes that provide enough contrast while still achieving your desired aesthetic. This small effort goes a long way in creating an accessible website.

Focus Indicators

Focus indicators are a key accessibility feature that visually highlight the currently focused element on a page as users tab through content. They serve multiple purposes:

• Allow keyboard-only users to clearly see where they are on the page as they tab through elements. This helps orient them and avoid getting lost.
• Identify interactive elements on the page that can be activated with the keyboard or mouse. Users with motor disabilities rely on understanding what is interactive.
• Provide feedback that the page has correctly responded to keyboard input and focused an element. This reassures all users.

Focus indicators typically appear as a highlighted outline around links, buttons, form fields, and other interactive elements. By default, browsers apply an outline or change background color, however many sites style focus indicators to match branding.

When styling focus indicators, ensure:

• Use color combinations with sufficient contrast against the background so they are visible. Low contrast can make focus unclear.
• Thicker outlines generally provide better visibility than thin default outlines. Minimum 2px thickness is recommended.
• Active and focus states should be styled differently so they are not confused. Active may change background color.
• Custom styled focus indicators are styled consistently across all interactive elements.

In addition to visible focus indicators, adding skip links that allow bypassing navigation aids keyboard users. Skip links are hidden offscreen links that only become visible when focused via keyboard tabbing. This quickly jumps users down to main content sections.

Proper use of focus indicators and skip links together provide inclusive keyboard access and visibility on page. They serve as essential guides that help all users effectively navigate and understand content.

Form Labels

Forms often pose accessibility challenges if not designed properly. Labels should clearly associate with their intended form control and use descriptive text to indicate the input purpose. Screen reader users rely on properly associated labels to understand what to enter in a form field.

Follow these guidelines for accessible form labels:

• Visually associate labels with their respective form controls. Position labels above or adjacent to the control.
• Programmatically associate labels and controls using the <label> element and for attributes that match the id of the form control.
• Write label text that indicates the expected input, like “Email address” or “Search keywords”. Avoid generic labels like “Text input”.
• Place labels in logical positions. Put labels above textual input fields and to the left of checkboxes and radio buttons.
• Mark required fields with “Required” in the label text or using the required attribute.
• Avoid placeholder text as it disappears. Use placeholder text only as supplemental help. Rely on labels for primary instruction.

Proper form labels provide important context for all users. They also enable screen reader users to navigate and complete forms independently. Take care to design descriptive, associated labels for the best accessibility.

Testing Accessibility

Ensuring your website is accessible requires ongoing testing and review. There are several tools and methods to test accessibility:

Automated Testing Tools

• WAVE is a free web accessibility evaluation tool that analyzes web content for accessibility issues. It checks for missing alt text, low contrast, and other common issues.
• AccessiBe is a digital accessibility tool to embed on your website via code to simplify and streamline compliance using AI, machine learning, and computer vision.
• Accessibility Insights is a Microsoft tool that provides detailed accessibility assessments of web pages and detects issues. It has a browser extension and Windows app.

These automated tools are useful for quick tests, but cannot identify all accessibility issues on their own.

Manual Testing

• Test by disabling styling and images in the browser to evaluate if the content is still understandable.
• Navigate the site using only a keyboard, without a mouse. All functionality should be reachable.
• Use screen reader software like VoiceOver to ensure the site is operable for blind users. Listen to how the page is read aloud.
• Zoom to 400% magnification to evaluate the layout and text legibility. Content should reflow and remain readable.
• Test on mobile devices to ensure responsiveness and touch target sizes.

User Testing

Observing real users with disabilities interacting with the site can uncover accessibility issues. Recruit testers with diverse abilities and have them complete common tasks on the site while observing areas of difficulty. Their feedback is invaluable for improving accessibility.

Testing with real users throughout the design process is key to creating equitable digital experiences. Accessibility should be continuously evaluated and improved.

Continuous Improvement

Accessibility is an ongoing process, not a one-time fix. It requires continuously gathering user feedback to identify new barriers and evolving as standards change.

To keep improving accessibility:

• Set up a system to allow website users to report accessibility issues. Monitor and respond to feedback to fix problems.
• Conduct user testing with people with disabilities at least once a year. Observe them using the website to uncover issues.
• Regularly have the website evaluated by accessibility specialists. Stay on top of violations and make improvements.
• Check that the website remains compliant as technologies change. Update code to work with new versions of screen readers, browsers and assistive devices.
• Subscribe to accessibility newsletters and monitor W3C standards. Stay informed of best practices as they emerge.
• Make accessibility a priority in every new feature and redesign. Consider it from the beginning of projects, not as an afterthought.
• Educate your team on evolving accessibility guidelines. Keep internal knowledge up-to-date through ongoing training and education.
• Set goals to continuously enhance accessibility, beyond minimum compliance. Make incremental improvements over time.

Accessibility requires an ongoing commitment as technologies and standards rapidly change. By continually gathering feedback, testing with users, monitoring guidelines and expanding knowledge, you can provide more equitable access for people with disabilities.