{"id":128,"date":"2017-08-02T10:18:42","date_gmt":"2017-08-02T10:18:42","guid":{"rendered":"https:\/\/blog.phplist.com\/?p=128"},"modified":"2017-08-02T10:21:16","modified_gmt":"2017-08-02T10:21:16","slug":"accessible-phplist-section-508-and-255-government-standards","status":"publish","type":"post","link":"https:\/\/www.phplist.com\/blog\/accessible-phplist-section-508-and-255-government-standards\/","title":{"rendered":"Accessible phpList: Section 508 and 255 Government standards"},"content":{"rendered":"<p>In the USA, technology procured by federal organisations is required to meet the guidelines in <a title=\"Section 508\" href=\"https:\/\/www.section508.gov\/content\/learn\/laws-and-policies\" target=\"_blank\">Section 508<\/a> of the Rehabilitation Act and <a title=\"Section 255\" href=\"https:\/\/www.fcc.gov\/general\/section-255-disability-rights-office\" target=\"_blank\">Section 255<\/a> of the Communications Act. These guidelines are designed to ensure that citizens and federal employees who have physical, sensory, or cognitive disabilities can access information comparably to those who do not have disabilities.<\/p>\n<p>Email newsletters and announcements, sent using software like phpList, are a popular method for federal agencies to communicate directly with citizens. It is important that these emails meet accessibility guidelines. This guide demonstrates how to provide a newsletter or email marketing service to mailing list subscribers in compliance with Section 508 guidelines.<\/p>\n<p>Subscribers interact with phpList in two ways: by receiving and engaging with email campaign messages, and by managing their mailing list subscription and preferences via phpList web pages. The following sections address each of these in turn.<\/p>\n<h2>Introduction<\/h2>\n<p>Four\u00a0critical aspects of section 508 are \u00a71194.22 (a) (c), (d), (k) and (n). These provisions require that:<\/p>\n<ol>\n<li>A text equivalent for every non-text element shall be provided.<\/li>\n<li>Any colour based prompts are also provided as black and white indicators.<\/li>\n<li>Documents shall be organised so they are readable without requiring an associated style sheet.<\/li>\n<li>A plain text version of your information be available, in this case, your email.<\/li>\n<li>Input boxes are identifiable with screen readers, for example by being placed in a table.<\/li>\n<\/ol>\n<h2>Accessibility built in<\/h2>\n<h3>Indicating mandatory field with an asterisk<\/h3>\n<p>phpList indicates mandatory form fields using red text and asterisks. This means that a subscriber with visual impairments can determine which fields on the subscribe page are mandatory without reliance on colour.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/black-and-white-indicators.png\" rel=\"attachment wp-att-138\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-138\" alt=\"black-and-white-indicators\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/black-and-white-indicators.png\" width=\"450\" height=\"450\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/black-and-white-indicators.png 450w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/black-and-white-indicators-150x150.png 150w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/black-and-white-indicators-300x300.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<h3>Using a subscribe page with the style sheet disabled<\/h3>\n<p>Additionally, phpList subscribe pages work when both style sheets (CSS) and javascript are turned off. While this page may look a little spartan, this can be much easier to use for those with visual impairments. It\u00a0can also be navigated with keystrokes\u00a0only, and so does not require the use of a mouse.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text.png\" rel=\"attachment wp-att-139\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-139\" alt=\"plain-text\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text.png\" width=\"483\" height=\"570\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text.png 483w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-254x300.png 254w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/a><\/p>\n<h3>Labels and input boxes organised in tables<\/h3>\n<p>The subscribe from is inside a table, which means that it is clearer to a screen-reader, which are\u00a0used by blind or visually impaired subscribers, which title belongs which which input box.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/table.png\" rel=\"attachment wp-att-140\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-140\" alt=\"table\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/table.png\" width=\"470\" height=\"166\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/table.png 703w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/table-300x106.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<h2>Important settings<\/h2>\n<p>When setting up your subscribe form you can use the option to offer a checkbox or radio button for a text only version of your campaign. This text only version will then be automatically generated and sent to those who have requested it.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/check-box-text.png\" rel=\"attachment wp-att-141\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-141\" alt=\"check-box-text\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/check-box-text.png\" width=\"424\" height=\"247\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/check-box-text.png 424w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/check-box-text-300x175.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/a><\/p>\n<h3>Sending a plain text version of your campaigns<\/h3>\n<p>In phpList you automatically generate and edit\u00a0a plain text version of each campaign. Most of your subscribers will want the HTML version, this contains images, headings, fonts and colours, which you can design in the campaign editor.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-version-2.png\" rel=\"attachment wp-att-157\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-157\" alt=\"html-version\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-version-2.png\" width=\"470\" height=\"384\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-version-2.png 631w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-version-2-300x245.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<p>On the second tab in the campaign creator you can generate and edit the plain text version.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-version-1.png\" rel=\"attachment wp-att-158\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-158\" alt=\"plain-text-version\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-version-1.png\" width=\"470\" height=\"335\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-version-1.png 707w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-version-1-300x214.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<p>If a subscriber has indicated that they wish to receive plain text messages by using the checkbox\u00a0on the Subscribe page, they will receive a message without HTML. In this example it would look like this:<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-email-2.png\" rel=\"attachment wp-att-155\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-155\" alt=\"plain-text-email-2\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-email-2.png\" width=\"470\" height=\"233\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-email-2.png 534w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/plain-text-email-2-300x149.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<p>All other subscribers would get the HTML version. In this example it would look like this:<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-email-1.png\" rel=\"attachment wp-att-159\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-159\" alt=\"html-email\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-email-1.png\" width=\"470\" height=\"385\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-email-1.png 644w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/html-email-1-300x246.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<h3>Adding an descriptive text to images<\/h3>\n<p>When composing a campaign in phpList it&#8217;s easy to meet the requirement for including descriptive &#8220;alternative&#8221; text for images. Doing so represents images textually for people who cannot see them. When you insert an image into campaign content simply include the description in the &#8220;Alternative Text&#8221;. This will insert an HTML &#8216;alt=&#8217; attribute into the code of the message.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-1.png\" rel=\"attachment wp-att-161\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-161\" alt=\"alt-txt-1\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-1.png\" width=\"462\" height=\"233\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-1.png 462w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-1-300x151.png 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/p>\n<p>Image descriptions will then be displayed by screenreader and accessibility software, and will also be displayed if images are blocked by the subscriber&#8217;s mail client.<\/p>\n<p><a href=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-2.png\" rel=\"attachment wp-att-160\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-160\" alt=\"alt-txt-2\" src=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-2.png\" width=\"470\" height=\"195\" srcset=\"https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-2.png 546w, https:\/\/www.phplist.com\/blog\/wp-content\/uploads\/2016\/10\/alt-txt-2-300x124.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>By using a combination of phpList&#8217;s built-in accessibility features, and careful content crafting, you can reach a broader range or subscribers in ways they can enjoy. A broad range of public institutions in the USA rely on phpList to meet federal accessibility standards &#8212; you can too. Whether your organisation seeks to be accessible by choice or by obligation, it&#8217;s easy with phpList!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the USA, technology procured by federal organisations is required to meet the guidelines in Section 508 of the Rehabilitation Act and Section 255 of the Communications Act. These guidelines are designed to ensure that citizens and federal employees who have physical, sensory, or cognitive disabilities can access information comparably to those who do not [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4,2],"tags":[31,72,33,32],"class_list":["post-128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-phplist-com-user-news","category-self-hosted-user-news","tag-accessibility","tag-plain-text","tag-section-255","tag-section-508"],"_links":{"self":[{"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/comments?post=128"}],"version-history":[{"count":17,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":372,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/posts\/128\/revisions\/372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/media\/139"}],"wp:attachment":[{"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/media?parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/categories?post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phplist.com\/blog\/wp-json\/wp\/v2\/tags?post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}