Techniques for accessible web development

Image of HTML codeGreat, you’re on board. You’ve made the choice to offer accessible content. A first step to building an accessible website is to be aware of the components of web development. These integrated components include the web content (text, images, and media), user agents (the software/hardware people use to to access the content), and authoring tools (the software used to produce web content). In other words the move toward accessibility has to take an all inclusive view point. It’s about the the producer and the consumer and the tools.

Accessibility standards play a key role in determining what techniques should be utilized. Here we’ll focus on the Web Content Accessibility Guidelines (WCAG) https://www.w3.org/WAI/intro/wcag.php. There are two other guidelines that are pertinent to this work. For the developers of user agents, these address the needs of browsers, browser extensions, media players, readers, etc. This is the User Agent Accessibility Guidelines (UAAG) https://www.w3.org/WAI/intro/uaag.php. Finally there are guidelines for authoring tools. These tools include tools like Adobe’s Dreamweaver and Automatic’s WordPress CMS. These guidelines are named the Authoring Tool Accessibility Guidelines (ATAG) https://www.w3.org/WAI/intro/atag.php.

WCAG at a glance

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and other alternatives for multimedia.
  • Create content that can be presented in different ways,
    including by assistive technologies, without losing meaning.
  • Make it easier for users to see and hear content.

Operable

  • Make all functionality available from a keyboard.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures.
  • Help users navigate and find content.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future user tools.

Source: https://www.w3.org/WAI/WCAG20/glance/

Image of W3C logoThis is a good start, perceivable, operable, understandable, and robust – POUR. Let’s connect some techniques to these concepts. The first one under perceivable, provide text alternatives for non-text content, has an obvious implications for web developers, use the alt tag with your images. This one has an immediate added bonus: greater search engine optimization. One of the great things about coding with accessibility in mind is that SEO plays very nicely with accessibility enhanced websites.

Take the birds eye view

The first step in this process should be an overhead view of your web content.

Some questions to ask yourself in early production:

  • What are the main sections of my website?
  • These main sections might include the header, nav, main content, aside, and footer. Once you have that laid out in your html, add aria labels to your sections.
    Is the code semantic?
  • Having semantic code means that when viewing the code sections are named for their purpose.
  • HTML5 does a great job of this, but there are cases when the guidelines suggest you also use the aria labels. For example, the header of the page should also include the aria=”banner” attribute.
  • Are there sections of the page that a visitor might like to skip?
    Including skip links at the top of the page to guide folks to the main content and/or the navigation can be very helpful for folks using a keyboard for navigating. This advantage is even more pronounced for folks using more tailored assistive technology.

Some techniques to consider

ARIA Roles

Accessible Rich Internet Applications or ARIA are a guidelines for accessible programming. The documentation includes usage guidelines on page roles. There are specific names for roles of different page parts. Remember that there should be only one role per page. For example there should only be one item with the role of navigation, even though you might have multiple navigations on your page. By adding landmark roles to your code you can potentially make life much easier for people using screen readers.

banner: A region that contains the prime heading or internal title of a page.
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
main: Main content in a document. In almost all cases a page will have only one role=”main”.
navigation: A collection of links suitable for use when navigating the document or related documents.
search: The search tool of a Web document.
application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)

Source: https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

Alt(ernative) Text

Simple enough, right? Add an alt tag to your images, ex. <img src=”path/to/image” alt=”A programmer working hard to bring this site to life!”> That’s the start, but this item includes all non-text content. This includes controls, time-based media, test, sensory, and captcha. For decorative content, the guideline recommends that it is used in a way that, if disabled, does not interfere with the usage of the site (i.e. it can safely be ignored).

Skipping links

Skip links are links that are hidden from visitors, unless those visitors are using assistive technology. The newer web readers utilize the aria roles to skip around the page, but these links are good for backward compatibility. Thomas Bradley has a great 5 minute video on how to utilize them here. There’s nothing particularity fancy about it. They’re just a navigation ul that is hidden with css (using a negative margin). When focused the negative margin is removed.
Check out Thomas’ video: https://www.youtube.com/watch?v=UnEItq289lU&list=PLWjCJDeWfDdcEtSnqq_iGLKGA_H_3o3y7&index=5

 

Keep your eye on the big picture

These are just a few techniques that will help make your pages more accessible. There is more to it than this. For a more comprehensive list of items and techniques, check out the W3C WCAG quick reference, https://www.w3.org/WAI/WCAG20/quickref/. When thinking about coding for accessibility consider POUR: Perceivable, Operable, Understandable, and Predictable. This will have benefits to the folks needing help. It will help you as the developer and content producer consider the structure of your content, and it will increase your search engine optimization.

An introduction to accessible websites

Image of Accessible IconsWhat does it mean to have an accessible website?

People with disabilities can perceive, understand, navigate, and interact with the site. Interaction includes being able to read and write.

It’s more than the ability to interact. Building accessible websites is about the experience provided by the designer and coder to folks with a variety of challenges, including visual, auditory, physical, speech, cognitive, and neurological challenges.

Making a website accessible is not always straight forward. Making the right choices is key to providing a user experience that is appropriate for all audiences. Accessibility isn’t about compliance with section 508 of the Rehabilitation Act (https://www.section508.gov/ & https://en.wikipedia.org/wiki/Section_508_Amendment_to_the_Rehabilitation_Act_of_1973). It’s about UX.

It’s about being inclusive and broadening the scope of your audience. One of the great things about accessibility is that it helps in other aspects of your website. For example, one of the important techniques in accessibility programming is the inclusion of alt tags for images. Alt tags also help with search engine optimization. Another example is the structure of your pages. Pages with clear hierarchy in headings are accessible and also more readable for non-challenged audiences.

Making the case for accessibility

Building an accessible website or retrofitting a site is time-intensive and takes the skill of a professionally trained programmer and strategist. It costs money and takes time. For people interested in promoting accessibility in their organization there are several ways to frame the discussion.

  • Inclusiveness: The most important case for building accessible websites is inclusiveness and to aid folks who need the help.
  • Avoid Fines: Did you know that if you accept federal dollars you must make, not only you website, but all digital documents accessible? The fees for non-compliance can be hefty.
  • Content Organization: Building accessible websites encourages the organization and optimizing of your content.
  • SEO: Accessible websites are inherently optimized for search engines.

Photo of a hand writing "Human Resources"Assembling Resources

There are a variety of skills and resources needed to develop an accessible strategy. Often many of these roles are played by the same person.

  • User Research Team: Includes folks with disabilities.
  • Content Strategist/ Information Architect: Performs tasks related to macro and micro content. They decide which labels and names should be used. They determine key clues to help audience navigate and perform actions.
  • Interaction Designer: Develop wireframe and interactive maps to best accommodate information flow.
  • UX Designer: Develop the interface that best accommodates both challenged and non-challenged visitors.

 

 

Accessibility to web content is more than a trend. It is a key for everyone to access your content.

It’s a human rights issue, and a very big deal.

Resources

W3C Web Accessibility Initiative: Introduction to Web Accessibility

W3C Web Accessibility Initiative: Developing a Web Accessibility Business Case for Your Organization