Expert advice for DIY website accessibility

Published on 22 November 2018

Municipal government — like all public institutions — have a mandate to serve everyone. The same is true on the web. In this post, web accessibility expert Robert Jolly identifies the common pitfalls and some first step solutions to remediate the accessibility errors OpenCities found in over 3,036 City websites across the U.S.

Accessibility issues are people issues. City government websites serve people, and therefore accessibility really matters for these websites. Internet access is a human right and online services are increasingly necessary for all people in order to participate fully in society and daily life. When we exclude people, intentionally or not, from this participation, democracy suffers. In their analysis of accessibility, OpenCities found 40% of City sites have more than 30 critical accessibility errors. More than ¾ of sites have more than 10 errors.

Fortunately, there are standards and guidelines in place that help us, as creators and maintainers of government sites, ensure our sites are accessible and usable for all. In fact, making sites more accessible for people with disabilities has the added benefit of making a site more usable in general.

 

Who are we talking about?

How many people have disabilities in the United States? According to the U.S. Census Bureau in 2010, there are nearly 1 in 5 people living with a disability in the U.S. Of those 56.7 million people, 8.1 million people have difficulty seeing, with 2 million of them being blind. 7.6 million people were reported to have difficulty hearing. People are diverse, and so are people with disabilities. To learn more, the W3C’s Web Accessibility Initiativeprovides excellent resources for understanding how people with disabilities use the web. Ensuring online access to city information and services is vital to everyone, and possibly more so for people with disabilities. Effective online services are a game changer for those that have difficulty physically getting to City Hall.

Risks of lawsuits over lack of website accessibility for governments, educational institutions, and private companies have been on the rise. ADA Title III suits jumped 37 percent in 2016 (Seyferth & Shaw), and DOJ enforcement actions involving government-run websites in 2015 and 2016 have included Nueces CountyTexasDeKalb, Illinois; Vero Beach, Florida; Fallon, Nevada; and Isle of Palms, South Carolina; and Milwaukee, Wisconsin.

By working toward creating websites accessible to all, cities will serve their residents more efficiently and lower exposure to risk of costly litigation. Since many cities have legacy content — and often legacy design and code that support the content — we’ve assembled a few of the most frequently seen accessibility issues and ways for City staff to address them in this post.

 

Common Accessibility Problems

Accessibility issues on websites can be many and varied, depending on the decisions made during visual design, front and back end programming, as well as content production. That said, there are a few problems that are quite common and relatively easy to check for and resolve.

 

Visible Keyboard Focus

Sighted keyboard users that cannot use a mouse need to be able to see where their keyboard is focused (shows which link, button, form field, or other actionable element currently is selected). Many designers and developers remove the focus outlines for aesthetic or other reasons without considering the consequences to keyboard-only users.

How do you address visible focus issues?

Ask your design and development team to provide a consistent design and behavior for showing visible focus. Often, visible focus can be provided with edits to just a few lines of CSS.

Keyboard.png

 

Keyboard Focus Path

The keyboard focus path is the sequence of focusable elements (links, form fields, buttons, and other actionable items) that a keyboard-only user will encounter on a page. The natural and recommended focus path corresponds to the page’s source order and language direction (top to bottom and left to right for English language sites).

What should you do about focus path problems?

A good CMS will drop people on the top of the page, at the beginning of the navigation. But sometimes a content author or stakeholder will request that when the page loads their cursor drops into a form field. Don’t do that! This creates an unexpected, and often disorienting user experience, especially for those who cannot see the screen to orient themselves to the page. If your site has pages that alter the focus path significantly from the natural reading order of the page, investigate why and take steps to resolve those issues if the experience is problematic for keyboard only — both sighted and blind — users.

 

Color Contrast

The luminance contrast between text and it’s background needs to meet a certain ratio for accessibility. This is important for people with low vision and varying degrees of blindness (as well as for those using screens in brightly lit or sun glare conditions). When text contrast is low, many people will not be able to read the information or distinguish important elements (links, buttons, etc.) on the page. The WCAG 2.0 guideline for contrast suggests a ratio of 4.5:1 for normal text, and 3:1 for large text.

How to check for color contrast issues:

Ensuring proper color contrast is essential, and it’s easy to do. Install a contrast checker like the Colour Contrast Analyser (available for Mac and Windows) to help you determine and correct the contrast ratio when you are in doubt. Developers and technical staff can also use the Chrome Accessibility Developer Tools extension to verify color contrast requirements are being met directly in the browser.

Color-Contrast.png

 

Carousel Accessibility

Typically, carousels are not accessible. Site visitors should be able to pause them, control their movement with mouse and keyboard, and be able to understand the content if they cannot see the screen. Some animations can trigger vertigo in people with vestibular disorders. This issue was seen on a massive scale in 2013 when Apple introduced iOS 7 with animations enabled by default, causing an uproar from affected iPhone users worldwide.

Ensure carousels are accessible:

If you must use a carousel, provide the following features to ensure the functionality and content of your carousels are accessible to all:

  • Allow users full control of carousels.
  • Include the ability to pause or stop the carousel using their keyboard as well as mouse.
  • Provide appropriate alternate text for all images in the carousel.
  • And, ensure any text content (headings, paragraphs, and links) are available to people who use assistive technologies like screen readers and voice recognition software.

 

Page Heading Hierarchy and Link Context

Another way people use screen readers is to scan a page by heading levels or by reviewing a list of links on the page. Appropriate heading hierarchy allows people to browse a page’s content in an outline format, similar to how a sighted user will scan a page for the most important or relevant sections. Links that simply say “read more” and other generic phrases are indistinguishable out of context for screen reader users.

How to provide accessible headings and links:

Remember that screen reader users often experience your site’s content linearly, just like a search engine would. Provide a meaningful hierarchy of headings for your content, and your non-sighted users (and search engines) will thank you for it. You can visually hide text in links to provide additional context for screen reader users while preserving the design intent of your “read more” or “continue reading” links.

 

Image Alt Text

All images need alternative text that describes their content or purpose to those who cannot see the images. Some images may be decorative only, and while the alt attribute is required, it can be left blank (or empty) so that assistive technology will ignore those images.

What to do with alt text:

The W3C has published an excellent resource, the Alt Text Decision Tree, which many content producers will find useful to ensure images on their sites are accessible.

 

Form Accessibility

Forms are a big part of what people do when they visit government websites. Inaccessible forms create frustrating and potentially discriminatory barriers to access for people with disabilities. If you provide online access to city services that require the use of forms, ensuring that everyone can use them is imperative.

Some basics on ensuring form accessibility:

Every form field needs a label which will allow people who use screen readers or voice recognition software to understand the purpose of and interact with each field. If “first name” is just bold text next to a field without the proper labeling they won’t know what it is.

Form elements also need to be keyboard accessible. Date pickers and customized select lists, check boxes, and radio buttons are often problematic when people who rely on a keyboard only to fill out a form. Test to ensure that every form field or option can be filled out or activated without using a mouse. Then, work with your developers to correct any issues you may have found.

 

Final Thoughts

No one intends to make their site inaccessible to people with limitations or disabilities. Spreading awareness of these accesible practices can go a long way to ensuring that your City site works for everyone. While accessibility can be a complex matter, there are things you can do to make your site work better for everyone.

A more thorough accessibility evaluation and training for your web teams is available from the co-author Robert Jolly and his employer, Knowbility. Knowbility is a 501(c)(3) nonprofit organization with the mission of improving technology access for millions of youth and adults with disabilities all over the world and has experience working with government entities at the city, county, state, and federal levels to improve the accessibility of their digital offerings.

 

Get OpenCities Insights Emails