How to to make websites and apps more accessible
We’re seeing a rise in the number of U.S. lawsuits over digital accessibility, but solving the problem is about more than avoiding legal consequences. Developing websites and mobile apps with people of all abilities in mind enables more individuals to use those products and creates a more inclusive digital landscape.
8 steps to creating an accessible digital space
The pressure to create accessible digital spaces is greater than ever and it’s not just for people with permanent disabilities. Imagine using your phone outside on a sunny day and struggling to see low contrast elements on the screen clearly. Or think about how difficult it would be to navigate with a mouse if you recently underwent surgery on your wrist.
Accessible content is critical in providing experiences that work for all users, especially those with permanent, situational, or temporary impairments.
1. Plan ahead
You need a solid strategy before creating and developing your digital space—accessibility can’t be an afterthought. During the planning phase, scope resources for accessibility, including time, staffing, and budget, and be ready to adjust as the project progresses. If you don’t have an individual or team designated to manage accessibility, there are free resources online, or you can purchase access to the international standard, ISO 30071-1.
Additionally, check the local, state, and federal requirements based on your business location. Some jurisdictions suggest (or even require) a specific level of accessibility compliance for publicly available digital experiences. You also need to provide thorough, cross-departmental communication about the strategy so everyone is aligned on the project’s needs and their individual roles.
You need to allocate a portion of your budget, time, and staff to research, even if you’re a startup with limited resources. Start by defining your target audience and user base to determine the accessibility needs you should prioritize in the design and development of your product. Given that 15% of the world’s population lives with some type of disability, you should assume that at least some of your users will have accessibility needs. But researching your user base will paint a clearer picture of what to focus on.
For example, if you’re creating an app for a retailer that sells eyeglasses, it’s safe to assume your user base is shoppers who wear glasses. In this instance, you need to be especially careful in ensuring the visual aspects of your app are accessible and easy to use for people with visual impairments. Or if you’re creating a website that is geared toward older people, make sure to use clear visuals and a variety of navigation options for a more accessible experience.
If you have the resources, you should also include users with accessibility needs during the research phase. One way to do this is to interview several users about your product’s accessibility, each with a different accessibility need (e.g., a user who relies on a screen reader versus someone who uses a keyboard to navigate a website).
3. Design with functionality in mind
Before diving into the design phase, your designers should have a clear understanding of accessibility standards. If you don’t have an accessibility expert, the World Wide Web Consortium (W3C) provides tips on designing for web accessibility, which is a great starting point. Most importantly, you need to consider users with all types of disabilities and how they will interact with each task on a webpage or app screen. How will someone using a screen reader select a date range on a listing page? A calendar widget may be frustrating or inaccessible to certain users, but providing an additional form field to manually enter dates provides an accessible alternative.
A thoughtfully designed user interface should also convey information through several modalities. Does your audio have closed captioning for users with auditory deficits? Does your content have alt-text descriptions for users who are visually impaired? Making sure no content can only be perceived by a single sense will help keep your site inclusive and usable.
For example, when it comes to graphics, you should never use color alone to communicate a message—use a combination of colors, numbers, words, or letters for button labels. Your buttons should also be clearly labeled. If you have a button labeled “submit,” how will a user know what they’re submitting? People with visual impairments abandon two-thirds of e-commerce transactions due to accessibility issues, so this is especially important. Additionally, don’t forget to check the contrast ratio for your website’s presentation to ensure all text, images, and interactive elements are clearly perceivable. The W3C provides guidelines you should follow.
4. Craft user-friendly content
Accessible content uses clear and concise language. Avoid complex phrases and jargon, spell out any acronym on its first reference, and write at an appropriate reading level for your audience. You should also create descriptive page titles and headings so users can identify the content that follows. And don’t forget to include alternative text for media like videos or images: Users with a visual impairment need alt text to understand functional images, like diagrams (not just buttons and icons). Ideally, the designers will flag placements for alt text and the copywriter will compose it.
An added bonus to writing accessible content is that your webpage will likely appear higher in search results. Clear language and structure create a better experience for anyone visiting your website or application—considerations for cognitive and visual accessibility needs benefit everyone.
5. Develop for people of all abilities
Coding your website with a clear separation between presentation and functionality will solve many accessibility issues before they arise. There are several ways developers can breathe accessibility into a project—following design specifications is paramount. If developers aren’t aware of the accessibility concerns addressed in the design—which the design team should communicate to the developers—the digital experience’s accessibility may diminish. In addition to meeting design specifications, it’s critical to ensure you have no code errors. Code errors present unintelligible information to users who are using a screen-reader, for example.
Semantic HTML is another critical part of accessible coding. For example, headings should include HTML code like H1, H2, etc.
If a user is relying on a screen reader, the “h1” indicates a heading, giving it semantic meaning. But if you include the font size and heading style in the angle brackets, the user won’t know if they are reading a heading.
You also need to ensure users with screen readers can browse your website or app, and design your digital experience so it’s compatible to reflow with different devices and viewport sizes. Using clearly defined code that associates related elements (but doesn’t rely on placement or contrived structures) will save you from reworking your product later in its development lifecycle. You’ll also want to provide navigation throughout the entire digital space with clearly defined labels, allowing users to navigate the site several different ways (i.e., with their mouse, keyboard, or a screen reader).
Every element on your site should be coded to convey its meaning rather than its style. Additionally, make sure you associate a label with every element and form on your site—assume that anyone using your product will need these. Finally, if you’re using any third-party code or tools, you must ensure that it is also compliant with the web content accessibility guidelines (WCAG).
6. Test for accessibility
Auditing your website or app for accessibility before it goes live is critical. Your organization should have a standardized checklist for each webpage to ensure all elements meet standards. The W3C also provides a list of accessibility evaluation tools, including browser plug-ins, mobile apps, and APIs. For example, Stark is a plug-in that ensures contrast ratios are at the right level. Whoever is performing audits should be trained and up to date on relevant regulations and standards. But if you don’t have a trained auditor or designer yet, you can start your accessibility education with the free resources above.
Along with ensuring all the boxes are checked for legal compliance (to at least a minimum “A” level), consider how a user will perceive your website or app. Meeting the minimum accessibility requirements is important, but if you have the resources, including users with accessible needs in the testing phase is an effective way to identify which components of your website or app need improvement. This can help push your website or mobile app from basic accessibility to a product that is actually frictionless and fun to use for individuals with disabilities.
7. Leave room for feedback
To gain insight into users’ experiences with your app or website, include a designated space for users to leave feedback on accessibility. You should also provide several ways to contact a representative, including a phone number, chat feature, and email address. It’s important that this part of your website or app is easy to use for individuals with accessibility needs. Providing a field for feedback not only helps improve the accessibility of your digital space but is also citable in the event of an accessibility lawsuit. And if viable, advise users that the contact information is available to call for assistance in using the website or app, not just for feedback.
The launch of your website or app is not the endpoint. Creating a truly accessible digital space is a continuous process. As the digital world evolves, so should your mobile app or website. In addition to periodically testing your product, you need to keep pace with new technologies. For instance, if Apple releases a phone model that uses new code, your app may not work on its interface. Finally, listen to the feedback you receive. It’s one thing to provide a space for it, but listening to feedback from users with accessibility needs is one of the most effective ways to improve your product.
Consider accessibility at every step of the process
It’s time for startups to develop products with everyone in mind. While it may seem overwhelming to create an accessible product, it doesn’t have to be. Plan, make your best effort, and prepare to iterate as your team continues to learn and gather feedback. And remember, accessibility is about more than just legal consequences. What may not seem like a big deal to you could make or break another individual’s experience with your brand.
Eriks Svarcbergs is the lead accessibility designer at Mobiquity.