Accessibility https://atendesigngroup.com/ en Create better, more accessible content with the CKEditor Accessibility Checker https://atendesigngroup.com/articles/create-better-more-accessible-content-ckeditor-accessibility-checker <span>Create better, more accessible content with the CKEditor Accessibility Checker</span> <figure> <picture> <source srcset="/sites/default/files/2021-03/CK%20Editor%20Checker_0.jpg 1x" media="(min-width: 1860px)" type="image/jpeg"/> <source srcset="/sites/default/files/2021-03/CK%20Editor%20Checker_0.jpg 1x" media="(min-width: 1540px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_large/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=AzxYNwYK 1x" media="(min-width: 1265px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=XFmdbASf 1x" media="(min-width: 1024px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=XFmdbASf 1x" media="(min-width: 768px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=XFmdbASf 1x" media="(min-width: 600px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=MdQ_EsqD 1x" media="(min-width: 500px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-03/CK%20Editor%20Checker_0.jpg?itok=MdQ_EsqD 1x" media="(min-width: 0)" type="image/jpeg"/> <img src="/sites/default/files/2021-03/CK%20Editor%20Checker_0.jpg" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Tue, 03/30/2021 - 10:07</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/articles/authoring-experience" class="tag" >Authoring Experience</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p><a href="https://ckeditor.com/ckeditor-4/accessibility-checker/">CKEditor Accessibility Checker</a> helps content creators produce better web content. The accessibility checker provides a clean click-through interface for CKEditor 4 that prompts editors to improve content quality by using appropriate markup — think HTML headers instead of bolded text for section headings or HTML lists instead of asterisks for bullet points.</p> <p>Checkout the <a href="https://ckeditor.com/ckeditor-4/accessibility-checker/demo/">CKEditor Accessibility Checker demo</a>, then <a href="https://www.drupal.org/project/ckeditor_a11ychecker">download the Drupal 8 module</a> or visit the <a href="https://ckeditor.com/ckeditor-4/download/#accessibility-checker">Accessibility Checker download page</a> to find installation instructions for other platforms.</p> <h3>Accessible content is better content</h3> <p>Accessibility and inclusion on the web are huge and growing topics. With about <a href="https://webaim.org/intro/#people">one in four adults in the United States living with a disability</a>, implementing web accessibility standards plays a big role in reaching your entire audience and making sure your content isn’t excluding anyone. Publishing accessible web content boils down to following best practices in terms of HTML markup and content structure — best practices which pay dividends in other ways as well.</p> <p>Accessibility features like screen readers and keyboard navigation rely on <a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html">semantic markup</a> to function properly — that’s properly structured HTML tags around text and multimedia content that tell the web browser <i>what each element actually is</i>. The upshot is that <i>accessible web content</i> is <i>well structured web content</i>, too, which provides a lot of collateral benefits. Well structured semantic HTML is easier to style with CSS, can simplify content migrations, improve automated integrations (like making your content consumable via XML), and even enhance SEO. Accessible content is better content.</p> <h3>The weak link: user generated content</h3> <p>Even the most accessibility centric approach to web application design doesn’t guarantee accessible content. That’s because while your menus, color palettes, layouts and templates may all have been designed to meet or exceed accessibility standards, the articles, posts or other web content that your users and editors create play by a different set of rules.</p> <p>When users create web content they’re often empowered to make poor choices around accessibility and semantic markup by the very editors they’re using. Whether they’re working with WYSIWYG editors, writing HTML directly, or using one of hundreds of different tools for crafting multimedia content, it’s very possible that the final product isn’t accessible. Small, seemingly unimportant decisions like using the wrong elements or styles to format text or skipping “minor” details (like providing alternate text for images) can all add up to a virtual labyrinth for people using accessibility tools — and it can trip up automated interactions with your content like XML syndication or search engine indexing.</p> <p>Using the CKEditor Accessibility Checker is one giant step towards strengthening that weak link. With the accessibility checker your web editors can fix a wide array of problems before they hit the publish button: missing or insufficient alternative text for images, incorrect heading structure, links and / or headings that aren’t descriptive enough, poorly formatted tables, inaccessible links to PDFs and more. The CKEditor Accessibility Checker isn’t a magic pill solution for accessibility on the web, but it’s a huge step in the right direction that takes just minutes to set up.</p> <h3>Produce better content today</h3> <p>Take a look at the <a href="https://ckeditor.com/ckeditor-4/accessibility-checker/demo/">CKEditor Accessibility Checker demo</a> — you’ll see in just a couple of seconds how easy it can be to improve your web content. We’re thrilled to see the web community committing to accessibility more every day, and with our own <a href="https://atendesigngroup.com/about/edmund-dunn">Edmund Dunn</a> as a maintainer on the <a href="https://www.drupal.org/project/ckeditor_a11ychecker">Drupal 8 CKEditor Accessibility Checker module</a> we hope to help drive that commitment even further.</p> <p>What’s next for CKEditor Accessibility Checker &amp; Drupal? Look out for the new 8.x-2.0 version of the Drupal module, full compatibility with Drupal 9, and CKEditor Accessibility Checker in Drupal Core!</p> <!-- google doc id: 1jTkxOMKZKIgRkg4zep9WwWkEwHstiblt7QZsNJf5ZX8 --></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Tue, 30 Mar 2021 16:07:01 +0000 Michaela Blackham 10234 at https://atendesigngroup.com Building accessible menus for Indivisible.org https://atendesigngroup.com/articles/building-accessible-menus-indivisible <span>Building accessible menus for Indivisible.org</span> <figure> <picture> <source srcset="/sites/default/files/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=4hSQTVnJ 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=TmLgtbcb 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=TmLgtbcb 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=TmLgtbcb 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=pLJbC-FB 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png?itok=pLJbC-FB 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/2021-01/ATEN_INDIVISIBLE_ACCESSIBILITY.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/jennifer-dust" lang="" about="/user/jennifer-dust" typeof="schema:Person" property="schema:name" datatype="">jennifer</a></span> <span>Thu, 01/28/2021 - 13:30</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>When the team at <a href="https://indivisible.org/">Indivisible</a> decided to prioritize accessibility for their primary navigation late last year, I was excited to help them make it happen. Accessibility on the web has enjoyed increasing attention in the last few years, thanks to a widening recognition that users navigate and consume web content differently depending on what works best for them.</p> <p>The process began with an accessibility audit performed by <a href="https://atendesigngroup.com/about/michaela-blackham">Michaela Blackham</a>, our resident Accessibility and QA specialist. Michaela manually tested Indivisible.org for <i>keyboard navigability</i> — whether content and links can be accessed via the keyboard — which is a key indicator of how effectively other tools like screen readers will perform.</p> <p>Michaela also used discovery tools like <a href="https://wave.webaim.org/extension/">WAVE</a> (Web Accessibility Evaluation Tool) to further clarify opportunities for improvement. WAVE helps to clearly itemize shortcomings in the hierarchical structure of HTML elements, as well as missing or incorrect attributes in various markup tags that facilitate a browser’s native accessibility tools.</p> <p>With Michaela’s accessibility audit in hand, I was able to get to work addressing a few aspects of the top priorities we identified — mostly dealing with Indivisible’s primary navigation. Here’s what I focused on:</p> <ul> <li><b>Color contrast.</b> Some of the color schemes that Indivisible.org was using were a little low on contrast. Red text on a blue background, for example, while absolutely in line with the look and feel of the site, can be difficult to read for some. Re-thinking those color schemes — like by moving to white on blue for the <a href="https://indivisible.org/news"><i>In the News</i></a> page primary callouts — established a sharp and clear look without compromising the design. Other small changes like swapping out hero image background colors from white to black ensured the readability of white text in the foreground, even for users who opt not to load the images or load them more slowly due to poor internet connections.</li> <li><b>Alternate text for images.</b> Indivisible.org is a grassroots organization with a huge focus on activism at scale. Their website places a lot of emphasis on group imagery and features photos of large groups of people on regular pages, in navigational callouts, and even in the primary menu. Knowing <i>when</i>, <i>whether</i>, and <i>how</i> to add alternate text for images was key to pulling off a seamless experience for site visitors using screen readers. While photos in content need descriptive alternative text, images in menu items, used as icons, or implemented as design elements needed to be ignored to avoid a halting screen reader experience in which the browser reads out “image” over and over.</li> <li><b>Keyboard navigation.</b> The ability to cruise through a website’s structure and links with a keyboard (often using <i>Tab</i> for forward, <i>Shift+Tab</i> for backward, <i>Space</i> and <i>Enter</i> to expand and click) is a critical feature for users who make limited use of a mouse or trackpad, as well as a general indicator of “accessibility health.” Especially in the case of Indivisible’s roll-over menus, measures needed to be taken for keyboard focused users. Implementing custom, JavaScript driven keyboard navigation did the trick. Keyboard navigation for Indivisible.org now includes forward, backward, expand and collapse navigation, as well as dropdown buttons visible only to those using the keyboard to browse menus.</li> </ul> <p>There’s more to do for Indivisible, but I’m thrilled we were able to take the first big steps. Ensuring a website is accessible to all requires an ongoing application of accessibility concepts and technologies, but major hurdles can often be cleared with relatively low effort. In the case of Indivisible, for example, identifying and addressing principal accessibility opportunities — from audit through implementation — only took a couple of days.</p> <p>Accessibility issues with web content probably affect more people than you think. In 2019 I lost a portion of my vision to a condition known as ocular neuritis. I found out the hard way that lots of websites aren’t accessible. I had to adapt and started relying on new accessibility tools I’d never used before, many of which weren’t even properly implemented on a majority of websites. As you can probably imagine, I spend a lot of time in front of a computer. It was incredibly terrifying and frustrating to feel suddenly excluded from so many digital spaces I wanted — and needed — access to. Today my vision has mostly recovered, but nearly nine months of vision loss left me with a new appreciation for accessibility on the web and elsewhere.</p> <p>About one in four adults in the United States live with some kind of disability. That translates into a pretty massive opportunity for inclusion on the web. And considering taking the first steps towards a more accessible website can be pretty painless, today is as good a day as any to get started.</p> <p>Interested in learning more? Check out <a href="https://webaim.org/">WebAIM</a> for excellent web accessibility material, <a href="https://wave.webaim.org/extension/">install their Chrome extension</a> to begin to see how your website stacks up, or <a href="https://atendesigngroup.com/contact">get in touch with us</a> to learn more about making your website accessible to the widest audience possible.</p> <!-- google doc id: 1x5h1h-Rm3Cm9w4ywiqJvZCDb0y78kX4zZFZdfjfqkfI --></div> <a href="/about/jennifer-dust" hreflang="en">Jennifer Dust</a> Thu, 28 Jan 2021 20:30:00 +0000 jennifer 10218 at https://atendesigngroup.com How to write good alternative text (alt text) for images https://atendesigngroup.com/articles/how-write-good-alternative-text-alt-text-images <span>How to write good alternative text (alt text) for images</span> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Wed, 08/05/2020 - 12:39</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/content-strategy" class="tag" >Content</a> <a href="/blog/category/usability" class="tag" >Usability</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>Alt text — alternative text for images in your web content — plays a big role in making your articles, pages and posts easy to understand for all your audiences. Unfortunately default settings provided by platforms like Drupal and WordPress don’t always set you up for success, and common sense might lead you into some familiar pitfalls. <a href="#best-practices">Skip to best practices &amp; examples.</a></p> <figure role="group" class="align-center"> <div alt="Drupal 8 image field configuration" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="d8c7e95d-7d87-4e84-aab1-d3b6903e5b1f" data-langcode="en" class="embedded-entity"> <img src="/sites/default/files/2020-08/Screen%20Shot%202020-08-04%20at%207.01.06%20AM.png" alt="Drupal 8 image field configuration" title="Drupal 8 image field configuration" typeof="foaf:Image" /> </div> <figcaption>Out-of-the box Image Field settings in Drupal 8.9.2, released in July, 2020, recommend requiring image alt text — which may not be ideal in some cases.</figcaption> </figure> <h3>What is alt text for?</h3> <p>Alt text is read in place of images to users who have opted to use screen readers, and it is displayed visually when your images fail to load or your users choose not to view them. Primary audiences for image alt text include visually impaired persons and users with slow or unreliable internet connections, but users with non-standard devices and users consuming your content via hands-free operations — like using a screen reader during a morning commute — will also benefit from good alt text.</p> <h3>Image alt text and SEO</h3> <p>Writing good alternative text is also part of a holistic approach to improving Search Engine Optimization for your web content. Providing appropriate alt text for images — alongside a wide variety of other user-centered content practices — is <a href="https://support.google.com/webmasters/answer/114016?hl=en#descriptive-alt-text">recommended by Google Search Console</a> to help expose relevant content to Google Image Search. It’s worth mentioning that Google’s guidelines all center around real-life user needs like improving content accessibility and screen reader function. A negative user experience can result in punitive ranking.</p> <h3 id="best-practices">Image alt text: best practices &amp; examples</h3> <p>Writing good alt text creates an inclusive environment for your users, makes your content more accessible, and contributes to improving findability among search engines. For many of us, good alt text isn’t second nature — there are a variety of special cases that require consideration. Follow these guidelines for the best results:</p> <p><b>Context is king.</b> Write alt text that conveys what the image adds to your content in terms of meaning or purpose. It’s important to consider the image <i>in context</i> — for example the image below may have very different alternate text for an article titled “Join our team!” compared to an article titled “Interpreting requirements documents: a workshop using Legos.”</p> <p>In the first case, “Employees participate in a team exercise” would suffice, whereas in the second case “Three participants holding very different Lego models based on the same requirements documents” would make more sense. <a href="https://webaim.org/techniques/alttext#context">WebAIM takes a deeper dive into image context here</a>.</p> <p><div alt="Example image" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="969cec8d-e215-422d-9929-4b121fe55d02" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/aten_team.jpg" alt="Example image" title="Alt text: Team" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Employees participate in a team exercise” for an article titled "Join our team!"<br /> <strong>Don’t:</strong> “Three participants holding very different Lego models based on the same requirements documents” for an article titled "Join our team!"</p> <hr /> <p><b>Keep it short. </b>Shoot for 5-10 words (or less!) when possible. Images should work with the surrounding text to deliver information — there’s no need to repeat yourself in the alt text or stuff in details not otherwise mentioned in your content.</p> <p><div alt="Jon Bowman" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="578fb85d-3613-41d8-a5a3-7eb8b83eeea8" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/jon_bowman.jpg" alt="Jon Bowman" title="Alt text: Jon Bowman" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Jon Bowman”<br /> <strong>Don’t:</strong> “Jon Bowman, Full-stack developer, started with Aten in 2020”</p> <hr /> <p><b>Drop “image,” “logo” and the like.</b> Screen readers read out “Image: [alt text]” for each image, so including words like "image", "logo" or "graphic" will be redundant.</p> <p><div alt="Aten" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="4f355b83-5398-4b17-b2ad-b6e87eeb6d27" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/aten_logo.jpg" alt="Aten" title="Alt text: Aten logo" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Aten” or “Aten Design Group”<br /> <strong>Don’t:</strong> “Logo of Aten Design Group with text ‘Aten’”</p> <p><b>Text is text. </b>If an image portrays or includes text, the alternative text should be the text from the image.</p> <p><div alt="Drupal 9" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="07cbdc0f-0c8d-4ba4-92e2-95fe5c00e71f" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/drupal_9.jpg" alt="Drupal 9" title="Alt text: Drupal 9" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Drupal 9”<br /> <strong>Don’t:</strong> “Drupal 9 with a shadow on a starry background”</p> <hr /> <p><b>Keep social media links simple.</b> Alternative text for images, logos and icons linking to social media presences should read "Facebook," "Instagram," etc. For links to multiple presences or actions on the same platform use "Aten Facebook," "Michaela Blackham Facebook," "Share to Facebook."</p> <p><div alt="Social icons" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="74917e76-6ccf-429c-ab7d-746bd9716cd7" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/aten_social_icons.jpg" alt="Social icons" title="Alt text: Social icons" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Twitter,” “Facebook,” etc.<br /> <strong>Don’t:</strong> “Aten’s Twitter feed,” “Our Facebook Page,” etc.</p> <hr /> <p><b>Describe complex images in the content.</b> Charts, graphs, maps and other complex images should be described in the text of a page. If a description of the complex image is redundant or unnecessary for those who view the image, a link to a text description can be placed after the image.</p> <p><div alt="Denver area map with Aten Design Group highlighted" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="30a44a84-a927-4bee-a195-4c3fb19615bb" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/aten_denver_map.jpg" alt="Denver area map with Aten Design Group highlighted" title="Alt text: Aten map" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> “Denver area map with Aten Design Group highlighted” as alt text, with a link “Directions to Aten Design Group” placed after the image.<br /> <strong>Don’t:</strong> “Map of Denver with Aten Design Group highlighted along the South Platte River between BOA Technology and Comal Heritage Food Incubator in the Taxi by Zepplin complex,” or written directions in the alt text.</p> <hr /> <p><b>Use empty alt text for decorative images.</b> For images used as visual weight or to break up text without adding meaningful content, use an empty alt tag — but don’t drop the alt tag entirely. Empty alt tags cue screen readers to skip the image, reducing interruptions for your users.</p> <p><div alt="Example image" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="588797bf-0be7-4f0d-9c7b-7d9ab3582237" data-langcode="en" class="align-center embedded-entity"> <img src="/sites/default/files/2020-08/decorative.jpg" alt="Example image" title="Alt text: Decorative" typeof="foaf:Image" /> </div> </p> <p><strong>Do:</strong> Use an empty alt tag: &lt;img src="images/decorative.png" alt="" /&gt;<br /> <strong>Don't:</strong> “Laptop, tablet, phone, eye, ear and speech bubble connected by yellow lines”</p> <hr /> <p>Building good habits around content accessibility is an important part of quality content development — but it’s not always easy. If you get stuck, try thinking about alt text in the context of reading someone a webpage over the phone. How would you describe the images? Which ones would you skip altogether? How would you convey the contents of the page to whomever you’re speaking with?</p> <p>At its core, accessibility on the web is about inclusion, empathizing with your users, and connecting with your audiences — no matter how they’re consuming your content.</p></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Wed, 05 Aug 2020 18:39:47 +0000 Michaela Blackham 10133 at https://atendesigngroup.com Accessible PDFs https://atendesigngroup.com/articles/accessible-pdfs <span>Accessible PDFs</span> <figure> <picture> <source srcset="/sites/default/files/2020-05/accessible-pdfs.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/2020-05/accessible-pdfs.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/2020-05/accessible-pdfs.png?itok=x0eKIYjD 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2020-05/accessible-pdfs.png?itok=_ZmEn7_y 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2020-05/accessible-pdfs.png?itok=_ZmEn7_y 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2020-05/accessible-pdfs.png?itok=_ZmEn7_y 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2020-05/accessible-pdfs.png?itok=QUcLqXeO 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2020-05/accessible-pdfs.png?itok=QUcLqXeO 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/2020-05/accessible-pdfs.png" alt="Accessible PDFs" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Mon, 05/04/2020 - 08:00</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>A few weeks ago I hosted a webinar about Accessible PDFs as a part of the <a href="/webinars">Aten at Home Webinar Series</a>. Here’s a quick recap of what we covered, and a recording of the session. Thanks to everyone who participated!</p> <p>For more about accessibility, check out <a href="https://atendesigngroup.com/blog/holistic-approach-accessibility">A Holistic Approach to Accessibility</a>.</p> <h2>What We Covered</h2> <ul> <li><strong>Cons to using PDFs</strong><br /> PDFs aren’t responsive, they’re not consistent, and they’re generally harder to work with than other formats. But they do have a place, and they’re not going away anytime soon.</li> <li><strong>Alternative formats to PDFs</strong><br /> From plaintext and HTML to EPub3 and native document formats, there are a number of great alternatives PDFs. It’s worth being familiar with the options.</li> <li><strong>Accessible PDF Overview</strong><br /> Accessible PDFs include metadata that helps screen readers and other devices correctly interpret their content. Like accessible web pages, accessible PDFs provide semantic structure, strong contrast, and a number of other important considerations.</li> <li><strong>Creating PDFs from the beginning with Microsoft Word</strong><br /> Microsoft Word provides a number of powerful, easy-to-use tools for converting your documents to accessible PDFs.</li> <li><strong>Evaluating and Repairing PDFs with Adobe Acrobat Pro</strong><br /> If you need to evaluate or repair an existing PDF, Adobe Acrobat Pro is probably your best bet.</li> </ul> <h2>Watch the Recording Online</h2> <p><div data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="bfdbc2f1-40fa-40c8-8ed5-0780b7816be7" data-langcode="en" class="embedded-entity"><figure> <div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-provider-youtube video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/2pYrsOxA7DA?autoplay=1&amp;start=0&amp;rel=0"></iframe> </div> </div> </figure> </div> </p> <!-- google doc id: 1Qtb6HgYsO6ntTZ_mToxHI4fpXlodvLTz-eTkYVOxAeI --></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Mon, 04 May 2020 14:00:00 +0000 Michaela Blackham 10100 at https://atendesigngroup.com Code4Lib 2020 https://atendesigngroup.com/articles/code4lib-2020 <span>Code4Lib 2020</span> <span><span lang="" about="/user/kenna-andreas" typeof="schema:Person" property="schema:name" datatype="">Mckenna Andreas</span></span> <span>Mon, 03/09/2020 - 12:22</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/usability" class="tag" >Usability</a> <a href="/blog/category/user-experience" class="tag" >User Experience</a> <a href="/blog/category/user-research" class="tag" >User Research</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>Our Front-end Developer, Michaela is back at Code4Lib 2020 and ready for another year of connecting with the library community. This year, <a href="https://atendesigngroup.com/about/michaela-blackham">Michaela</a> will be sharing how to <a href="https://2020.code4lib.org/talks/Evaluating-Repairing-and-Enhancing-Accessible-PDFs">Evaluate, Repair and Enhance Accessible PDF's</a>. As our resident accessibility expert, Michaela will be sharing tips, tools and free resources on creating accessible PDF’s.</p> <p><strong>Accessible PDFs, The Pitfalls</strong></p> <p>Before creating an accessible PDF, determine whether it’s the right fit for your content. There are a number of alternatives to using a PDF but not every organization has the time, resources or knowledge to create different content pieces. The goal is not to fix PDF’s or focus on the alternative options but to provide awareness about the files on your site and how to enhance their usability and experience for your users.</p> <p><strong>Microsoft Words PDFs</strong></p> <p>In order to enhance and repair PDF’s, Michaela gives step-by-step aid on creating a PDF in Microsoft Word while focusing on accessibility: <a href="https://youtu.be/_S0hmpdou_w">Creating Accessible PDF's in Microsoft Word</a></p> <p><strong>Resources</strong></p> <p>For those who would like to take a sneak peek at Michaela’s presentation or missed it at Code4Lib this year, download the presentation here with video demos, strategies and tools: <a href="https://speakerdeck.com/michaelablackham/evaluating-repairing-and-enhancing-accessible-pdfs?slide=16">Evaluating, Repairing and Enhancing Accessible PDF's Slidedeck</a></p> <p>Stay tuned as we post Michaela’s session here!</p> <p>Make sure to sign up for our email list to be alerted for Michaela's next webinar that gives step-by-step instructions on how to create an accessible PDF in Adobe!</p></div> Mon, 09 Mar 2020 18:22:53 +0000 Mckenna Andreas 2571 at https://atendesigngroup.com A Holistic Approach to Accessibility https://atendesigngroup.com/blog/holistic-approach-accessibility <span>A Holistic Approach to Accessibility</span> <figure> <picture> <source srcset="/sites/default/files/holistic-accessibility.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/holistic-accessibility.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/holistic-accessibility.png?itok=8nwRaaOG 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/holistic-accessibility.png?itok=GbcotQYU 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/holistic-accessibility.png?itok=GbcotQYU 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/holistic-accessibility.png?itok=GbcotQYU 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/holistic-accessibility.png?itok=W3u9J_1Z 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/holistic-accessibility.png?itok=W3u9J_1Z 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/holistic-accessibility.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><span lang="" about="/user/christine-coughlan" typeof="schema:Person" property="schema:name" datatype="">Christine Coughlan</span></span> <span>Wed, 06/05/2019 - 07:54</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/user-experience" class="tag" >User Experience</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>Everyone deserves equal access to information and online resources. According to the Center for Disease Control, approximately 1 out of every 5 adults in the U.S. live with some form of disability. Accessible websites are able to engage a larger audience, rank higher in search, and mitigate the risk of legal liability. For organizations that value inclusiveness and diversity, accessibility is a moral imperative.</p> <p>Building accessible experiences helps ensure that content is available to the widest audience possible, and ultimately benefits all users. With such far-reaching implications, accessibility isn't something that should be simply tacked-on to the process. Here at Aten, we take accessibility into consideration at every stage of projects. Here's a quick overview of how we tackle accessibility throughout the process – from strategy and design to development and testing.</p> <h2>Strategy and Information Architecture</h2> <ul> <li>As a part of identifying key audiences for a project, we specifically prioritize individuals with disabilities from day one.</li> <li>Define the logical order of content on each screen to be read by a screen reader or other assistive technologies.</li> <li>Write calls to action that adequately explain the next step in the user flow.</li> </ul> <h2>Design</h2> <ul> <li>Select colors, fonts, and font weights that meet high contrast requirements for low-vision users.</li> <li>Design levels of content hierarchy, such as headings and body text.</li> <li>Ensure all elements have an active and focus state.</li> </ul> <h2>Development</h2> <ul> <li>Implement logical flow, keyboard navigation, colors, fonts, etc. as defined in the strategy and design phases.</li> <li>Use semantic markup for hierarchy and structure creating a usable outline of content for screen readers.</li> <li>Include <a href="https://a11yproject.com/posts/ARIA-properties/">ARIA attributes</a> to describe a section or functionality that wouldn’t make sense through a screen reader.</li> <li>Set up content creators for success by requiring &quot;alt&quot; text for all visuals, headings, captions, transcripts, and descriptive link text. Beyond requiring &quot;alt&quot; text, make the process for adding it dead simple.</li> </ul> <h2>Testing</h2> <ul> <li>Write and run scripts to perform automated tests.</li> <li>Run automated tests using <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>, <a href="https://wave.webaim.org/">WAVE</a>, SiteImprove, and other accessibility tools.</li> <li>Run manual tests using keyboard navigation and screen readers.</li> <li>Host feedback sessions and focus groups with users that regularly use assistive technologies.</li> </ul> <h2>Related Reading</h2> <ul> <li> <a href="https://aten.io/accessibility-pt1">The Importance Of An Accessible Website - Part 1: Who Needs an Accessible Website?</a> </li> <li> <a href="https://aten.io/accessibility-pt2">The Importance of an Accessible Website - Part 2: How Can Your Team Get Involved?</a> </li> <li> <a href="https://aten.io/accessibility-pt3">The Importance of an Accessible Website - Part 3: Make Your Drupal 8 Site More Accessible</a> </li> <li> <a href="aten.io/accessibility-pt4">The Importance of an Accessible Website - Part 4: Wrap Up</a> </li> <li> <a href="https://atendesigngroup.com/blog/accessibility-audits">Accessibility Audits</a> </li> </ul></div> Wed, 05 Jun 2019 13:54:28 +0000 Christine Coughlan 2552 at https://atendesigngroup.com Accessibility Audits https://atendesigngroup.com/articles/accessibility-audits <span>Accessibility Audits</span> <figure> <picture> <source srcset="/sites/default/files/accessibility-audits.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/accessibility-audits.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/accessibility-audits.png?itok=wQwO52Og 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-audits.png?itok=TMEPAR3W 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-audits.png?itok=TMEPAR3W 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-audits.png?itok=TMEPAR3W 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-audits.png?itok=kmWMX_E3 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-audits.png?itok=kmWMX_E3 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/accessibility-audits.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Tue, 05/14/2019 - 10:28</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>Today, virtually all web professionals know that accessibility should be a priority. Many, though, struggle to take the first step. For anyone who values accessibility but needs help getting started, we have a new service here at Aten that I’m thrilled to introduce.</p> <p>Aten now offers Accessibility Audits to help organizations identify problems, prioritize solutions, and develop a clear work plan for meeting ADA compliance (i.e. WCAG 2.1 AA/AAA or 508C).</p> <p>Accessibility has long been a focus for our team. With Accessibility Audits, we’re offering a sensible, outcomes-focused service for accelerating accessibility implementations.</p> <h2>The Process is Simple:</h2> <ul> <li> <a href="/accessibility-audits">Drop us a line with this online form.</a> </li> <li>List the top URLs you’re concerned about (up to 10). (Organizations often list home page, contact page, and other key landing pages.)</li> <li>We’ll perform a cursory review (no charge) and follow up with a 30-minute call to discuss initial findings and next steps.</li> <li>If you choose to move forward, we’ll provide a comprehensive audit with documented problems, prioritized technical solutions, and an organized work plan for meeting ADA compliance.</li> </ul> <p>The audit is usually finished in two weeks or less from the time of initial inquiry. Pricing starts at $1,500 for a custom accessibility audit, detailed report, and work plan. For a firm, custom quote, just fill out this brief form.</p> <h2>After The Audit</h2> <p>What happens next will vary from one organization to another and is completely up to you. You can work with our team to start implementing fixes immediately; you can work with your own internal web team; you can use the work plan to get competitive estimates. Organizations often choose custom training to help their editorial staff create accessible content. There are a ton of possibilities, and we’re here to help choose the best option for your team’s unique needs.</p> <h2>Give It a Try</h2> <p>If accessibility is a priority but you’re struggling to take the first step, <a href="/accessibility-audits">drop us a line</a>. It’ll take you less than 5 minutes, and there’s absolutely no risk – we’ll review your website and follow up.</p></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Tue, 14 May 2019 16:28:38 +0000 Michaela Blackham 2550 at https://atendesigngroup.com Optimizing Your Old, Outdated Blog Content https://atendesigngroup.com/articles/optimizing-your-old-outdated-blog-content <span>Optimizing Your Old, Outdated Blog Content</span> <figure> <picture> <source srcset="/sites/default/files/optimizing-old-content.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/optimizing-old-content.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/optimizing-old-content.png?itok=Pk0mMNYG 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/optimizing-old-content.png?itok=Qi8raltF 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/optimizing-old-content.png?itok=Qi8raltF 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/optimizing-old-content.png?itok=Qi8raltF 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/optimizing-old-content.png?itok=JkiINnZM 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/optimizing-old-content.png?itok=JkiINnZM 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/optimizing-old-content.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><span lang="" about="/user/sarah-shields" typeof="schema:Person" property="schema:name" datatype="">Sarah Shields</span></span> <span>Fri, 09/14/2018 - 13:03</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/content-strategy" class="tag" >Content</a> <a href="/blog/category/usability" class="tag" >Usability</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>The great thing about blogging for your organization is that you can publish content easily and often, which means better chances for SEO-rankings, customer search findings, attracting your ideal audience – the list goes on.</p> <p>The terrible thing about blogging for your organization is that you can publish content easily and often, and then that content goes largely unchecked for years and years, piling up in unimaginable quantities that are difficult and expensive to manage.</p> <p>So why bother going through old content? Well, <a href="http://archive.org/web/">the internet is forever</a>. Every page of content on your site is a potential entrance to your organization (which is probably why you have a blog in the first place). You don’t want your readers to open a post from three years ago and think you have no idea what is going on in your industry today.</p> <p>If your favorite method of dealing with old, outdated or redundant content is burying your head in the sand like a cartoon ostrich, you’re missing out on some amazing assets with untapped potential. Here are the key steps to keep your sanity throughout the process of optimizing your old blog posts.</p> <h2>Audit What You Have So Far</h2> <p>If you read the words “content audit” and automatically cringe, you’re not alone. Thankfully, it doesn’t have to be such a painful feeling. First, if you’re particularly prolific and have thousands of blog posts, cut them into batches, or divide the work among multiple content editors or subject matter experts. You could even do one year at a time, starting at the beginning (or even one month, if that’s all you have time for at the moment).</p> <p>My favorite method for quickly and efficiently doing a content look-through is to check out the blog posts for ROT.</p> <ul> <li>R - Redundant content that has also been stated in 10 other posts on your blog</li> <li>O - Outdated content that has changed since you hit publish</li> <li>T - Trivial or trendy content that no longer represents your company</li> </ul> This is a good way to get a very high-level view of your content. Chances are many of your blog posts over two years old will be in at least one of these categories. I like to make a spreadsheet with the title and category I’d label each post. <h2>Check Out What’s Still Performing Well</h2> <p>Check your analytics to see what blog posts are still getting the most traffic and from where. Maybe you hit an SEO jackpot on one of your older posts, and you’re still raking in the views after all this time because of your great keywords and tags, or maybe one of your posts went viral, and it’s still being shared over a year later.</p> <p>Note these popular posts, because these are going to be the first ones you’ll want to revise in the next step.</p> <h2>Revise to Optimize</h2> <p>Save what you can by simply revising/optimizing the content. You should, at the very least, implement <a href="https://moz.com/blog/write-for-seo-2018">more recent SEO techniques</a> since those can change very quickly (and have dramatically changed since the beginning of your blog, guaranteed).</p> <p>With each post, ask yourself if the blog content fits your company’s voice and core values any longer. If you’ve rebranded recently and your company wants to develop a more personal, one-on-one type of voice, make sure your old blog posts are tweaked and revised to represent your company as it is currently, because an audience that feels as though they are getting two different answers from the same company is not one that will trust and commit to you.</p> <p>For posts that you’ve put in ROT categories, there are a variety of different ways that you can optimize them depending on what you need to change.</p> <h3>Redundant</h3> <p>Start by finding which posts are performing the best, and prioritize updating or keeping those posts. Combine very similar posts into one post with the best content from each, but make sure you’re <a href="https://atendesigngroup.com/blog/404-not-found-monster-under-your-bed">not leaving 404s lying around</a>. Redirect old posts using one of the methods for outdated content below. Don’t be afraid to get rid of older blog posts that have been rewritten a dozen times on your site.</p> <h3>Outdated</h3> <p>Time to update. Why? <a href="https://search.googleblog.com/2011/11/giving-you-fresher-more-recent-search.html">Google rewards “freshness”</a> so updating a post significantly helps its rankings (a post in 2010 isn’t likely to rank as high as a post from 2018 on the same topic). You’re also building off of the page authority that your older post already has instead of starting from scratch.</p> <p>To update a post, edit and rewrite for comprehensive and accurate content. It may change dramatically, but you can promote this content as new. Add new calls to action to promote current offerings, conference attendances, etc.</p> <p>Alternatively, you can write an entirely new version of a post meant for a specific time or date. Let’s say you have a very popular article that is still getting regular traffic like “5 Of Our Favorite Charities And Causes For #GivingTuesday 2017.” Because articles like this are extremely time-sensitive (they list a year in the name, after all), they’re easy to recycle. Write up a new one for the current year and link to it at the beginning of your post, adding something along the lines of “Updated 2018 version here!”</p> <h3>Trivial</h3> <p>Trivial content may have been amazing content when it was first published. If you can, try to find a way to update your trivial content to make it relevant today. We usually err on the side of keeping your content, but ultimately, don’t be afraid to unpublish these posts (but include redirect links for each URL you’re deleting). Never keep content you love for the sake of keeping it. If it isn’t performing well or meeting the reader’s needs, it’s not useful to your organization.</p> <h2>Finally, Some Basic Blog Updating Ideas</h2> <ul> <li>Keep your paragraphs short. This is a newer trend because of the rise of mobile popularity. This is especially true for blogs that are popular on mobile.</li> <li>Add in relevant videos and images, but don’t go overboard with them. Keep your blog pages simple and easy to navigate. <a href="https://atendesigngroup.com/blog/importance-accessible-website-part-1-who-needs-accessible-website">For best accessibility practices</a>, find videos that translate the content without sound, whether that be in accurate closed captions or part of the video itself.</li> <li>Create image alt text that can describe the image to a screen reader. This also helps with SEO.</li> <li>Do a current web search to see if you can add in newer links that will prove helpful to the reader.</li> <li>Create h1, h2 and h3 headings -- these not only help with SEO, but they also improve the accessibility of your site (note: keep them in logical order for ease of use on screen readers).</li> <li>Create descriptive links that tell the reader where they’re going, especially for use on screen readers.</li> </ul> Most importantly, don’t be afraid to cut the dead weight. No one is impressed with the number of blog posts you have, especially if they’re not the best content you’ve ever produced. You may have blogged regularly for years, but readers are interested in quality over quantity. Sure, more blog posts do create more gateways onto your site, but you need to make sure your readers are opening the right doors. <p>It’s better to show even 20 of your best blog posts that ensure readers trust and know your organization than have 500 keyword-stuffed, unreadable articles that frustrate readers and make them click away from your site, confused.</p></div> Fri, 14 Sep 2018 19:03:42 +0000 Sarah Shields 2515 at https://atendesigngroup.com Implementing WCAG 2.1 Guideline Changes: Part 2 https://atendesigngroup.com/articles/implementing-wcag-21-guideline-changes-part-2 <span>Implementing WCAG 2.1 Guideline Changes: Part 2</span> <figure> <picture> <source srcset="/sites/default/files/accessibility-04%20copy%203.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/accessibility-04%20copy%203.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/accessibility-04%20copy%203.png?itok=2SfZ9ELo 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy%203.png?itok=3E1E1pJ5 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy%203.png?itok=3E1E1pJ5 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy%203.png?itok=3E1E1pJ5 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-04%20copy%203.png?itok=-hJ5kn46 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-04%20copy%203.png?itok=-hJ5kn46 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/accessibility-04%20copy%203.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Tue, 09/04/2018 - 17:46</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/usability" class="tag" >Usability</a> <a href="/blog/category/user-experience" class="tag" >User Experience</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>Learn more about implementing Level A Success Criteria in <a href="https://atendesigngroup.com/blog/wcag-2-1-pt1">Part 1 of Implementing WCAG 2.1 Guideline Changes.</a></p> <h2>Additions to Level AA Success Criteria</h2> Level AA conformance is the success criteria most companies shoot for and what boards base their needs on. AA includes all guidelines and criteria from WCAG Level A and creates the best approach to an accessible product. <h3>1.3 Adaptable Guidelines</h3> <h4>1.3.4 Orientation (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. </div> </div> <h5>What Does This Mean?</h5> Your site should be responsive so users with physical disabilities who need to mount their device on a wheelchair, for example, can still navigate within any orientation <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong><a href="https://atendesigngroup.com/blog/importance-accessible-website-part-4-wrap">P.O.U.R. Guideline:</a></strong> Perceivable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h4>1.3.5 Identify input purpose (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> The purpose of each input field collecting information about the user can be programmatically determined when: <ul style="margin-bottom: 0;"> <li>The input field serves a purpose identified in the Input Purposes for User Interface Components section. </li> <li>The content is implemented using technologies with support for identifying the expected meaning for form input data.</li> </ul> </div> </div> <h5>What Does This Mean?</h5> This translates to a couple different things. For instance, inputs should be labeled and given the correct <a href="https://www.w3schools.com/tags/att_input_type.asp" target="_blank">input type attribute value</a> such as <span class="geshifilter"><code class="php geshifilter-php">type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;email&quot;</span></code></span>, tel, range, date etc. And now, form fields should use the <span class="geshifilter"><code class="php geshifilter-php">autocomplete<span style="color: #339933;">=</span>””</code></span> attribute on each input to auto fill any possible fields like address, email, phone and so on. This is especially helpful to users with cognitive disabilities, but will also help speed along the form process for all users. <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Cognitive</li> </ul> <hr/> <h3>1.4 Distinguishable Guidelines</h3> <h4>1.4.10 Reflow (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: <ul style="margin-bottom: 0;"> <li>Vertical scrolling content at a width equivalent to 320 CSS pixels.</li> <li>Horizontal scrolling content at a height equivalent to 256 CSS pixels.</li> <li>Except for parts of the content which require two-dimensional layout for usage or meaning.</li> </ul> </div> </div> <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Low Vision</li> </ul> <hr/> <h4>1.4.11 Non-text contrast (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):</p> <ul style="margin-bottom: 0;"> <li>User Interface Components: Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.</li> <li>Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.</li> </ul> </div> </div> <h5>What does this mean?</h5> Color contrast that applies to text now applies to all graphic elements like icons, images, buttons and so on. <p>Boundaries on fieldsets, text inputs and all other similar interactive elements should have a contrast ratio all users can comprehend. This however does not apply to elements styled with default browser theming, or inactive items like an inactive button.</p> <p>Icons, and images that portray important information should follow the same contrast ratios as text content. Users with low vision or who are color blind should still understand what these graphic elements are portraying. This however does not apply to logos images.</p> <ul> <li><strong>Targeted Team Members:</strong> Designers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Low Vision</li> </ul> <hr/> <h4>1.4.12 Text spacing (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:</p> <ul style="margin-bottom: 0;"> <li>Line height (line spacing) to at least 1.5 times the font size</li> <li>Spacing following paragraphs to at least 2 times the font size;</li> <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> <li>Word spacing to at least 0.16 times the font size.</li> <li><strong>Exception:</strong> Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.</li> </ul> </div> </div> <h5>What does this mean?</h5> Designers should work with developers to make sure the readability of all text still works well with all fonts, readable or icon. Users should still be able to easily distinguish individual letters, words, or paragraphs. <ul> <li><strong>Targeted Team Members:</strong> Designers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Low Vision</li> </ul> <hr/> <h4>1.4.13 Content on Hover or Focus (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:</p> <ul style="margin-bottom: 0;"> <li><strong>Dismissable:</strong> A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content.</li> <li><strong>Hoverable:</strong> If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing.</li> <li><strong>Persistent:</strong> The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.</li> <li><strong>Exception:</strong> The visual presentation of the additional content is controlled by the user agent and is not modified by the author.</li> </ul> </div> </div> <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Low Vision</li> </ul> <hr/> <h3>4.1 Compatible Guidelines</h3> <h4>4.1.3 Status messages (AA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. </div> </div> <h5>What does this mean?</h5> When a user completes a task, like a form, or send an email, they should be aware this task was completed successfully with some form of a status. This status should not take focus on the page. <p>For visual users, this means a big modal window or jerk up/down the page to the message. For keyboard users, this means not changing logical order of content, or changing tab focus. For screen readers, this means not changing tab focus.</p> <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Robust</li> <li><strong>Origin:</strong> Cognitive</li> </ul> <hr/> <h2>Additions to Level AAA Success Criteria</h2> This is the level of perfection for websites to meet. However, it is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not always possible to satisfy all Level AAA Success Criteria for some content. Another way to think of that is sometimes meeting AAA success criteria actually takes away from the experience of an able or visual user. Some guidelines are great to shoot for, but it is up to your discretion whether AA, or the use of some AAA guidelines is best for your site. <hr/> <h3>1.3 Adaptable Guidelines</h3> <h4>1.3.6 Identify purpose (AAA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</p> </div> </div> <h5>What does this mean?</h5> If the user has the ability to update their own content, user should be able to add their own icons or hide certain areas to help with cognitive memory or to declutter a page. <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Cognitive</li> </ul> <hr/> <h3>2.2 Enough Time Guidelines</h3> <h4>2.2.6 Timeouts (AAA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.</p> </div> </div> <h5>What does this mean?</h5> If a time limit is included within an interactive element like a form, a warning should be made to the user before the loss of data. Otherwise, this data will need to be saved within the site’s database for a minimum of 20 hours. <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Perceivable</li> <li><strong>Origin:</strong> Cognitive</li> </ul> <hr/> <h3>2.3 Seizures and Physical Reactions Guidelines</h3> <h4>2.3.3 Animation from interactions (AAA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.</p> </div> </div> <h5>What does this mean?</h5> All animations should have the ability to be turned off within a sitewide setting, unless this animation is absolutely necessary for the functionality of the site, which is rare. <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Cognitive</li> </ul> <hr/> <h3>2.5 Input Modalities Guidelines</h3> <h4>2.5.5 Target size (AAA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:</p> <ul style="margin-bottom: 0;"> <li><strong>Equivalent:</strong> The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels.</li> <li><strong>Inline:</strong> The target is in a sentence or block of text.</li> <li><strong>User Agent Control:</strong> The size of the target is determined by the user agent and is not modified by the author.</li> <li><strong>Essential:</strong> A particular presentation of the target is essential to the information being conveyed.</li> </ul> </div> </div> <h5>What does this mean?</h5> All interactive elements, like buttons and links, should have a minimum size to easily press/click without accidentally interactive with the wrong element. This has been dictated at 44x44px, or entire block elements like a block of text. This has been good practice for quite some time, but has only recently been added as a success criteria. <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h4>2.5.6 Concurrent input mechanisms (AAA)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> <p>Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.</p> </div> </div> <h5>What does this mean?</h5> Users should be able to navigate a site no matter what form of assistive technology they are using like mouse, stylus, trackpad, keyboard, or any form of keyboard based assistance like screen readers. This should be essential even if switching between multiple forms like using a mouse to click a menu item but then use a keyboard to easily navigate through. <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> We hope this has been a helpful guide for the changes between WCAG 2.0 and 2.1. Even though it may not seem like an overhauled update, remember that the criteria are developed in order to make your website accessible to all users.</div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Tue, 04 Sep 2018 23:46:06 +0000 Michaela Blackham 2514 at https://atendesigngroup.com Implementing WCAG 2.1 Guideline Changes: Part 1 https://atendesigngroup.com/articles/implementing-wcag-21-guideline-changes-part-1 <span>Implementing WCAG 2.1 Guideline Changes: Part 1</span> <figure> <picture> <source srcset="/sites/default/files/accessibility-04%20copy.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/accessibility-04%20copy.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/accessibility-04%20copy.png?itok=S-QppwTX 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy.png?itok=ZQ4hs5ap 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy.png?itok=ZQ4hs5ap 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/accessibility-04%20copy.png?itok=ZQ4hs5ap 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-04%20copy.png?itok=aQeNW1X7 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/accessibility-04%20copy.png?itok=aQeNW1X7 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/accessibility-04%20copy.png" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/michaela-blackham" lang="" about="/user/michaela-blackham" typeof="schema:Person" property="schema:name" datatype="">Michaela Blackham</a></span> <span>Thu, 08/23/2018 - 16:11</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/usability" class="tag" >Usability</a> <a href="/blog/category/user-experience" class="tag" >User Experience</a> <div class="field field--name-body field--type-text-with-summary field--label-hidden t--body field__item"><p>&lt;a href&quot;https://www.w3.org/WAI/standards-guidelines/wcag/&quot;&gt;Web Content Accessibility Guidelines</a> (WCAG) is the international set of guidelines for accessible content on the internet for users with disabilities, including visual, auditory, physical and cognitive disabilities. Early this summer, the WCAG guidelines were updated to version <a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/">2.1</a> with 17 new success criteria spanning across all 3 levels. Most companies tend to follow the AA success criteria portion of WCAG, which means there are 12 mandatory new criteria to follow. Sometimes the WCAG guidelines can be difficult to understand, so let’s clarify what these new guidelines are trying to achieve.</p> <h2>Here’s what you need to know about the update:</h2> <ol> <li>WCAG 2.1 is backwards compatible with WCAG 2.0, meaning: <ul style="margin-bottom: 0;"> <li>The previous categories and guidelines still apply</li> <li>The numbering system still applies</li> <li>The three levels of success criteria (A, AA, AAA) still apply</li> </ul> </li> <li>508C guidelines encompasses the WCAG 2.0 guidelines, but has not yet been updated to follow the 2.1 guidelines.</li> <li>These changes focus on improving accessibility for users with cognitive disabilities and low vision, as well as for users who browse websites on mobile devices at the levels of A to AAA standards.</li> </ol> <p>For part 1 of WCAG 2.1 changes, we'll go over what has changed regarding Level A.</p> <hr/> <h2>Additions to Level A Success Criteria</h2> Level A conformance is the minimum level of compliance every site should meet. Every website, no matter the size of the organization, target audience or pages on the site, should meet this level. Usually, by following coding standards and using up to date versions of the CMS of your choosing, this level can be met on the development side. However, once custom theming, styling and content are added, that is where this area tends to fall short of fulfilling the Level A criteria. Here are the 5 new success guidelines for level A conformance. <h3>2.1 Keyboard Accessible Guidelines</h3> <h4>2.1.4 Character key shortcuts (A)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> If a keyboard shortcut is implemented in content using only letters (including upper- and lower-case letters), punctuation, number or symbol characters, then at least one of the following is true: <ul style="margin-bottom: 0;"> <li><strong>Turn off:</strong> A mechanism is available to turn the shortcut off.</li> <li><strong>Remap:</strong> A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc).</li> <li><strong>Active only on focus:</strong> The keyboard shortcut for a user interface component is only active when that component has focus.</li> </ul> </div> </div> <h5>What Does This Mean?</h5> If your app or website uses any kind of proprietary keyboard shortcuts for navigation, these shortcuts should be able to be turned off, modified or operated by voice command. If this applies to your site, there should be a resource available for users to determine if these voice commands and shortcuts will work for them, or if they need to modify or turn these commands off. <ul> <li><strong>Targeted Team Members:</strong> Designers, Developers</li> <li><strong><a href="https://atendesigngroup.com/blog/importance-accessible-website-part-4-wrap">P.O.U.R. Guideline:</a></strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h3>2.5 Input Modalities Guidelines</h3> <h4>2.5.1 Pointer gestures (A)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. </div> </div> <h5>2.5.1 Summary</h5> Complex and confusing finger gestures such as double taps, swipes, or pinches should have an alternative operation like a button or link to produce the same outcome for users who physically cannot make these gestures or cognitively cannot remember these gestures. <ul> <li><strong>Targeted Team Members:</strong> Developers, Designers</li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h4>2.5.2 Pointer Cancellation (A)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> For functionality that can be operated using a single pointer, at least one of the following is true: <ul style="margin-bottom: 0;"> <li><strong>No Down-Event:</strong> The down-event of the pointer is not used to execute any part of the function.</li> <li><strong>Abort or Undo:</strong> Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion.</li> <li><strong>Up Reversal:</strong> The up-event reverses any outcome of the preceding down-event.</li> <li><strong>Essential:</strong> Completing the function on the down-event is essential.</li> </ul> </div> </div> <h5>2.5.2 Summary</h5> Users with physical disabilities may not have the same accuracy on touch screens as able users. A user should only create an action if they press down and up on the same item. For example, if a user presses on the “clear” button on a form but meant to press “send”, the user can slide their finger off of “clear” to reverse the action. Having an abort or undo action is also recommended for important actions like "clear all", "reset", "delete" and "submit". <ul> <li><strong>Targeted Team Members:</strong> Developers</li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h4>2.5.3 Label in name (A)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> For user interface components with labels that include text or images of text, the name contains the text that is presented visually. </div> </div> <h5>2.5.3 Summary</h5> Users who navigate websites and apps through speech technology should be able to, for example, send a form by reading whatever the button to submit the form reads. For example, if the button visually reads as “submit” but the name of the button in the code is “apply,” the speech action of "submit" will not trigger this action. In this case, the button will only trigger when "apply" is spoken. <ul> <li><strong>Targeted Team Members:</strong> Developers, Designers, Content Editors</li> <li><strong>P.O.U.R. Guideline:</strong> Understandable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> <h4>2.5.4 Motion actuation (A)</h4> <div class="image"> <div class="caption"> <h5 style="margin-top: 0;">WCAG Criteria</h5> Functionality that can be operated by device motion or user motion can also be operated by user interface components, and responding to the motion can be disabled to prevent accidental actuation, except when: <ul style="margin-bottom: 0;"> <li><strong>Supported Interface:</strong> The motion is used to operate functionality through an accessibility supported interface.</li> <li><strong>Essential:</strong> The motion is essential for the function and doing so would invalidate the activity.</li> </ul> </div> </div> <h5>2.5.4 Summary</h5> Users who lack certain physical movements should still be able to operate an app or site. Anything that requires custom movements, like the shake to remove all text on iPhones, should also be executable by a button or link as well. This also goes for users with tremors who may have uncontrollable movements, and would like to turn these motion activations off. <ul> <li><strong>Targeted Team Members:</strong> Developers, Designers </li> <li><strong>P.O.U.R. Guideline:</strong> Operable</li> <li><strong>Origin:</strong> Mobile</li> </ul> <hr/> In <a href="https://atendesigngroup.com/blog/wcag-2-1-pt2">part 2 of our series about the WCAG 2.1 update</a>, we discuss Level AA and Level AAA changes.</div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Thu, 23 Aug 2018 22:11:45 +0000 Michaela Blackham 2510 at https://atendesigngroup.com