Straightforward Accessibility

Estelle Weyl

http://instartlogic.github.io/p/oscon/prescriptions.html

Prescriptions

Image Optimization

GZip
GZip works best for text-based content, while providing little to no byte shrinkage on previously-compressed assets. SVG is a text-based image format. Minifying and GZipping SVG image and font files can greatly reduce their SVG file size. Minify first. Then Gzip.
Remove Image Metadata
Cameras and software often add metadata to images that is not seen by the web user. This metadata can actually be a security risk by exposing geographical data. There’s free software that will strip EXIF metadata from multiple images at a time.
Resize Images
Serve the smallest image file for the screen size and resolution.
Optimize Images
Serve the smallest image size for the screen size and resolution. Images, no matter the size, should be compressed as much as possible without noticeably degrading the quality. Image compression programs include ImageOptim and ImageAlpha for pngs. Can be automated with machine learning with SmartVision.
Use the Right Image Format
Image types include SVG, GIF, JPEG, PNG, and WebP.
  • GIF: Palette of less than 256 colors, like a comic, for transparency and for low quality animation
  • SVG: Better than GIFS: Scalable, Animatable, unlimited color pallette
  • PNG: When you need transparency and have more than 256 colors.
  • JPEG: raster images
  • JPEG with a CSS mask: when you need transparency on a raster image and PNG-24 file size is huge
  • WebP: Animation, transparency, and great resolution with small file size, but only supported in Blink. Test WebP
  • JPEG-XR: For Edge
Reduce the Number of Images
Reduce HTTP requests with sprites. Also, consider reducing actual number of images your page requires: is your image worth 1,000 words or does your site work better without it?
Leverage CSS
Leverage CSS to reduce image size and number of images:
  • Image Masking: use image masking when you need a “transparent JPEG” without PNG-24 file size
  • CSS Effects: gradients, borders, outlines, rounded corners, shadows, etc. Create resolution-independent effects with minifiable & gZippable text
  • Sprites: until HTTP/2 is fully supported use image sprites and background-position to reduce number of requests
  • Animation: when animating GIFs, consider CSS animation using the steps() timing function and sprites as an alternative
  • Filters: use CSS filter effects instead of multiple versions of the same image if you want filters applied: save bytes, HTTP requests and time
  • Media Queries: Use media queries to serve hi-res images to hi-res devices

Note: Include an alt attribute on all foreground images, with empty alt attribute for decorative images.

Image Optimization Tips

PageSpeed

Minimize request size
GZip all requests.
Leverage browser caching.
Include caching headers for all requests with a future date so previously fetched responses can be reused instead of refetched.
Specify a cache validator
Specify a Last-Modified or ETag header to enable cache validation. ETags provide revalidation tokens automatically sent by client to check if there are file changes since last requested.
Minify CSS, JS & HTML
Removing unnecessary whitespace saves bandwidth
Defer parsing of JavaScript
inlcude async attribute in your <script> tags so client can continue downloading assets instead of waiting as scripts are downloaded, parsed and excecuted.
Optimize images
Choose best format and compression on a per image basis include: type of data being encoded, image format capabilities, quality settings, resolution, and more. Leverage SVG and CSS. See previous page.
Specify a character set
Including a content-type header, such as Content-Type: text/html; charset=UTF-8 reduces browser processing. Can start parsing HTML immediately when it knows which character set it has.
Remove query strings from static resources
Resources with a "?" in the URL are not cached by some proxy caching servers
Specify a Vary: Accept-Encoding header
In case client doesn't support compression, tells proxy server to store both compressed and uncompressed versions.
Avoid CSS @import
Only starts downing imported file once encountered rather than in parallel.
Avoid a character set in the meta tag
Better to include it in HTTP Content-Type header (IE8 rule)
Avoid bad requests
404 and 410 errors waste time. If requests are for blocking resources, it becomes a more serious problem.
Avoid landing page redirects
If your site requires redirects, do them server-side not client side, to reduce round trip requests. Removing HTTP redirects removes extra round trips.
Combine images into CSS sprites
Enable Keep-Alive
HTTP persistent connections allows a TCP connection to send and receive multiple HTTP requests, reducing latency for subsequent requests.
Enable compression
GZip!
Inline Small CSS & JS
Minimize redirects
Minimizing redirects removes additional RTTs and wait time for users.
Optimize the order of styles and scripts
Prefer asynchronous resources
Many JS libraries and frameworks were originally written as synchronous scripts, but now have asynchronous versions. Use the asynchronous versions.
Put CSS in the document head
Serve resources from a consistent URL
Serve scaled images
Properly sized images saves bandwidth.
Specify image dimensions
Enables rendering page before images are downloaded. Without proper dimensions, browser will need to reflow and repaint upon image downloaded.
Page Speed

