The Importance of an Accessible Website - Part 2: How Can Your Team Get Involved?

The first step to building an accessible website is understanding who needs an accessible site. Knowing who you are creating this for and asking yourself questions helps you see potential problems from another point of view and potential ways to solve them.

While modern agencies wrap accessibility into their design and build processes, discount shops and “build your own website” services leave end-users without the benefit of the latest in accessibility improvements. One thing that tends to be missing within these services and shops is knowledge that building an accessible website actually takes an entire team. It isn’t just about using the right HTML markup. In order to show significant results, accessibility checkpoints must be incorporated into each existing link of the web production chain with project managers, content creators, designers, developers, and quality assurance testers.

Project Managers

1. Make accessibility a priority from the beginning

   Planning ahead and incorporating checkpoints for each stage in the project ensures easy implementation and correct estimates for scope, time and budget.

2. Educate the client

   With so many content management systems out there, the client is probably the content creator and in full control of the content. A basic understanding of HTML, like heading structure, will help the client make well informed decisions.

Content Creators

1. Include meaningful alternative(alt) text for visuals

   Alternative text descriptions are great for people who cannot see the image. These must be short yet detailed to help the user understand what is being said in a chart, or the point of a photo.

2. Use headings to organize and structure content

   Screen readers interpret content on a webpage as an outline. So, just because a heading doesn’t look the way you want, doesn’t mean you should use a different heading or paragraph closer to your desired size. Use H1 headings for page titles, H2 headings for subheads, H3s for the next level down, and so on – regardless of how they actually appear on the screen. Work with your designer or front-end developer to style headings so they appear as you need them to.

3. Use descriptive link text

   Avoid “click here” or “learn more” as links. Screen readers have the ability to navigate a site by semantic tags, including links. If all links say “learn more” it will be difficult to understand what this is referencing. Ideally, the purpose of each link can be determined from the link text alone.

   • Do: Learn about the history of HTML.
   • Don’t: To learn about the history of HTML, click here.

4. Provide captions, transcripts and descriptions for media

   Supplying your users with transcripts and closed captioning for audio and video elements enables them to easily gain access to content even when audio impaired.

Designers

1. Content First

   Push for completing and organizing your content before starting any design. This enables you to create a well-informed layout and hierarchy for every user. And remember, design and development are used to leverage content and create the simplest, most intuitive, and most accessible layout—not just to make content look pretty.

2. Be mindful of typography

   The wrong typeface for your media, or the wrong size and length of content or device can be extremely difficult for readers with visual or cognitive impairments to read or follow along.

3. Provide good contrast for color blindness and low vision

   The wrong color combination or lack of contrast can be distracting or even confusing for people who are color blind or have aging eyes

4. Don’t rely on color alone to show distinctions

   Use color as a way to highlight or complement what is already visible. It should not be the only visual means of conveying information. An error should say that it is an error and not just be outlined in red.

5. Create clear and intuitive layouts

   An overcomplicated or inconsistent layout and visuals disrupts intuitive navigation and creates frustration. Websites with simple and intuitive user experience are inherently more accessible

6. Critique. Critique. Critique.

   An outside source will help find errors and improvements you may have overlooked after staring at that same screen for hours. This can be from another designer, a potential user that fits your target audience or something like this color blind simulator or this site to test color contrast.

Developers

1. Use semantic markup for hierarchy and structure

   The correct use of hierarchy and structure with semantic markup creates a usable outline of content for screen readers to easily follow along. For instance, a screen reader can bypass all navigation links and skip straight to the main content if the content is found within the <main> element.

2. Pay special attention to markup on forms

   Group common elements in a form together with form fieldsets and legends to give context to content for screen readers. And don’t forget to include labels for all inputs. If the designer doesn’t call for any labels, then visually hide them with width, height, or visibility. And remember, placeholder text is not the same as a label.

3. Capture content creators’ needs

   When configuring your CMS, make sure alt text is required for every image and captions are available for more complex images.

4. Enable keyboard navigation

   Enabling keypad commands can greatly impact the accessibility of your site for those who cannot use a mouse to navigate. It should be as simple as using the tab key. Semantic HTML and keeping styling defaults on :focus is a great start.

5. Include ARIA attributes

   Aria roles, properties & states describe a section or functionality that wouldn’t make sense through a screen reader. For example an “X” for a close button would be interpreted as “button x” by a screen reader. Aria enables this to read as “button close” if written as arial-label=”close”.

   Just note that just because you give something a role doesn't make it function any differently. It just gives meaning to an element that is conveyed through a screen reader.

Quality Assurance Testers

1. Test at every stage of the process

   Testing for accessibility is important at every stage and should be done by every person in the chain of operations.

2. Computers aren’t humans

   Just like everything else, there should always be a strong human element to testing. A computer does a great first pass, but there will always be unique cases that a computer just cannot replicate. If you have the chance, have someone who uses a screen reader everyday use your site and provide feedback. You will learn a lot about their experience and how it differs from yours.

Final Thoughts

Accessibility - much like responsive design, fast page loads, SEO and other important website considerations - is easiest to implement if planned from the beginning. With the help of everyone on your team, you can achieve the new standard for all users and create a better experience for you and for me.