Web Accessibility 101

An actionable list of basic steps you can take to make your web site more accessible.

  1. Use proper semantic HTML markup:
  2. Include text for all meaningful visual elements.
    • All images should have “alt” tags:
        • Alt text should be meaningful and useful.
            • DO:
              <img src="acme-logo.png" alt="Acme">
            • DO NOT:
              <img src="acme-logo.png" alt="Company Logo">
        • If the image is redundant or primarily decorative, leave alt value empty:
          <img src="pretty.png" alt="">
    • Use image replacement techniques to include text inside tags for icons, etc. or else use an aria-label attribute to label the element.
  3. Ensure text and background colors are AA compliant. (includes meaningful visual elements such as icons)
    Test tool: http://accessible-colors.com/

    • text: minimum contrast: 4.5:1
    • “large” 18 point or 14 point bold text: 3.1
  4. Make forms accessible.
    • Use label tags properly.
    • Use either fieldset and legend tags for groups of inputs, such as radio inputs or use ARIA and role attributes.
  5. Use aria landmark roles for main areas of page content.
    If you use semantic markup, the need for some of these is lessened.
    See: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
    See also: http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

    • Useful:
      • role=”banner” (Use on main page header of site. Only one per page.)
      • role=”contentinfo” (Use on main page footer. Only one per page.)
      • role=”search” (Use on search forms.)
    • Not needed with semantic markup:
      • role=”form” (Not needed if you use a “form” tag.)
      • role=”complementary” (Not needed if you use “aside” tag)
      • role=”main” (Not needed if you use “main” tag. Only one per page.)
      • role=”navigation” (Not needed if you use “nav” tag.)
Advertisements

Scaling CSS for Large Web Sites

This is a PowerPoint presentation for a talk I gave to Fandor as an outside CSS expert at the invitation of their senior product manager. It summarizes recommendations for methodologies and tools useful in writing, organizing and maintaining CSS code. (Fandor afterwards ended up implementing several of my recommendations.)

Scaling CSS for Large Web Sites

Facebook Tab Design Best Practices

Text/Fonts

Use Browser rendered text whenever possible rather than image-based text.

Advantages to browser-rendered text:

  • Text is easier to edit and update.
  • Increases usability: users can increase text size if needed, etc. to make it easier for them to read.
  • Can improve search engine accessibility.

Browser-safe fonts:

See this site for a comprehensive list of fonts common to both Windows and Mac users:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Facebook’s default fonts:

Lucida Grande, Tahoma, Verdana, Arial, sans-serif
Default font size: 13 pixels

Note: “Lucida Grande” is installed on most Macs but few Windows users have it so they will likely see Tahoma instead.

Font sizes:

For best readability, main body copy should generally be at least 12 pixels or larger. 10 pixels can be acceptable for less important text like copyright info but it’s preferable to keep all text sizes at 10px+.

Tab/App Content Dimensions

Facebook re-designed Fan Page tabs some time ago to be 520 pixels wide (reduced from previous 760 pixels wide). The 520 pixel width includes all content appearing within a tab so for example if your design includes content inside a box with a drop shadow, the drop shadow needs to fit within the 520 pixel page width.

Place important content “above the fold”

Avoid making users have to scroll too much to see content you want to highlight. Measuring from the top of the Tab canvas area, your most important content should ideally fit within about the first 430 pixels in height.

Don’t re-create your Web site

In general, it’s best to keep Tab designs relatively short and simple with clear calls to action. Avoid creating mini web sites with multiple sub-pages within one tab or extra long designs that require users to scroll too much to view all content. Facebook users can have short attention spans so focus designs on the information or functionality you most want them to see and use.

Web Image Formats and Optimization

Summary of Web Image Types and Appropriate Uses:
(adapted in part from http://yuiblog.com/blog/2008/11/04/imageopt-2/)

  • JPG is the format for photos and full color images with lots of gradients. (JPG file sizes are smaller than PNG24)
  • GIF is the format for animations.
  • PNG8 is the format for everything else — icons, buttons, backgrounds, etc. (size usually smaller than GIF, supports alpha transparency, Fireworks can output variable transparency)
  • PNG24 is the format for full color images with transparency (largest file sizes, requires filter hack for IE6)

PNG8 = 256 indexed color PNGs. Newer versions of Photoshop (CS3) can output these using “Save for web”. Supports alpha transparency just like GIFs but generally results in smaller file sizes than GIFs. Fireworks can output PNG8 with variable transparency which degrades nicely to 100% transparency in IE6.

One slight problem with PNGs is they use gamma correction which can cause problems when colors in a PNG image need to match background colors (so colors will be slightly off in the PNG). This can be solved by using a program like pngcrush to strip the gamma chunk from the image (which reduces file size a bit more as well).

NOTE: When saving images from Photoshop always use “save for web”; results in greatly reduced file sizes than just saving normally.

EXTRA NOTE: Saving JPGs as “progressive” reduces file sizes further in 94% of cases for files over 10k (for under 10k baseline JPGs are generally smaller)