What simple steps can a web site take to improve accessibility for visitors with disabilities?

Question

UPDATE 2: Edited again to more clearly focus on visitors with disabilities

Is applying ARIA landmark roles alone a major accessibility improvement, or a half-measure that doesn't accomplish very much? Are there other relatively easy things a site can do to significantly improve accessibility?

• By accessibility, I mean usability by people with disabilities, for instance visual impairment, difficulty using a mouse, etc..
• By simple, I mean large-scale changes to page structure on the site's main templates, rather than hand-tweaked changes to each page.

For example, the one step of applying ARIA landmark roles is in reach for many sites, just by updating their blog or content management software templates. Doing the whole nine yards to annotate every widget’s interaction state is much harder, unless the underlying platform already does it.

Here are some possible steps a site could take, all relatively low-hanging fruit:

• Place all content within HTML5 semantic container tags, specifically article, aside ,nav, section, figure, figcaption, footer, header, and main
• Assign ARIA landmark roles to content containers and HTML headings
• Assign aria-labelledby and aria-describedby attributes to appropriate content containers
• Set the title attribute for content containers (less desirable, since it's seen by all)

Which of those are worth doing? Taken together, would they make a real difference in accessibility for people with disabilities? Are there other simple things that improve accessibility?

(I'm specifically not talking about forms or interactivity, that's a whole other topic. I'm also not talking about making sure HTML and image colors have good contrast, not because it's unimportant, but because that has to be done on a case-by-case basic, rather than in global templates.)

Answer 1

You'll get the biggest accessibility impact focusing on strong keyboard navigation and thoughtful DOM structure including clear heading outline and semantic sectioning with HTML and ARIA. Keyboard navigation is the primary mode of navigation for screen reader users and many folks with mobility impairments, so a foundation there is a prerequisite to any actions or workflows in your site.

Do use HTML5 sectioning elements. Besides making your markup and CSS rules more elegant, it defines the page structure more clearly to screen readers and makes page navigation easier. The semantics of many elements are already supported - albeit inconsistently - in NVDA, JAWS and VoiceOver.

ARIA landmarks also have good support in these 3 screen readers, in particular as a way to skip redundant header content. Use role='main' on the containing element for your primary content.

aria-describedby and aria-labelledby are useful for complex forms and modals. Before relying on these attributes though, focus on creating coherent read order and clearly labeling and grouping form elements. Specifically, use the for attribute to associate <label>s with their controls, and use <fieldset>s with <legend> to group related controls.

Avoid using the title attribute in general. There is no way to display its content via keyboard focus so it is effectively useless for keyboard-only users who do not use screen readers, not to mention mobile devices.

Depending on the scope of your content, you'll need to go further than these recommendations for robust accessibility, but you've got the right idea in trying to address low hanging fruit first. It will go a long way.

Answer 2

By tagging this with section508*, it tells me the site you are making is for the US Federal Government, or a state that adopted the Standards. Section 508 has outlined Standards to be considered accessible to people with disabilities. Some agencies have developed their own checklist, which either extends the Standards, mimics them; such as HHS' checklists. I recommend you getting with the agency Section 508 Coordinator to see what they do for determining 508 compliance. However, if you are wanting your product to be used by a government agenncy, I recommend filling out a VPAT for it.

If you are wanting to build accessible sites, in general, I suggest following WCAG 2.0

Is applying ARIA landmark roles alone a major accessibility improvement, or a half-measure that doesn't accomplish very much?

ARIA helps accessibility somewhat. ARIA let's you mark certain areas of a page as hotspots per say. I suggest you look at my answers in accessibility or mine about ARIA

Are there other relatively easy things a site can do to significantly improve accessibility?

There are things that are pretty easy, I suggest checking out the links I posted above for a starting point, then ask questions regarding on implementation. WebAIM also has some resources on accessibility.

---

From comments

I'm looking for actions a site can take that will be of real practical benefit to users, even if they can't go as far as what Section 508 requires

I would recommend not moving forward with this mindset. All of the provisions of Section 508 or guidelines of WCAG have practical benefit, the question is which apply to your site/application. For example, if you have a table with one header row, and/or one column of headers, provision (g), would be applicable:

(g) Row and column headers shall be identified for data tables.

However, if you have a more complex table (g) would not be applicable, instead (h) would be:

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

However in WCAG, there is no such guideline for tables, it is tucked under 1.3.1, info and relationships and detailed in WCAG 2.0 Technique H51. I can make the same argument for every provision of 508, or guideline of WCAG 2.0.

Headings are by far the most used in-page navigation, most reader users are now aware or ARIA landmarks but usage habits are quite varied.

Yes HTML headings are the most widely used navigation method around because they have been around since HTML 2.0 (Nov 1995). However they are only a navigational option for people who use screen readers, and people who use the Opera web browser. There is probably an add-on for Firefox, but didn't look it up. If you are going to be implementing headings in your site/app (which I recommend), be conscious about what headings you use. They should form a hierarchy of sorts, so don't jump from a <h1> to an <h4> because the look of the font; instead, use an <h2>, and restyle with CSS.

This also is the same for ARIA. ARIA navigation is only available for JAWS, NVDA, and I believe WindowEyes, but for all other assistive technology, nope. There is an add-on for Firefox for basic navigation of ARIA Landmarks(personally I don't like it). However, until browsers implement a built-in way to navigate ARIA landmarks, you cannot just pop them in and say your site is now fully accessible.

*- keeping the part about Section 508 in for reference since the question was originally tagged with it.

Answer 3

A couple of simple but effective steps:

Ensure non-mouse users can see which element is in focus. Many CSS reset styles remove the browser defaults. A dotted line is better than colour

button:focus {
    outline: dotted 1px #000;
}

a:focus {
    outline: dotted 1px #000;
}

But if colour is used it should meet colour contrast requirements. Check out https://addons.mozilla.org/en-us/firefox/addon/juicy-studio-accessibility-too/

Put a "skip to main context link" as the first tab item on the page. Have a look at http://www.anz.com.au for a great example. Just tab into it.

It's important to note that screen reader users can navigate just using the headers (H1, H2 etc) so this is particularly important. Also note that they also use the down arrow to navigate content and tab for when they get to a form or form element.

Hope this is helpful.

Answer 4

Reduce the amount of clicks it takes to get somewhere, which also goes hand-in-hand with making sure that the most used features on the site are easily accessible from your main page. Also, make sure those same "vital" uses of your site are easily found on every page in the entire site.

You may think it's easy to just click home, and then access the vitals from there, but users tend to really dislike this architecture. Although, that is for main-stream, common users. If you're catering to a certain type of user, then the entire architecture needs to be tweaked.

Analytics are key... Good luck!