An overview of Figuration, including how to use it, basic templates, examples, and more.
Accessibility
Figuration follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.
Disclaimer
As stated on our about page, our goal is to make Figuration a consistent, robust, but easy to use front-end framework for developing web sites and applications. Figuration includes generalized components and functionality designed to work for keyboard, mouse, and touch users, while providing basic accessibility requirements.
It is possible to create projects that meet the WCAG 2.0 (A/AA/AAA), Section 508, or other accessibility requirements. However, creators may need to include additional styling, JavaScript functionality, and markup, along with additional ARIA roles and attributes to meet certain requirements.
Skip Navigation
If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content
link before the navigation (for a simple explanation, see this A11Y Project article on skip navigation links). Using the .sr-only
class will visually hide the skip link, and the .sr-only-focusable
class will ensure that the link becomes visible once focused (for sighted keyboard users).
Due to long-standing shortcomings/bugs in Internet Explorer (see this article on in-page links and focus order), you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1"
.
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with tabindex="-1"
when they are clicked with the mouse) with #content:focus { outline: none; }
.
Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content" tabindex="-1">
<!-- The main page content -->
</div>
</body>
Nested Headings
When nesting headings (<h1>
- <h6>
), your primary document header should be an <h1>
. Subsequent headings should make logical use of <h2>
- <h6>
such that screen readers can construct a table of contents for your pages.
Avoid skipping heading levels when structuring your document, as it is confusing for screen readers. For example, after using an <h2>
in your code, the next heading used should be either <h2>
or <h3>
. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.
Learn more at HTML CodeSniffer and Penn State's Accessibility.
Screen Reader Only Content
In some cases the design might call for content or layout that works fine for visual users, but screen reader users might need additional context to help with what the content is trying to convey.
Some quick examples would be using icons for layout, or links that might all visually contain the same information (the ever present 'read more' links). In both cases a screen reader is left with no context.
Using screen reader only content is a way to provide this context without overloading the visual display.
Some helpful references:
Disabled Anchors
Many of Figuration's components use of a .disabled
class to make items visually appear disabled. While there is the disabled
attribute available for <button>
s, HTML does not have an easy way to disable user interaction with <a>
s.
It should also be noted that:
<a>
s don't support thedisabled
attribute.- The
.disabled
class uses a future-friendlypointer-events: none
property to try to disable thepointer-events
and link functionality of<a>
s, but that CSS property is not yet standardized. - In browsers which support
pointer-events: none
, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. - When using both the
pointer-events:none
andcursor: not-allowed
styles, the disabled cursor is not shown when hovering over the item.
Some solutions include:
- In some cases, an acceptable solution would be to replace the
<a>
element with a<span>
to allow for a similar layout. This is due to<span>
s also having a defaultdisplay: inline
and are not clickable or focusable through keyboard interaction. - Disabled links, especially buttons and navigation items, would benefit from the inclusion of an
aria-disabled="true"
attribute to indicate the state of the element to assistive technologies. - Add a
tabindex="-1"
attribute on disabled links to prevent them from receiving keyboard focus. - Use custom JavaScript to disable their functionality. For example:
$('.disabled').on('click', function(e) {
e.preventDefault();
});
Conveying Meaning With Color
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies—such as screen readers—or users that might be colorbind. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only
class.