Why and How to Center Digital Accessibility in Website Development

Don’t assume what people with disabilities can or can’t do. Just assume that they will use your service or product and design it to be accessible to everyone.” – Haben Girma.

According to a study conducted by WebAIM in 2020, 98% of the world’s top one million websites don’t offer full accessibility. Or, put another way, less than 2% of the world’s top one million websites serve approximately one billion people around the globe who live with some type of disability. 

When SCG began our journey to refresh socalgrantmakers.org, we weren’t simply seeking to give our website a facelift. We wanted to build a fully accessible website for every user. We intentionally centered digital accessibility and usability during every step of the process — from the user interface to user experience to the front and back-end development. 

By partnering with the World Institute on Disability, we designed our website to optimize accessibility, audited the design before it went into development, analyzed the prototype for improvements, and had the beta version of our website tested by users with disabilities. As we continue to implement adjustments, we want to reflect on our journey and progress and share the value of universal design principles and justice for digital accessibility.

What is digital accessibility?

The World Wide Web Consortium states, “web accessibility means that websites, tools, and techniques are designed and developed so that people with disabilities can use them.” In designing and building an accessible website, we aimed to create a platform that people with or without disabilities could equally perceive, understand, navigate, and interact with.

Digital accessibility includes website accessibility and the accessibility of anything digital such as video, audio, electronic documents, emails, and mobile apps. For example, you might have seen SCG implement digital accessibility by providing closed captioning for programs hosted on Zoom and conference live streams so that Deaf or Hard-of-Hearing people won’t miss the content. 

In striving toward digital accessibility, we wanted to ensure that our website’s design and coding were accessible and that all content across our digital platforms was up to the same standards.

Applying universal design principles for digital accessibility

Universal design, sometimes referred to as inclusive design, consists of seven principles:  equitable use, flexibility in use, simple and intuitive use, perceptible information, tolerance for error, low physical effort, and size and space for approaches and uses. These principles were founded at North Carolina State University in 1997 by a team of design specialists across multiple disciplines. 

In applying the universal design principles to website design and development, compliance can be easily accomplished by following the latest standardized Web Content Accessibility Guidelines. However, our approach was slightly different. We did not want to build our site first and then conform our designs to the accessibility standards later. Instead, we applied these principles from the beginning and considered them fundamental in designing for all users. This shift required our SCG team and the designers and developers to assume that all users might have a disability. This strategy led us to develop a website that works for all and doesn’t stigmatize users with disabilities.

Design, power, and justice: Why is user testing crucial?

As we position digital accessibility within SCG’s overall racial equity commitment and work, our team also reflected on the principles of design justice, which explores the relationship between design, power, and social justice. This approach rethinks design processes to center historically excluded voices in design practices. These principles were created by a group of designers, artists, technologists, and community organizers at the Allied Media Conference in Detroit. Design justice recasts the designer as a facilitator rather than an expert, prioritizes impact on the community, and views the design process as collaborative and abundant. Whether it’s grantmaking or website development, the voices of people with lived experiences have to be front and center. 

Shortly after SCG launched our beta site, our partner at World Institute on Disability helped us recruit and conduct over 12 hours of testing focusing specifically on accessibility for the disability community. During testing sessions, users are given a list of tasks and asked to provide feedback as they attempt to complete them. Meanwhile, WID researchers observe and highlight areas in which users experience a high level of difficulty navigating our website.

Even though we were constantly making modifications for better accessibility during both the design and development phases, the lessons learned from user testing were still tremendously eye-opening. The honest feedback we received from end-users of assistive technology gave our team an increased awareness of the experience of people with disabilities on our website.

Simple practices to make your website accessible

How do all the principles and intentions above translate to tangible actions you can take today to make your website more accessible? Here are the simple practices we implemented on socalgrantmakers.org during our website refresh:

1. Flexibility in use: We prioritize mobile responsiveness and ensure that all text sizes are legible regardless of whether a user views our site on a desktop or a mobile device. 

2. Simplicity in design: We aim to avoid unnecessary complexity in design and reduce visual clutter. We’ve coded the back end, so that screen readers don’t have to scroll through too many decorative elements, such as dividers between different sections within a page. 

3. Perceptible information: We work to ensure that media and documents are accessible. All images on our site have descriptive alternative texts, all videos have captions and transcripts, and all PDFs and word documents can be read with assistive technology.

4. Keyboard compatibility: Hiding information behind a mouse-only interaction (like hover or double-click) makes it impossible to access for many users. We designed our website so that users could navigate it entirely with a keyboard. 

5. Action targets: We’ve taken into account varying hand sizes and levels of dexterity, especially for one-handed mobile device use. We also make all action targets — such as buttons and hyperlinks — are large enough to click or tap easily.

Learn with us

We are still on a learning journey and are working to ensure that socalgrantmakers.org is digitally accessible. We would love to learn from you and share more on applying the principles of universal design and design justice to digital accessibility. If you are interested in connecting, don't hesitate to contact Phuong Pham at phuong@socalgrantmakers.org.