Skip to content

Instantly share code, notes, and snippets.

@dazulu

dazulu/inclusive-design-summary.md

Last active July 11, 2017 07:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dazulu/bdef097b247334669c9baa1f88df549c to your computer and use it in GitHub Desktop.
Save dazulu/bdef097b247334669c9baa1f88df549c to your computer and use it in GitHub Desktop.
Download ZIP
Inclusive Web Design Summary
Raw
inclusive-design-summary.md

Inclusive Web Design Summary

This summary is an amalgamation of a few sources linked below and by no means an exhaustive authority. It should be treated as a developer guide and more detailed sources should be consulted when developing any web features. For example, the book and links mentioned below also include practical examples and more detail on ARIA roles and markup etc.

Define Page Language

Defining the correct language in an HTML page helps assistive technology to choose the correct voice profile or character set, besides the usual SEO and search engine benefits. Make sure to always define the right language.

  • <html lang="de">

If you switch language within a document you can use the lang attribute on specific tags.

  • A little bit of the <em lang="en">je ne sais quoi</em> so-to-speak.

Navigating Websites

It’s important to make sure that our websites are navigable by keyboard. A lot of users rely on a keyboard when they surf the web. Among them are people with motor disabilities, blind people and people who don’t have hands or cannot use a mouse or track pad for whatever reason.

Navigating a site via keyboard means jumping from one focusable element to another in DOM order. This is usually accomplished by using the Tab key or Shift + Tab for the reverse direction.

  • DO NOT try to enhance the already existing methods of keyboard navigation or resolve their quirks
  • DO NOT add your own new keyboard shortcuts to your app for accessibility

Introducing the skip link for sighted keyboard users

A classic allowance made in the name of inclusive design. Seems silly but it's a method that is tried, tested, and just works.

  • A skip link is a link that appears above all other content and points to the main content of the page
  • They are not visible by default
  • They are visually revealed only while focus is held
  • Best practive for this is as the first element focused on a page via the tab key

Markup

Use semantic markup.

  • Use a button for a button Etc.
  • Use ARIA roles where necessary but don't overdo

Use correct heading structure

By creating a sound outline using headings <h1> - <h6> you are helping users to better understand the structure of your page and relationships between individual sections. It will also help users with assistive technology navigate.

  • Screen reader users will often skip through content via headings
  • Honor heading order
  • When you nest headings skipping levels should be avoided.
  • Don’t use multiple nested <h1>
  • Screen readers provide different ways of moving from one piece of content to another.
  • tota11y provides a nice way of checking if your outline is persistent. Another way is to disable CSS and check if the page is readable and the structure makes sense.

Use landmarks

It is possible and advised to mark up thematic sections with HTML5 (e.g. <main> <article>, <aside>, <nav>, <section>). One of the main benefits is that screen reader users will be able to navigate pages by jumping from section to section. These navigable sections are called landmarks.

  • Don't overuse sectioning elements
  • Use <div> for CSS/JS-only purposes and sections for semantics
  • You can simulate the feature of jumping from landmark to landmark with a browser extension called Landmarks
  • You can also use ARIA role attributes for older browsers or sections that don't have an explicit tag like search
  • <header> and <footer> behave in all major browsers like landmarks if they are not nested in a <section> or <article> element. (old browsers - use role attribute with the values banner for the header and contentinfo for the footer)

Use the <main> landmark

By wrapping the main content of your site in a <main> element you give some screen users the ability to jump directly to your main content using a shortcut.

  • Represents the main content section
  • Must not be used more than once

Use <fieldset>

Use this element to associate multiple related form elements together with their label.

<form>
  <fieldset>
    <legend>T-Shirt size</legend>
    <input type="radio" id="s" name="shirtsize" />
    <label for="s">S</label>  
    <input type="radio" id="m" name="shirtsize" />
    <label for="m">M</label>
  </fieldset>
</form>

Links

  • Write descriptive links, not "click here"
  • Use improved underline method for links for readability (p59 Inclusive Design Patterns)

Videos

  • Implement captions and subtitles (supported in <video>) or videos are useless for a portion of users.
  • Make sure your video and its controls are keyboard navigable (same goes for audio elements)

Images

If an image is used as content, apply the alt attribute to describe the images content and function succinctly.

  • Don't start with "Picture/Image/Graphic of...", because the screen reader does that
  • If the image is purely decorative or doesn’t add valuable information, don’t remove the alt attribute, but leave it empty. Omitting this attribute altogether indicates that the image is a key part of the content, and no textual equivalent is available. Setting this attribute to an empty string (alt=””) indicates that this image is not a key part of the content and that non-visual browsers may omit it from rendering.

SVG

Since SVG is a markup language, it can be made accessible relatively easily.

  • Include a title with <title> tag. Can think of it like an ALT tag in this context.
  • Optionally include a description with the <desc> tag - has some support issues
  • Include ARIA attributes to the <svg> tag to support these - aria-labelledby="title" and aria-describedby="desc"
  • If text is in the SVG then use text. Don't convert the text to a shape.
  • Make the SVG focusable
  • Add role="img" to the <svg> tag

Fonts and Text

  • Don't block rendering of text to wait for your cool font
  • Don't disable zoom on the page
  • Use % based font on <html> and rem units from then on or else the text size will stay fixed with zooming
  • You can also take advantage of using vh units to scale text responsively (but use with a calc like calc(1em + 1vh))
  • Use line-height: 1.5
  • Consider loading font in separate stylesheet
  • WCAG Guidelines recommend contrast ratios of 4.5 for small text or 3 for large text. Useful tool: Colorsafe

Hide unhelpful content

If you want to hide content visually and from screen readers, use the hidden attribute.

Browser support for the hidden attribute is very good, except for IE 10 and lower. You can provide support for older browsers if you add this fallback to your CSS.

You can provide support for older browsers (< ie10) if you add this fallback to your CSS.

[hidden] {
   display: none;
}

Making non-focusable elements focusable

It’s possible to make non-focusable elements focusable by adding the tabindex attribute with an integer value.

  • If the value is set to 0 the element becomes focusable and reachable via keyboard
  • If the value is a negative number, the element is focusable (e.g. with JS) as well, but not reachable via keyboard
  • Greater than 0 changes the natural tab order and is considered an anti-pattern - avoid it
  • If a popup opens, you'll need to manually focus it with JS or it will not be next in the tab order and...
  • ...refocus the original element that opened the popup when it is closed

CSS

  • Use non-blocking stylesheets
  • Consider loading font in separate stylesheet
  • Avoid areas of similar contrast
  • Too much colour contrast is also a bad thing

Dynamic Content

Screen reader users must be informed when content changes dynamically. If content is loaded dynamically and inserted into the DOM, only sighted users will be aware of the changes.

Useful Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment