{"id":1259,"date":"2011-02-21T23:46:56","date_gmt":"2011-02-22T04:46:56","guid":{"rendered":"http:\/\/mattclare.ca\/blog\/?p=1259"},"modified":"2011-02-21T23:46:56","modified_gmt":"2011-02-22T04:46:56","slug":"what-to-look-for-when-trying-to-author-accessible-content-my-list","status":"publish","type":"post","link":"https:\/\/mattclare.ca\/blog\/2011\/02\/21\/what-to-look-for-when-trying-to-author-accessible-content-my-list\/","title":{"rendered":"What to Look for when Trying to Author Accessible Content: My List"},"content":{"rendered":"<p><a href=\"http:\/\/mattclare.ca\/blog\/wp-content\/uploads\/2011\/02\/A-Checklist-for-Preparing-Accessible-Content-html.png\"><img loading=\"lazy\" src=\"http:\/\/mattclare.ca\/blog\/wp-content\/uploads\/2011\/02\/A-Checklist-for-Preparing-Accessible-Content-html-300x280.png\" alt=\"A picture of the HTML source of this blog post.\" title=\"A Checklist for Preparing Accessible Content, html source\" width=\"300\" height=\"280\" class=\"alignright size-medium wp-image-1271\" srcset=\"https:\/\/mattclare.ca\/blog\/wp-content\/uploads\/2011\/02\/A-Checklist-for-Preparing-Accessible-Content-html-300x280.png 300w, https:\/\/mattclare.ca\/blog\/wp-content\/uploads\/2011\/02\/A-Checklist-for-Preparing-Accessible-Content-html.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>I&#8217;ve assembled my list of things to look for when preparing content for the web with an eye to accessibility.  I would like to add to this advice that I&#8217;ve always found that accessible web pages are the easiest way to create content that is well indexed by a search engine &#8211; as both serve the goal of helping a machine interpret the content better.<\/p>\n<p>This list is written assuming that most modern tools that help construct content directly for the web help individuals create accessible content by default, and that this is the primary way content makes its way to the web.  Tools like WordPress for blogs, or Learning Management Systems (LMSs).<\/p>\n<p>Multimedia content is particularly challenging, as it can require the use multiple senses, and unless accommodations such as transcription or description are added, some individuals may not be able to access multimedia content.<\/p>\n<p>Evan more than with most posts; I&#8217;d love to read your comments and suggestions about this list and these practices.<\/p>\n<h3>My Checklist for Preparing Accessible Content<\/h3>\n<p>This list was created by Matt Clare with resources from World Wide Web Consortium. <sup id=\"_ref-0\" class=\"reference\"><a href=\"#_note-0\" title=\"\">[1]<\/a><\/sup>  The W3C has a simular checklist document: <a href=\"http:\/\/www.w3.org\/TR\/2006\/WD-WCAG20-20060427\/appendixB.html\" class=\"external free\" title=\"http:\/\/www.w3.org\/TR\/2006\/WD-WCAG20-20060427\/appendixB.html\">http:\/\/www.w3.org\/TR\/2006\/WD-WCAG20-20060427\/appendixB.html<\/a> <sup id=\"_ref-1\" class=\"reference\"><a href=\"#_note-1\" title=\"\">[2]<\/a><\/sup><\/p>\n<p><a name=\"Simple_Formatting\"><\/a><\/p>\n<h4>Simple Formatting<\/h4>\n<ul>\n<li> Divide large blocks of information into smaller blocks when possible.  This is both technical advice and advice for writing content that is likely to be skimmed by readers.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#qr-navigation-mechanisms-descriptive\" class=\"external text\" title=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#qr-navigation-mechanisms-descriptive\">Headings for documents, or sub-sections should use pre-defined heading options<\/a>.  They should not be regular text made larger, bolder, etc.  The pre-defined headings help assistive software present content.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#pdlinkcontextdef\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#pdlinkcontextdef\">When creating a table be sure to identify what cells are headers and what are actual data<\/a>.\n<\/li>\n<li> <b>Never<\/b> use a table for layout purposes alone.\n<\/li>\n<li> Use the existing quotation mark-up for quotations if possible,  <b>Never<\/b> use the blockquote option for layout purposes alone.\n<\/li>\n<li>  <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#pdlinkcontextdef\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#pdlinkcontextdef\">When creating a list use the number of bulleted list options, DO NOT crete your own bullets<\/a>.  There are ways to insert your own bullets into a proper unordered list, or hide the bullets.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast-without-color\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast-without-color\">Ensure that all information conveyed with colour is also available without color<\/a>.  For example by bolding coloured text as well.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#qr-navigation-mechanisms-link\" class=\"external text\" title=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#qr-navigation-mechanisms-link\">Make linked text meaningfull<\/a>.\n<ul>\n<li> Example1: Option one would make much more sense when a screen reader were to read aloud all the links on a page rather than option two:\n<ol>\n<li> Read the <a href=\"http:\/\/kumu.brocku.ca\/sakai\/Creating_Accessible_Content\" class=\"external text\" title=\"http:\/\/kumu.brocku.ca\/sakai\/Creating_Accessible_Content\">Creating Accessible Content Wiki Article<\/a>.\n<\/li>\n<li> Creating Accessible Content Wiki Article <a href=\"http:\/\/kumu.brocku.ca\/sakai\/Creating_Accessible_Content\" class=\"external text\" title=\"http:\/\/kumu.brocku.ca\/sakai\/Creating_Accessible_Content\">Click here<\/a>.\n<\/li>\n<\/ol>\n<\/li>\n<li> Example 2: Consider where in an alphabetical list of links these two links would appear:\n<ol>\n<li> Important article <a href=\"https:\/\/kumu.brocku.ca\/sakai\/index.php?title=Special:PdfPrint&amp;page=Creating_Accessible_Content\" class=\"external text\" title=\"https:\/\/kumu.brocku.ca\/sakai\/index.php?title=Special:PdfPrint&amp;page=Creating_Accessible_Content\">[PDF]<\/a>\n<\/li>\n<li><a href=\"https:\/\/kumu.brocku.ca\/sakai\/index.php?title=Special:PdfPrint&amp;page=Creating_Accessible_Content\" class=\"external text\" title=\"https:\/\/kumu.brocku.ca\/sakai\/index.php?title=Special:PdfPrint&amp;page=Creating_Accessible_Content\">Important article PDF<\/a>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#contrast-ratiodef\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#contrast-ratiodef\">Maintain a high level of colour contrast<\/a>, be mindful of background colours.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#seizure\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#seizure\">Avoid, blinking, flickering or excessive motion<\/a>.\n<\/li>\n<\/ul>\n<p><a name=\"Alternative_Information.2FFormats\"><\/a><\/p>\n<h4>Alternative Information\/Formats<\/h4>\n<p>Programatic access to information is the only guarantee that the highest level of access can be achieved.   This is best achieved through providing information in the simplest text-based format without extraneous items.<\/p>\n<ul>\n<li> Images should be given a meaningful text description if the image is relevant to the content.  If the image is decorative or otherwise irrelevant the description information should be left blank.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\">Avoid Images of text<\/a>.  If an image is presented containing text the text or a description should be provided in an alternative format.  Text not in an image is far more transformable and scaleable than anything represented in an image.\n<\/li>\n<li> Audio and video content should have an alternative textual version provided.\n<\/li>\n<\/ul>\n<p><a name=\"Advanced.2FTechnical_Formatting_Issues\"><\/a><\/p>\n<h4>Advanced\/Technical Formatting Issues<\/h4>\n<p>Information for more advanced formatting or for situations where an individual is creating their own <a href=\"\/sakai\/HTML\" title=\"HTML\">HTML<\/a> and is not using a WYSIWYG editor. <\/p>\n<ul>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/2010\/NOTE-WCAG20-TECHS-20101014\/G115\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/2010\/NOTE-WCAG20-TECHS-20101014\/G115\">Make sure your mark-up is valid syntactically meaningful<\/a>.  Most creation tool ensure this, but validation can be tested for public on-line content at <a href=\"http:\/\/validator.w3.org\" class=\"external free\" title=\"http:\/\/validator.w3.org\">http:\/\/validator.w3.org<\/a>\n<\/li>\n<li> Avoid the use of frames.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/2010\/NOTE-WCAG20-TECHS-20101014\/C18\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/2010\/NOTE-WCAG20-TECHS-20101014\/C18\">Don&#8217;t use images as spacers or for other purely layout proposes<\/a>.\n<\/li>\n<li>Content that you don&#8217;t want to be seen, but read by a reader, should be positioned as CSS absolute: ie style=&#8221;position: absolute;left:-2000;&#8221;- left and a whole bunch of negative &#8212; not style=&#8221;display:none&#8221; because screen readers are wise to this.<\/li>\n<li> Make sure content degrades gracefully:\n<ul>\n<li> Ensure that pages are usable when scripts etc. are off and provide equivalent information on an alternative accessible page if appropriate.\n<\/li>\n<li> <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#structuredef\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/WCAG20\/#structuredef\">Organize documents so they may be read without style sheets<\/a>.\n<\/li>\n<li> Make your HTML syntactically meaningful and not dependent on any one browser.\n<\/li>\n<\/ul>\n<\/li>\n<li>Ensure that equivalents for dynamic content are updated when the dynamic content changes.  With AJAX\/DHTML\/JavaScript keep in mind how a screen reader may ready the content.  Keep in mind the idea of links with title properties offering to skip to a later anchor, or better yet review WAI-ARIA roles, state and focus information in the W3C Candidate Recommendation <a href=\"http:\/\/www.w3.org\/TR\/wai-aria\/\" class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/wai-aria\/\">Accessible Rich Internet Applications (WAI-ARIA)<\/a> <sup id=\"_ref-2\" class=\"reference\"><a href=\"#_note-2\" title=\"\">[3]<\/a><\/sup>\n<ul>\n<li>Example best practices: When you load a dynamic content element via jquery to make a screen reader see it do a $(&#8220;my_thing&#8221;).focus();<\/li>\n<li>Do not append() to the end of the body and then reposition via CSS &#8211; just append it to the actual item\/div<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a name=\"Checking_the_Accessibility_of_Content\"><\/a><\/p>\n<h3>Checking the Accessibility of Content<\/h3>\n<p>While it is hard to replace the insights an individual that uses assistive tools to access the web can offer one can use assistive software ones self to gain insight.  Some assistive software is very expensive, however what follows are a list of <a href=\"http:\/\/support.mozilla.com\/en-US\/kb\/Using%20extensions%20with%20Firefox#w_what-are-extensions\" class=\"external text\" title=\"http:\/\/support.mozilla.com\/en-US\/kb\/Using%20extensions%20with%20Firefox#w_what-are-extensions\">Firefox extensions<\/a> that are very useful for assessing the accessibility of web content.  Remember, an automated report can never replace a proper inspection of web content.<br \/>\n<a name=\"Firefox_Extensions\"><\/a><\/p>\n<h4>Firefox Extensions<\/h4>\n<ul>\n<li> <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/accessibility-evaluation-toolb\/Accessibility\" class=\"external text\" title=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/accessibility-evaluation-toolb\/Accessibility\">Evaluation Toolbar<\/a>\n<\/li>\n<li> <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/fangs-screen-reader-emulator\/\" class=\"external text\" title=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/fangs-screen-reader-emulator\/\">Fangs Screen Reader Emulator<\/a>\n<\/li>\n<li> <a href=\"http:\/\/chrispederick.com\/work\/web-developer\/\" class=\"external text\" title=\"http:\/\/chrispederick.com\/work\/web-developer\/\">Web Developer<\/a>\n<\/li>\n<\/ul>\n<h3>Notes and References<\/h3>\n<ol class=\"references\">\n<li id=\"_note-0\"><a href=\"#_ref-0\" title=\"\">\u00c3\u00a2\u00e2\u20ac\u00a0\u00e2\u20ac\u02dc<\/a> Chisholm, Wendy Trace R &amp; D Center, University of Wisconsin &#8212; Madison, Vanderheiden, Gregg, Trace R &amp; D Center, University of Wisconsin &#8212; Madison, Jacobs, Ian, W3C<br \/>\n(1999) List of Checkpoints for Web Content Accessibility Guidelines 1.0.  <i>World Wide Web Consortium.<\/i> Retrieved 19:44, February 18, 2011, from <a href=\"http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html\" class=\"external free\" title=\"http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html\">http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html<\/a>.  Copyright held by W3C, 1999<\/li>\n<li id=\"_note-1\"><a href=\"#_ref-1\" title=\"\">\u00c3\u00a2\u00e2\u20ac\u00a0\u00e2\u20ac\u02dc<\/a> Caldwell, Ben, Trace Research &amp; Development Center, University of Wisconsin-Madison &#8212; Chisholm, Wendy, W3C &#8212; Slatin, John, Accessibility Institute, University of Texas at Austin &#8212; Vanderheiden, Gregg, Trace Research &amp; Development Center, University of Wisconsin-Madison (2006) Web Content Accessibility Guidelines 2.0, W3C Working Draft 27 April 2006.  <i>World Wide Web Consortium.<\/i> Retrieved 19:41, February 21, 2011, from <a href=\"http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html\" class=\"external free\" title=\"http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html\">http:\/\/www.w3.org\/TR\/WCAG10\/checkpoint-list.html<\/a>.  Copyright held by W3C, 2006<\/li>\n<li id=\"_note-2\"><a href=\"#_ref-2\" title=\"\">\u00c3\u00a2\u00e2\u20ac\u00a0\u00e2\u20ac\u02dc<\/a> Craig, James, Apple Inc. &#8212; Cooper, Michael, W3C (2011) Accessible Rich Internet Applications (WAI-ARIA) 1.0, W3C Candidate Recommendation 18 January 2011.  <i>World Wide Web Consortium.<\/i> Retrieved 19:48, February 21, 2011, from <a href=\"http:\/\/www.w3.org\/TR\/wai-aria\/\" class=\"external free\" title=\"http:\/\/www.w3.org\/TR\/wai-aria\/\">http:\/\/www.w3.org\/TR\/wai-aria\/<\/a> .  Copyright held by W3C, 2011<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve assembled my list of things to look for when preparing content for the web with an eye to accessibility. I would like to add to this advice that I&#8217;ve always found that accessible web pages are the easiest way to create content that is well indexed by a search engine &#8211; as both serve&hellip; <a class=\"continue\" href=\"https:\/\/mattclare.ca\/blog\/2011\/02\/21\/what-to-look-for-when-trying-to-author-accessible-content-my-list\/\">Continue Reading<span> What to Look for when Trying to Author Accessible Content: My List<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[47,1,13,50,14,3,52],"tags":[],"_links":{"self":[{"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/posts\/1259"}],"collection":[{"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":7,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1281,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/posts\/1259\/revisions\/1281"}],"wp:attachment":[{"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mattclare.ca\/blog\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}