<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=652504974959061&amp;ev=PageView&amp;noscript=1">

Drupal for Business

At Duo, we build connections.

Use Drupal 8 to Meet Web Accessibility Standards

Luke ZagataWritten by Luke Zagata
Dec 15, 2016 8:00:00 AM

In order to accommodate all website users, it’s essential to make sure that users who have difficulty navigating the web will be able to use your site with ease. Web accessibility considerations take into account users with visual impairment, color blindness, difficulty controlling a mouse, auditory impairment, those who rely on a screen reader and other issues that may make the internet a more daunting place.  

Website Accessibility

Why is website accessibility important?

It is important to make sure that your site is accessible because every user counts, and people with disabilities have the right to access the internet just like everyone else.

In addition, if your website is inaccessible to the blind and/or visually impaired it may therefore violate Title III of the Americans with Disabilities Act (ADA). This could results in lawsuits or unfavorable press for your brand, not to mention you are excluding a segment of internet users from being able to visit your site.

Meeting web accessibility guidelines will also give your site an SEO boost. Most rules and requirements for accessible websites overlap with Google’s own guidelines, ensuring that your site won’t be penalized in Google search results.

What are the rules for website accessibility?

Visually impaired users access websites with the help of screen readers and special browsers. These tools basically either read what is on the screen or outputs the website content to a braille display. One of the most popular tools visually impaired users use is Job Access With Speech (JAWS). 

There are several standards for website accessibility, three of the most widely accepted are:

  • WCAG 2.0: This stands for the Web Content Accessibility Guidelines, which were developed by the World Wide Web Consortium (W3C). WCAG is primarily intended for web content developers, web authoring tool developers, web accessibility evaluation tool developers, and others who want or need a standard for web accessibility.
  • ATAG 2.0: This stands for Authoring Tool Accessibility Guidelines, and were also developed by the W3C. ATAG is primarily intended for developers of authoring tools, including WYSIWYG HTML editors, content management systems, blogs, wikis, photo sharing sites, online forms and social networking sites.
  • Section 508: This standard is primarily intended for government organizations, higher education, and nonprofits.

WCAG explains how to make web content more accessible to people with disabilities, while the ATAG focuses on how to make the authoring tools themselves more accessible, so people with disabilities can create web content.

Luckily for us and other Drupal users, Drupal as a platform has been developed with accessibility in mind, adhering to WCAG 2.0 and ATAG 2.0 guidelines.

However, it is ultimately up to developers to build themes and modules using accessibility best practices. Drupal 8 now ships with extensive support for accessibility standards, so it gives the developer community a great place to start. Developers can even pledge to build Drupal themes and modules under accessibility rules, which allows them to include the D7AX, or now D8AX (Drupal 8 Accessibility eXperience), tag with the module.

With Drupal 8, Drupal now adopts more WAI-ARIA practices, which makes content structures easier to understand for people with disabilities. This means that site pages are more semantically correct out of the box and visually impaired users will find more meaning hardcoded into the HTML of your site. Semantic HTML5 is also now a part of Drupal core, which helps you create interactions that are more usable.

At Duo, we prioritize certain features during the design and development phase to achieve universal accessibility. These features include, but are not limited to:

Back End Components:

  • Skip to content links
  • Meaningful tab order
  • Nested header labels and lists
  • Useful alt text for all images
  • Descriptive page titles

Front End Components:

  • High contrast text treatment
  • Controls for font size built into the pages
  • Properly labeled form fields and error messages
  • Not using color as a status indicator
  • Descriptive form labels

Is my website compliant?

There are a variety of web accessibility test tools available. Our favorite to use is the WAVE Web Accessibility Evaluation Tool. Test your site out today to learn if there are web accessibility updates you need to make to get your site up to par.

Topics: Development

Popular Posts