Learn about WCAG 2.0 principles guiding Quire’s development
The principles outlined below have been informed in particular by:
- The 18F Accessibility Guide
- Carnegie Museums of Pittsburgh Web Accessibility Guidelines
- Adaptive Web Design, by @AaronGustafson https://adaptivewebdesign.info
- Inclusive Design Patterns, by @heydonworks
While not exhaustive, the list below is meant to highlight the key principles by which Quire was originally developed and that we recommend others follow when developing their own Quire projects. It has been ordered roughly, starting with those items most owned or effected by editors working on publication content and progressing into those owned or effected by developers working on publication styles, template markup, and interaction.
Heading levels (
H6) should indicate a content outline, not visual styles, as they are frequently used by screen readers for page navigation. Quire pages will have their titles placed in an
H1tag at the template level, and there should only ever be one
H1tag on a page. Headings in the Markdown content documents should start with
H2. All headings should have content following them.
All non-decorative images should have
altdescriptive text. (Tips on crafting good alt text.)
All formats (PDF, EPUB, MOBI, and print) must offer at least basic access to all the content of the publication. For example: videos and deep zoom images should appear with fallback images; URLs to online content should be provided in text, and hover-over citations or glossary terms should be printed in full at the bottom of the page or in a separate section.
A proper background/foreground color contrast ratio must be maintained for all elements. (Color contrast checker.)
Links must have a visual indicator besides only color.
All page content should be in an ARIA Landmark element/role.
The first element on every page should be a “Skip to Main Content” skip link.
Any element or piece of information that inherits meaning or context from its visual appearance, should be augmented with spoken, descriptive labels for screen readers. Quire templates make use of a
visually-hiddenCSS class. When applied to an element, the text within is hidden from view, but will be read aloud by screen-readers.
If clicking on an interface element sends the user to a new page or a new location on the existing page, it should be an
<a>link. If clicking changes the state of the current page, such as in opening a modal, it should be a
When viewed without JS, the page should be beautifully designed and fully navigable with no missing/hidden elements.
When viewed without CSS, the complete contents of the page must be logically organized and readable.