1. Use CSS Focus states to highlight tabbing elements
2. Make your forms accessible
3. Make accessible accordions
4. Ensure accessibility is maintained when content is exported
5. Be thoughtful with modals and animation
6. Add descriptive values to your alt=”” tags when uploading images

When it comes to web development, accessibility is more than just adding alt tags to your images. So if you came here looking to read about the easiest elements to change, this blog is not for you (don’t worry, we’ll show you how to add alt tags too).

It’s almost a cliché now to talk about how pervasive the internet is in modern life. We use the web to buy goods, pay bills, and stay in touch with friends and family across the globe. Nearly anything we want to know is accessible within a handful of keystrokes, and the division between the online world and our real lives is becoming pretty blurry. But users with disabilities, who make up about 15% of the population, encounter online barriers that don’t exist for the rest of us. And these hurdles can keep these users from enjoying the full capability of the 21st century web. 

We see all too often that websites aren’t designed or coded with accessibility in mind. There’s no doubt that building an accessible website will take some extra time and effort. But a little elbow grease is a small price to pay for a website that invites all users. Happy Medium puts a lot of work into making the design and layout of a website ideal for accessibility, but in order to reach the full potential of an inclusive web, we’ve got to start talking 1s and 0s. 

Here are some tips for how to code a website for accessibility from the Happy Medium web development team.

1. Use CSS Focus states to highlight tabbing elements 
   People who use power keyboards need to see which elements they are selecting. It’s common for a user to tab from one item to the next, see the destination URL change in the bottom left-hand side of the screen, and be left wondering which element on the website they are clicking on.Without dedicated focus state highlights, users can’t easily determine what they’re clicking on. Ambiguity should be avoided at all costs when it comes to web design, so here’s how you fix it.To communicate a change in the focused element:

   
     a:focus {
       outline: 3px solid orange;
     }
   

   To communicate that once a link is made active, we remove an underline:

   
     a:active {
       text-decoration: none;
     }
   

2. Make your forms accessible
   Use the element to associate text with form elements. When you do this, you need to use the “for” attribute and have it match exactly to the “id” of the form control.

   
       <label for="username">Username</label>
       <input id="username" type="text" name="username">
       

   This is the most basic way to make form fields accessible. We highly recommend against hiding the form label or using text within the form field to describe the purpose of the field. Lighter-weight text can be hard to see for users with vision impairments. Make it easy to input text by putting your labels outside the box.

3. Make accessible accordions
   Make your accordions a tabbing-accessible button so that keyboard users are able to access the contents within.

   
         <section class="accordion-section">
           <div class="accordion" role="presentation">
             <div class="js-accordion__panel">
               <h3 class="accordion__heading">
               <button class="accordion__trigger" aria-controls="accordion__content_1" aria-expanded="false" tabindex="0" id="accordion__title_1" aria-selected="false">I’m tall when I’m young and I’m short when I’m old. What am I?
               >/button>
               </h3>
               <div class="accordion__content" id="accordion__content_1" role="region" aria-hidden="true" aria-labelledby="accordion__title_1">
                 <p>A candle</p>
               </div>
             </div>
       

   As a rule of thumb, we like to see if an entire website can be navigated with single key strokes. This shows us whether we’ve done a good job as developers making a site as accessible as possible.

4. Ensure accessibility is maintained when content is exported
   Some websites require users to export content into common file formats like PDF. When content is exported from an accessible site, it’s important to ensure that the content remains accessible. At Happy Medium, we achieve this by using Prince XML. This software allows us to export an HTML page into an accessible PDF that maintains all the accessibility of the original webpage. (Hint: You need to be running version 12.5 or later.)If you’re uncertain about the accessibility of your exported PDFs, use Acrobat DC’s Accessibility Checker to go through your document and make the elements accessible.
5. Be thoughtful with modals and animation
   Modals and animations are a great way to bring a website to life and provide a dose of visual appeal. However, information or sensory overload can cause challenging behaviors or meltdowns among users with Autism Spectrum Disorder. Animated modals that include blinking, flickering, or flashing can be a serious distraction and considered inaccessible for some users.We recommend strategic use of CSS and Javascript to slow down nonfunctional animations. The animations won’t lose their visual appeal, but they will become more welcoming for all users.Set fair animation lengths:

   
         div {
             transition: width 2s;
         }
       

   Set fair iteration counts:

   
         div {
             animation-iteration-count: 3;
         }
       

   Or in JS:

   
           var target = document.querySelector('.box');
           var player = target.animate([
             {transform: 'translate(0)'},
             {transform: 'translate(100px, 100px)'}
           ], 2000);
           player.addEventListener('finish', function() {
             target.style.transform = 'translate(100px, 100px)';
           });
         

6. Add descriptive values to your alt=”” tags when uploading images
   Our blog series on accessibility has already mentioned alt tags a handful of times, but we can not emphasize how and simple, yet important, this task it. Humans rely more on sight than any other sense, and web users with vision impairments should be able to interact with visual elements on a page the same way you or I can.Making users with vision impairments rely on nondescript alt tags is like making a person watch a movie without wearing glasses. Could they get the gist of the film from watching a blurry image? Probably. But do they lose a lot from the experience? Absolutely.Here’s a good example of a useless alt tag compared to a valuable one:
   Incorrect: alt=”image of Kodie Grantham”Correct: alt=”A casually dressed man with short brown hair and long beard sits behind a desk with pint-glass in hand. He’s surrounded by personal items and collectables, including an electric guitar and skateboard sitting at his feet”

Why does it matter?
As builders of the web, we should feel a shared responsibility to make it a welcoming and inclusive place. After all, developers do play a role in allowing people with disabilities to participate in essential parts of society. If empathy alone isn’t enough to encourage accessible coding, maybe these performance benefits of an accessible website will do the trick.

1. Better SEO Results
   Alt text and other accessibility features can help your page rank higher in search results. Google considers accessibility so important, they even include it as part of their mission statement.
2. Lower Bounce Rates
   If a webpage isn’t built for accessibility, it will immediately turn away users that rely on accessibility tools like screen readers or other assistive technology.
3. Competitive Advantages
   Building a more accessible site than your competitor’s sites puts you in a better position to serve users that your competitors can’t.

Small Steps, Big Impact
Coding for accessibility is not a large investment. The work itself isn’t terribly complicated to complete. It just takes a little more time. A competent dev shop should be able to complete any accessibility work, and oftentimes it’s easier than most of the work we’re doing anyway. The biggest adjustment most teams need to make is beginning every project with the same goal of improving accessibility of the internet.

If you’ve got a website that could use a facelift or an accessibility audit, let’s chat.