20 Tips for Award-Winning Web Accessibility

20 Tips for Award-Winning Web Accessibility

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.

Example of accessible labels, instructions, and 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.

Example of good and bad page titles from Apple and AliExpress

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. 

Example of headings immediately bringing structure to the page

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. 

Example of accessible links

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. 

Example of a clear alt text

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. 

Comparison of insufficient and sufficient color contrast

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.

Apple solves the color-only problem by naming each swatch

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.

 Example of Amazon providing consistent means of navigation

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. 

Ways to highlight interactive elements and elements in focus

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. 

Example of clear labels for form fields

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. 

Examples of clear feedback

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.

Example of white space immediately bringing structure to the page

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.

Example of a playback control from Apple

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.
Check out Lemberg's web development case studies.

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. 

 Example of page structure reflected in markup

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. 

Example of a description of the purpose and state of custom elements

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. 

Example of scripting keyboard access to a drop-down menu

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. 

 
0 Comments
I consent Lemberg Solution Ltd collecting and using provided personal information as set out in the Privacy Policy.

Lemberg is a technology consulting, software & hardware engineering company.

Startups and established businesses rely on our industry expertise to build new products and deliver digital transformation.

Join our Newsletter?
I agree to receive emails from Lemberg Solutions Ltd.