Listed below are frequently asked questions. If you have a question that is not answered here, please start a discussion.

Should I use a button or a link?

The general rule of thumb is if clicking the control changes the URL, or reloads the current URL, then a link should be used. If the URL does not change in any way (e.g. the control just runs some JavaScript), then a button should be used.

There is one special type of button that can also change the URL. The form submit button. This button will GET or POST to the URL specified in the form's action property.

Correct use of link and button is very important for accessibility. When a user hears "button", they expect the click to perform some action on the current page. When the user hears "link", they expect the click to take them to a new page, or a new location on the current page.

How do I add content exclusively for screen readers?

Apply the .clipped class (or its rules) to the element that you want to be visually hidden. The element will remain accessible to screen readers on desktop and mobile devices.

.clipped {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

For more information please read the excellent "When and How to Visually Hide Content" by Dennis Lembree.

Will hidden screen reader text incur a search ranking penalty?

No, it is fine to use this technique.

There is a more detailed answer on the Google Webmaster forum.

When using Safari I can’t TAB through the links on the page. What’s going on?

You must enable the following option in Safari's preferences:

Safari -> Preferences -> Advanced -> Accessibility -> "Press Tab to highlight each item on a webpage"

And here’s how to do the same for Firefox:

System Preferences -> Keyboard -> Keyboard Shortcuts -> Full Keyboard Access -> "All controls"

I'm using Microsoft Remote Desktop for Mac to test with JAWS on a Windows machine. My keyboard does not have an INSERT key. How do I send the INSERT command?

It is true that Mac keyboards do not have an INSERT key, and this is a known issue with MRD. The workaround is to install a hotkey application such as Karabiner.

Once installed, check the checkbox "Enable at only Remote Desktop Connection Client - Use F12 as insert".

Now you should be able to activate any JAWS commands that require the INSERT key (e.g. opening the Links List).

Why do we cater for users without JavaScript!?

It's true that only a very small percentage of users browse the web without JavaScript. Sometimes this is by choice, and sometimes not (a strict company security policy may disable JavaScript for all employees, for example).

We are not going to go out of our way to cater for these individuals.

However, there are other unknown factors which can potentially place the user into a non-JS or partial-JS state, for example:

• A script fails to load due to poor connectivity

• A script executes much later or slower than expected

• A script fails due to incompatible browser support

We don’t have any non-JavaScript users

No, all your users are non-JS while they’re downloading your JS Jake Archibald (@jaffathecake) May 28, 2012​

The only realistical way of defending against the unknown is by building our pages in the Progressive Enhancement way; we make sure our most important content and functionality1 is always available to users in any browser, in any situation.

1 Of course, in certain situations, some functionality simply cannot be replicated without JavaScript - a single page app (SPA) which relies heavily on realtime, client-side events, might fall under this category.

How do I know where page headings are required?

Identifying page headings is the responsibility of the design team.

As a rough guideline, know that every logical, visual block of the page must have a heading.

Sometimes a heading will be hidden visually offscreen and available only to screenreaders. Again, defining these types of headings is the responsibility of the design team.

Should SPACEBAR or ENTER key activate links & buttons?

Both the SPACEBAR and ENTER key should activate a button.

Only the ENTER key should activate a link. Pressing the spacebar whilst keyboard focus is on a link should scroll the page down.

Should I use aria-label or aria-labelledby?

Use aria-label in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

Should I use radio, checkbox or select?

A radio group allow only one choice to be selected.

A checkbox group allows zero or more choices to be selected.

A select group allow one or more choices to be selected.