Usability Rules

Avoid plugins
Configure the viewport
Optimize pages to display well on mobile devices by including a meta viewport in the head of the document specifying width=device-width, initial-scale=1. 
<meta name=viewport content="width=device-width, initial-scale=1">
Size content to viewport
Scrolling websites vertically is Okay, but horizontally creates poor user experience. Use media queries and vh, vw and percents for width.
Size tap targets appropriately
Set a minimum tap target size of of 48 CSS pixels on a site with a properly-set mobile viewport. Make important tap targets large enough to be easy to press, ensuring there is extra spacing between smaller tap targets.
Use legible font sizes
Page Speed Insights

Configure Viewport

Viewport

<meta name="viewport"
  content="width=device-width,
     user-scalable=yes">
@viewport { viewport-properties }

Specifies:

  1. viewport size
  2. zoom factor
  3. orientation

Resource: A tale of 2 viewports
Tutorial: Media Queries slide deck

Don't be a jerk like GMail

<meta name="viewport" 
  content="initial-scale=1.0, 
           maximum-scale=1.0, 
           minimum-scale=1.0, 
           user-scalable=no, 
           width=device-width">
Gmail doesn't allow resizing

user-scalable=yes

<meta name="viewport"
  content="width=device-width, 
           user-scalable=yes,
           initial-scale=1">

Size content to viewport

  • Scrolling websites vertically, not horizontally
  • Use media queries
  • Use vh, vw and percents for width.

Target Size

Size tap targets appropriately

  • Minimum 48px
  • Larger if important
  • Space between targets
  • Extra space for small tap targets

WCAG 1.0 (1998)

  1. Provide equivalent alternatives to auditory and visual content
  2. Don’t rely on colour alone
  3. Use markup (HTML) and style sheets (CSS), and do so properly
  4. Clarify natural language usage
  5. Create tables that transform gracefully
  6. Ensure that pages featuring new technologies transform gracefully
  7. Ensure user control of time sensitive content changes
  8. Ensure direct accessibility of embedded user interfaces
  9. Design for device independence
  10. User interim solutions
  11. Use W3C technologies and guidelines
  12. Provide context and orientation information
  13. Provide clear navigation mechanisms
  14. Ensure that documents are clear and simple

WCAG 2.0 (2008)

Perceivable: Content & UI components

  1. Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  2. Time-based media: Provide alternatives for time-based media.
  3. Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
  4. Make it easier for users to see and hear content including separating foreground from background.

Operable: UI and Nav

  1. Make all functionality available from a keyboard.
  2. Provide users enough time to read and use content.
  3. Do not design content in a way that is known to cause seizures.
  4. Provide ways to help users navigate, find content, and determine where they are.

WCAG 2.0 (2008)

Understandable: Information and operation of UI

  1. Make text content readable and understandable.
  2. Make web pages appear and operate in predictable ways.
  3. Help users avoid and correct mistakes.

Robust: Content interprable by UAs, including AT.

  1. Maximize compatibility with current and future user agents, including assistive technologies.

Accessible Design Rules

  1. Plan Heading Structure Early
    Ensure all content and design fits into a logical heading structure.
  2. Consider Reading Order
    The reading order should be the same as the visual order.
  3. Provide Good Contrast
    Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with a color contrast checker.
  4. Use True Text Whenever Possible
    True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.
  5. Watch the Use of CAPS
    All caps can be difficult to read and can be read incorrectly by screen readers.

Accessible Design Rules (2)

  1. Use Adequate Font Size
    Font size can vary based on the font chosen, but 10 point is usually a minimum.
  2. Remember Line Length
    Don't make it too long or too short.
  3. Make Sure Links are Recognizable
    Differentiate links in the body of the page with underlines or something other than color alone.
  4. Design Link Focus Indicators
    Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.
  5. Design a "Skip to Main Content" Link
    A link for keyboard users to skip navigation should be at the top of the page. It can be hidden, but should be visible when it receives keyboard focus.

Skip link

<a href="#maincontent" class="skiplink">Skip to main content</a>
.skiplink {
  opacity: 0;
}
.skiplink:focus {
  opacity: 1;
}
.skiplink {
  transform: scale(0);
  display: inline-block;
}
.skiplink:focus {
  transform: scale(1);
}

Accessible Design Rules (2)

  1. Ensure Link Text Makes Sense on Its Own
    Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing.
  2. Motion and sound: Use Animation, Video, and Audio Carefully
    If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.
  3. Don't Rely on Color Alone
    Because users often can't distinguish or may override page colors, color cannot be the only way information is conveyed.
  4. Design Accessible Form Controls
    Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.
    5. Get Poster

Issues

Next

Estelle Weyl

www.standardista.com
www.instartlogic.com/blog

@webdevtips
@estellevw
@standardista