Building Beautiful, Accessible Websites for Everyone

People might think of plain, ugly-yet-functional sites when they think of accessibility (a11y).  However, if you check out,, and, you can see that accessible sites can be beautiful and deeply immersive experiences. The a11y of these sites is no accident - designers and developers work together at every step to make sure people of all abilities can use these sites, and not at the expense of a visually compelling experience.

The biggest reason to make your site accessible is that accessibility equals usability.  You wouldn’t deliberately leave a quarter of your potential market off your site, would you?  But when a site is not accessible, that’s exactly what happens – according to the CDC, 1 in 4 people in the US have a disability, and for many, this affects their ability to use the internet.

Building a website with accessibility in mind gives that audience the opportunity to have a great experience on your site and with your brand, hopefully turning them into brand advocates and repeat customers. If people can’t use your site, not only are you losing potential business and brand advocacy, but you could be alienating a segment of your audience to the detriment of your brand image. Additionally, there are legal implications with inaccessible websites, and many accessibility accommodations increase both the SEO and the general usability of your site, making it a better experience for everyone. 

Getting Started

To start with, look to your customer personas – do they encompass a wide variety of the human experience?  Do they allow for a range of abilities? Some users may need more help and support than others, and not all of them will meet your “expectations” of a disability.  On the other hand, many accessibility accommodations will help a variety of people in all walks of life. For an example from the physical world, curb cuts (the small ramps you see built into side-walks and connecting the walking path to the road) were originally designed to help disabled veterans in wheelchairs get around urban areas.  However, once put into use they proved useful for people of all abilities. Not only can wheelchair users safely and independently navigate city streets, but people who are blind can also feel when they’ve reached an intersection by the change in the sidewalk pitch, parents pushing heavy strollers can more easily navigate sidewalks, and likewise for people pulling wheeled luggage or grocery carts, and children on bikes and scooters can all safely and independently navigate these intersections. With this in mind, take a critical look at your existing site design. 

Are there places where usability might be a problem? Take a look at your forms and think about who might be filling them out.  Are the users busy and distracted? Elderly? Dealing with stressful situations? Think of it this way: if you were a parent looking for a physician for your sick child, you’re likely distracted and stressed out by the prospect of a long, complex form that will take time and mental energy to complete. Similarly, if you’re a blind person completing a form with the use of a screen reader (which turns text into audio and would read every line of a form, including non-essential fields) would you become impatient at the number of inputs required? Consider these forms – are you collecting only the information you need for the task, or are you collecting large amounts of data, which may be better suited for additional forms to be completed at a later date? 

Building the forms simply, with clear instructions and well-labeled fields, helps all of your users, and is more aesthetically pleasing in the age of distraction. User experience and design choices can also either create points of friction or frustration or can make for a smooth and intuitive experience for all users. This choices may include but aren’t limited to:

Animations/Parallax scrolling:

These can be creative ways to visually draw the user’s eye to key ideas.  Ideally, though, you should use a light touch. Too much going on onscreen can create problems for users who require assistive technologies to navigate a website and can cause people with vertigo problems to become nauseated. (I think we can all agree that we don’t want our sites to make people sick!)  We recommend including a toggle at the top of the page to turn off parallax scrolling for users who prefer a static view. This allows most users to enjoy the scrolling experience but offers an alternative for people who may neither need nor want a functionality created exclusively for the visual aesthetic.


Use them! They help convey meaning, can simplify or explain complex ideas, and of course, they make your site beautiful. But when you use them - use good alt text.  This not only helps blind users, but it can positively influence SEO when you have descriptive alt text on your images. Alt text should be succinct and accurate. A good test is to read your alt text aloud to someone who cannot see the image.  Do they understand the point of the image? If they can, you’ve done your job. Images that are purely for decoration, such as stock images of smiling people or swirls and curlicues, don’t need alt text.  However, they still need that <alt> attribute. Without it, screen readers will read out the source location of the file. Since this is frequently an auto-generated random stream of characters, blind users find it distracting and needlessly time-consuming. 

Interactive graphics:

If your images are Scalable Vector Graphics (SVGs), you can create interactive images or image maps that are accessible.  SVG has the advantage of being easily resized without loss of quality, making them a wonderful option for users with low vision who may need to zoom in to view the screen. SVGs also animate, and the inline nature of the graphics allows developers to augment the graphics to make the details available to assistive technology users. As with any other interactive item on the page, you’ll need to make sure it receives keyboard focus. All <svg> elements will need some modifications to make them truly accessible.

Videos and multimedia: 

Animations and videos can be a great way to draw the user’s attention, and designers should feel encouraged to use them; however, in order for them to meet the accessibility guidelines, you must follow a few rules

  • Videos with voiceovers require accurate closed captions and transcripts

  • Videos with a lot of visual detail that isn’t included in the audio require audio descriptions

These help users with disabilities, but they end up helping everyone else as well: 

  • Audio descriptions allow people to enjoy the video when they are unable to watch it – such as listening to it while running or driving

  • Closed captions are great for people who would prefer to watch videos without sound. This may include loud environments like a bar or a store, or the more likely quiet environments such as an open-floor-plan office, a hospital waiting room, or even just at home with a sleeping baby

Additionally, these audio transcripts can be a boost to SEO as they provide searchable content for site crawlers. 

Copy and Links:

The language used on website links is often problematic for users of all abilities. If you glance at a page, do you see a lot of links that say “read this,” “click here,” or “learn more”? Accessibility best practices are to use more specific language for link text so that users scanning the page quickly can understand the links when they’re taken out of context.  So instead of “click here,” make the links say “apply now”. Instead of “learn more,” how about “contact us”? Doing this helps all users, but screen reader users in particular. Many screen reader users will scan an alphabetical list of links upon first loading a page. If most of the links are “learn more,” the user isn’t getting any information about what’s on the page, and has no idea if it’s what they’re looking for.  The user either has to go back and listen to the entirety of the page content, which again can be a frustrating and time-consuming ordeal.

More UX and Design Quick Hits

  • Color contrast: Make sure all text on your site is high-contrast and easy to read.  Smaller fonts, such as body text, needs higher contrast than larger fonts

  • Language: Avoid jargon; use plain language.  Define acronyms and technical terms the first time you use them on a page

  • Headings: Heading levels should follow the logical structure of the page; don’t base your headings on how they look, base them on the logical flow of your content

  • Tab order: After loading the page, hit the tab key on your keyboard a few times.  Can you tell where the keyboard is focused on the page? If not, neither can your users who are limited to keyboard navigation.  If you can, that’s great! Now tab through all the links and buttons on the page. Can you get to all of them? Are there any places where the indicator disappears from view?  Can you hit enter on the keyboard to activate all the links and buttons? If not, neither can your users!

When designing or evaluating your site, remember that any updates you make to increase usability help all of your users, and therefore help your site perform better for your organization.  When you design your website, be sure to avoid leaving potential clients sitting on the sidelines because of poor accessibility.