Accessibility for Developers

Web Accessibility Glossary

a11y

a11y is the shortened version of accessibility. There are 11 letters between the 'a' and 'y' ... so a11y

Access keys

Access keys are when you can assign keyboard shortcuts to HTML elements. For example<div accessKey="h" />. This often causes accessibility issues if they conflict with default or expected keyboard shortcuts. However they can be useful for advanced users of your app/site with assistive technology - if they learn what they are.

Accessibility

Accessibility is making sites/apps useable by everyone - even if they have disabilities

ARIA

Web Accessibility Initiative's – Accessible Rich Internet Applications. This is a set of standards used to tell screen readers and other assistive technology about what elements on the page are. See more about ARIA

Aria live

The aria-live attribute can be used to tell screen readers how to announce changes to the content. For example, if you had an alert you wanted the screen reader to announce. The default for most elements is aria-live='off' which means changes will not be announced. See more about Aria live

Assistive Technology

Assistive Tech is the hardware and software that can be used to aid with accessibility issues. For example Mac OS has Voiceover (screen reader) and magnifier (to zoom in parts of the screen).

Focus state

Focus state is the change of how an element (such as button or link) looks when it is focused. An element is focused after being clicked or tabbed to. You can see the current focused element by looking at document.activeElement in JS.

H1 tags, heading tags

The heading tags (H1, H2, H3, H4, H5, H6) are headings. H1 is meant to be the biggest, main heading on the page, and H6 is the smallest

Hover state

Hover state is when your mouse hovers over an interactive element (such as a button or link) and it changes how it looks (e.g. has an underline). This is similar to the focus state but only active when the mouse is on top of the element. By default there may be no hover state so it is important that this is set up in the CSS.

JAWS

JAWS is Job Access WithSpeech - a very commonly used screen reader.

Screen reader

A screen reader is an assistive technology that can take content that is usually displayed visually, and describe it by reading out the words (and description of the type of content)

Tabbing/tab to

When the tab button (normally left of the q button) is pressed, it will go to the next interactive element (links, buttons etc). It is critical that the focus state is set up so you know what item is currently selected.

UI

User interface - the design/look

UX

User experience - how the user interacts with your site

WCAG

Web content accessibility guidelines - a set of rules to follow to make content accessible See more about WCAG