Accessible web pages means meaningful structure

Accessibility is something that should be in mind for design, but if you don't have that luxury, it's really important to start off on the right foot during your development phase. Here are a few boxes to tick to get that right foot forward.

Markup checklist

Stylesheet checklist 

  • Make sure brand colors have proper foreground/background contrast
  • Make sure elements that are hidden with display: none aren't elements that a screen reader would depend on. If so, change their visibility instead of removing them.
  • Make sure no instructive, or descriptive text is in CSS content.

Proper use of header, main, and nav elements

  Plenty of tools exist to help you test this, but the best approach is to have a good understanding of what these are all intended for, and how they're interpreted by a screen reader.

  #### Header
  The `<header>` element is used for intro content. This could be a logo, author, title, a search form, navigation, etc. `<header>` can be used multiple times in a single page as long as it's contained within an independent element or content. The `<article>` element is a good example of independent content.

  #### Main
  The `<main>` element is just what it sounds like. It's used to identify the page's main content. This could be a topic, or even the functional portion of the page. A page may not have more than one `<main>` element.

  #### Nav
  The `<nav>` element is used to represent a series of links. Typically these are links to pages within the current site or application, but they don't need to be. Multiple `<nav>` elements can be used in a single page and if they are, they must be labelled properly in order to differentiate between the various `<nav>` elements.

  #### Heading elements
  Possibly the most abused element of them all, the HTML `<h1>`–`<h6>` elements represent six levels of section headings. Every page should have at least one `<h1>`, and the other headings follow as needed based on the content. If you have 4 sections to a page named "Services", you would use "Services" in the `<h1>`, and you could use `<h2>` as the heading for the various services you have. For example: `<h2>Web Design</h2>`. If you need a heading for a subsection of Web Design, it needs to be an `<h3>`. Hierarchy is super important here so that users and screen readers can understand your content. Never use one of the `<h1>`-`<h6>` elements merely for size.

Natural tab order

  Tab order is something that rarely needs to be modified, but there are situations where you'll want to do it. The best way to know is by trying unless you are able to paint some sort of magical tab order snapshot while you're developing (unlikely). This is a case where human testing is crucial. Go ahead, tab through your page, what was annoying about it? Take notes, and adjust as needed.

Skip to content links

  If you're tabbing through your page, you'll often have to go through all of your navigation, and possibly some other page content before you get to the element you're looking for. This becomes very cumbersome to users that rely on the keyboard, and that's where skip links come in.

  #### Skip to main content, or skip nav
  At a minimum, it's important to have one as the first focusable element on your page. It doesn't need to be visible to a user, but it should certainly be visible once it's in focus.

  #### Skip a large list of items
  There are also instances where you may have a long list of items that are all focusable. A good example of this might be a social feed. The user could potentially up tabbing for a long time before they get to the end of the feed. That's annoying... but, you can just add a skip link before the list, or as the first item in the list. Again, not necessary for it to be visible without it being in focus.

Proper form field labeling

  There is absolutely no instance, really not one, where a label isn't required for a form field. Sure, you can make it invisible (I hope that's what you're doing instead of hiding it), but it needs to be there. Without it, every user with any type of assistive technology has any idea what they're supposed to be doing.

Alternate text for photos or images

  Every `<img>` needs an alt attribute. If there is no applicable alternate text, or if it is redundant, an empty alt attribute should be used.

  #### When is it okay to skip alternate text
  Sometimes photos are abstract or simply aren't required in order to convey any type of message to a user with, or without a screen reader. A meme is probably a good example of this, but maybe that's just my opinion...

  Icon's sitting next to a heading, or other text that is read aloud, don't need to have the same alt text. This can actually be confusing because in many cases it will be read twice to the user.

Tony Montemorano

An espresso swilling frontal-nerdist with an insatiable love for the web.

Post Categories