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.

Leave a Reply

Your email address will not be published. Required fields are marked *