It can be difficult to put yourself in the shoes of a person with disabilities. Imagine these scenarios:
- You’re using a screen reader and can only listen to the contents of a website.
- You have limited dexterity and can type only one key at a time.
- You’re colorblind and are trying to buy a shirt based on color swatches.
These are only a few examples of limitations shared by fifteen percent of the world’s population — over a billion people. It’s not easy to consider all possible limitations, especially when building websites and web products.
Website accessibility stands for equal opportunity. It accepts our differences and strives to make the internet work for everyone. We’ve prepared this guide on web accessibility to help you write, design, and develop websites and content for a more equitable web.
How you can write accessible web content
Everything you see on the internet is content, but not everything you see is accessible:
- Someone who is hard of hearing won’t be able to appreciate a video without captions.
- Someone listening to a screen reader won’t understand a website without structure.
- Someone with reduced dexterity won’t go out of their way to “click here to learn more.”
Accessible web content is structured, succinct, and has meaningful text alternatives. Let’s look at seven tips that can help you create better and more accessible content.
Tip #1: Keep your writing clear and simple
A person with a screen reader won’t grab a dictionary to make sense of your writing. Long and convoluted sentences can also be hard on people with limited short-term memory.
So unless you want to confuse your readers, be clear with your writing:
- Choose simple words and break up complex sentences.
- Create a glossary of words readers might not know.
- Write out acronyms when using them for the first time.
- Break up your text with lists, images, videos, and other media.
Tip #2: Give helpful instructions and feedback
When asking a user to do something, be clear and helpful. To check if you’re being clear, imagine listening to your own instructions — this is how a person who is blind or has limited vision will perceive them. Or consider a reader who has dyslexia: difficult words and sentences may confuse them, and you will lose a customer.
If you want to be helpful, be clear and consistent:
- Add labels to forms and don’t hide them in the design.
- Give examples of expected input formats (phone numbers, dates, etc.).
- Use human language for error messages.
Tip #3: Add page titles that get straight to the point
Page titles are the text you see on the browser tab. They exist to simplify navigation between open tabs and remind people what pages are about.
Page titles help users of screen readers decide which tab they want to listen to first. And for people with reduced dexterity, page titles simplify navigation through open tabs.
Accessible page titles first state the purpose of the page, followed by the name of the website. They are short and succinct, leaving no room for confusion.
Tip #4: Structure text with headings and subheadings
Well-structured text is easy to read and understand. To achieve structure, use headings and subheadings to show what your paragraphs are about.
By structuring content, you help people with visual disabilities. Many of them use screen readers or zoom in on certain parts of the page, and headings help them quickly find what they need.
Well-structured content also benefits people with physical disabilities. Imagine trying to find a specific paragraph or sentence in an article without subheadings. You would have to read the text from top to bottom to figure out where that one part is.
Navigation is much easier when subheadings group related information. Good subheadings summarize what’s under them and help readers quickly scan a text to find what they need.
Tip #5: Show link destinations
How likely are you to click on a link if you don’t know where it goes? Consider this link, for example:
https://i.pinimg.com/originals/b7/77/33/b77733cd4cecc9f2bb62cb0e9365169c.jpg
From the .jpg at the end, you can see that the link takes you to a picture. But what if you’re not really tech-savvy? Or what if your screen reader just starts reading a sequence of random characters? Such links are confusing.
And if you’re tempted to do the old “If you want to learn more, click here,” don’t. Links like that are confusing. Click where? Learn about what? Don't prompt your reader to ask so many questions before clicking on something.
It’s better to anchor your link on parts of the text:
This link tells you what you’ll learn if you click on it, which is exactly what you need to do to create an accessible user experience.
Also, when you’re linking to a file, note its type and size: “Cat Presentation (PDF, 20MB).” This way, your reader will be prepared for the download and know how to handle the file.
Tip #6: Don’t be lazy with alt attributes
Many people who are blind or have limited vision rely on screen readers to access information on websites. And most screen readers pull text not from the pages themselves (as rendered in a browser) but from their markup. Screen readers cannot interpret and describe images — that is, unless they come with a meaningful alt attribute.
Alt attributes are elements of markup that contain text alternatives to images. You should write alt tags for images that add meaning to the page: important schemes, diagrams, and so on. Alt attributes are not required for purely decorative images.
Tip #7: Write captions and transcripts for videos and audio
Captions and transcripts help people with hearing disabilities understand video and audio content.
For videos hosted on YouTube, you might rely on auto captioning. But do mind that this feature works well only with clearly spoken text and isn’t reliable for languages other than English.
Ways you can design for accessibility
Accessible web design doesn’t have to be boring. You don’t need to sacrifice creativity — the kind that wins an Awwward — as long as you provide alternatives for increased accessibility.
For instance, you can have the most creative navigation but still add an optional search bar. Accessibility can be a fun challenge to your creativity, not an obstacle to it.
Tip #8: Create enough color contrast
Color contrast affects content readability, especially for people with visual disabilities.
Your design should have enough color contrast that most people, including those who are colorblind, can read the content.
There are many free tools to check color contrast, such as Google’s Color Tool. You can use one of them to create a color palette that is not only beautiful but also readable.
To go the extra mile, let users adjust the page contrast to something that works for them.
Tip #9: Use more than color to provide meaning
Color is a great way to convey information. But information provided in color only will not be accessible to people with certain visual and cognitive disabilities.
The easiest way to solve the color-only issue is to provide color names near each swatch. This is a great solution for e-commerce, since it makes shopping accessible to customers who are colorblind.
Tip #10: Keep website navigation clear and consistent
If website navigation is accessible, users can always find their way in and out of a page. The best approach to designing navigation is to provide more than one alternative.
For instance, combine a menu bar and search bar, breadcrumbs, and various orientation cues for an accessible experience. But do keep navigation consistent from page to page. This includes the naming, styling, and placement of navigation elements.
Tip #11: Make interactive page elements visible
You should also improve navigation by increasing the visibility of interactive elements. For instance, you can provide distinct styling for links and buttons and change the appearance of elements in focus.
Better navigation means a better experience for people with physical, visual, and cognitive disabilities. You can choose what works best for your product design, but make sure to keep the style consistent throughout the website.
Tip #12: Label forms to let users know what input you expect
People who are blind or have limited vision rely on screen readers to navigate websites. Clear labeling helps them know what actions a page expects. It also saves time and effort for people with physical limitations and reduced dexterity.
If you want users to fill out forms on your website, be clear about what input you expect. Form labels should be unambiguous and should be located near the respective fields.
When designing for left-to-right languages (such as Arabic and Hebrew):
- Place labels to the left or above the respective fields.
- Add labels to the right of checkboxes and radio buttons.
Tip #13: Make feedback and updates easy to understand and identify
When someone fills out a form or completes an action on your website, give them feedback — even if it’s only a simple “Done!” pop-up. Auto-save and auto-submit features might not be intuitive to older users and people with disabilities.
This is especially important for error messages and notifications. Don’t tell users they’ve done something wrong. Instead, describe the issue and offer ways to correct it. The clearer the feedback you provide, the more likely users are to do what you expect.
Tip #14: Group related content
Spacing can bring structure to content.
Many users with limited vision zoom in on webpages to view content. By placing related elements near each other and providing adequate spacing, you simplify navigation.
Spacing can also benefit people with dyslexia. Not only will it help them find what they are looking for faster, it will also improve page readability.
Tip #15: Let users control auto-playing content
Auto-played and looping content is a creative attention-grabbing technique. But it is distracting, and it can be detrimental to users with cognitive disabilities, ADHD, and other disorders.
To create a calm space for focus, provide users with the means to control content playback. And never auto-play content with sound. This will ruin the experience for people using screen readers and text-to-speech technology.
Things you should know to develop accessible websites
Accessibility focuses on creating alternative means of interaction. It includes:
- Adding keyboard support for all interactive elements
- Outlining the purpose and state of each interactive element in markup
- Not making users complete unnecessary CAPTCHAs.
Tip #16: Mark page language and language changes
Many people read websites with screen readers and other assistive technologies.
For this software to work well, it’s important that website markup reflects the site’s primary language. Default language settings come out of the box with most website frameworks and templates. But if you are designing custom elements, do take care to reflect their language settings.
It’s also important to identify language changes throughout the page. This will help users avoid confusion when listening to the page content.
Tip #17: Reflect page structure in markup
Page markup should reflect the way the page is supposed to be read. Otherwise, people with visual disabilities will have a hard time interpreting content you want them to hear.
You can test the quality of markup structure by turning off all styling: Page content should still make sense in terms of the way and order in which it’s written.
Tip #18: Identify non-standard interaction elements in markup
Most standard page elements already reflect their purpose and meaning in markup. But when you add a custom element, add a description in markup of both its state and use.
Take an accordion element, for instance. You should mark it as a navigation element with role="navigation" and reflect its state when a user collapses or expands it.
People with screen readers can get lost in your website if they don’t know the purpose and state of each element.
Tip #19: Make every interactive element accessible from the keyboard
Every interactive element on your website should come with proper keyboard access. This feature is vital for people with visual disabilities and reduced dexterity, as many of them access the web with a keyboard only.
You can use tabindex="0" with elements that don’t usually come into focus to put them into the navigation order. But you might need to write custom scripts to make your entire website respond to the keyboard.
Do keep in mind that some people can press only one button at a time and need more time to press different buttons. Ensure that your scripts keep keyboard combinations as simple as possible and don’t impose time limits on keyboard commands.
Tip #20: Avoid CAPTCHAs
CAPTCHAs are a pain, and they’re not even the best way to verify that someone isn’t a robot. Automatic detection of interface interactions is a lot more secure.
If you must include a CAPTCHA, make it simple and provide more than one solution. For instance, allow users to listen to the CAPTCHA or output it to a Braille interface. It would also help if you didn’t ask authorized users to go through the check more than once.
Summary
Accessible websites provide a variety of ways to access and interact with content. You don’t need to sacrifice creativity for the sake of accessibility as long as you provide alternative ways to interact with your website.
There are three pillars to web accessibility — content, design, and development:
- Accessible content is clear and concise. It’s well-structured, informative, and genuinely helpful. In many ways, accessible content is also quality content.
- Accessible design doesn’t shy away from creativity. It embraces the unusual while providing simple alternatives and layouts for important functionality.
- Accessible development provides users with functional alternatives for interacting with the website. This includes full keyboard accessibility and descriptions of any non-standard page elements.
Develop an accessible website with Lemberg
Lemberg has more than 10 years of experience developing accessible websites with a variety of tools and technologies. Monda Magazin, one of our projects, has even won two Splash awards in the past year.
You can chat with Roy Vikovych to learn more about our services and expertise.
