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

Easy Responsive Design: Thumbnail List

Create a list of thumbnail images that re-sizes according to screen width. Uses simple semantic HTML markup together with a bit of CSS3. Media queries can be used as a further enhancement to this technique.

Works with modern browsers including IE8+

HTML:

<ul class="thumbnail-list">
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
	<li><img src="http://placekitten.com/200/200" alt=""></li>
</ul>

CSS:

.thumbnail-list {
	/* remove default list styles */
	list-style: none;
	margin: 0;
	padding: 0;
	/* remove spaces between li tags*/
	font-size: 0;
}

.thumbnail-list li {
	display: inline-block;
	vertical-align: top;
	width: 33.333%;
	padding: 2%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.thumbnail-list img {
	display: block;
	width: 100%;
}

How it works

The first step to styling the unordered list (ul) is to remove default list styles. (If you are already including a CSS reset you can skip this part.) The thumbnail list items (li tags) which contain the images are lined up by displaying them as inline-blocks. Change the width to alter how many items line up in a row. Padding is used to space out the images. (This value can also be changed according to your preferences.) Finally, the CSS3 style “box-sizing” is set to “border-box” to prevent the padding from being added to the total width of the list items. (This allows the images to be spaced out evenly.)

Besides the CSS3 “border-box” style, the final key to making the design responsive is to set the image width to 100%. This ensures that the images always shrink and expand to occupy the full available width inside the li tags they are wrapped width. One disadvantage to making the width 100% is that the images can grow larger than the original sizes which may make them look pixelated. If you want to prevent this you can change “width” to “max-width”. This will still shrink images to fit smaller screens but will not expand them beyond their original size. (Setting the images to “display: block” just removes line-spacing so images will be evenly spaced vertically.)

Optional enhancement using Media Queries

Use media queries to change the number of thumbnails displayed in a row depending on screen orientation or width. Here’s an example of how you can customize the display to show more images in a row for the landscape view of mobile devices such as iPhone and Android.

Additional Optional CSS:

/* Landscape */
@media screen and (orientation:landscape) {
	/* show more in a row */
	.thumbnail-list li {
		width: 20%;
		padding: 2%;
	}
}

See it in action: http://www.webcodeshare.appspot.com/agx3ZWJjb2Rlc2hhcmVyDwsSB1dlYmNvZGUY0dwQDA

NOTE: This layout can actually be achieved without the CSS3 “border-box” style by using margins instead of padding to space apart list items and changing the value of the width + margin to equal the total space you want each item to occupy. For example to display 4 images in a row you would use: “width: 23%; margin: 1%;” which equals 25% in total since the margin gets added to both sides of the li tag.

CAVEAT: If you want to include text inside the li tags remember to set the font-size of the li to your desired value as by default it will inherit “font-size: 0” from the ul styles.

Cross-browser CSS: Justified Block List

A cross-browser method using semantic markup and CSS to align list items horizontally and space them evenly so they are distributed across the full available width. Useful for laying out lists of thumbnail images or navigation links for example.

Tested in IE6, IE7, IE8, FF, Safari, Chrome

Fixed Width Content Using This Method:

Variable Width Content:

HTML:

<ul class="block-list">
     <li>Content</li>
     <li>Content</li>
<li>Content</li></ul>

CSS:

/* set base font-size (customize to suit) */
body, .block-list li {font-size: 12px;}

/* trigger hasLayout in IE */
.block-list, .block-list li {zoom: 1;}

.block-list {
	font-size: 0 !important; /* remove physical spaces between items */
	text-align: justify;
	text-justify: distribute-all-lines; /* distribute items in IE */
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* fully justify all items in browsers other than IE */
.block-list:after {
	content: "";
	display: inline-block;
	width: 100%;
}

.block-list li {
	text-align: left; /* customize to suit */
	vertical-align: top; /* can customize to suit */
	display: inline-block;
	width: 31.3%; /* optional, only need for text content to wrap */
	margin-bottom: 1em; /* optional, customize to suit */
}

/* IE hacks to make li's line up */
*+html .block-list li {display: inline;}
* html .block-list li {display: inline;}

IMPORTANT:
There must be no space between the last li tag and the closing ul tag in your HTML markup. This is to fix a bug in Safari so it won’t add extra space after the last list item.