Accessibility en A guide to accessible user experience <span>A guide to accessible user experience</span> <figure> <picture> <source srcset="/sites/default/files/2021-10/accessible-user-experience.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/2021-10/accessible-user-experience.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/2021-10/accessible-user-experience.png?itok=C7aegMDx 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-10/accessible-user-experience.png?itok=PHOFMseE 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-10/accessible-user-experience.png?itok=PHOFMseE 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-10/accessible-user-experience.png?itok=PHOFMseE 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-10/accessible-user-experience.png?itok=e7d4DrNq 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-10/accessible-user-experience.png?itok=e7d4DrNq 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/2021-10/accessible-user-experience.png" alt="Ven diagram of Usability + Accessibility, both overlap with Accessible User Experience" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/trevor-calabro" lang="" about="/user/trevor-calabro" typeof="schema:Person" property="schema:name" datatype="">Trevor</a></span> <span>Tue, 10/05/2021 - 15:09</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"><h2>An introduction to building better websites for users</h2> <p>When it comes to the web, user experience and digital accessibility have surprising overlap. At their core, both disciplines are about building interfaces that people can easily understand and use. Usable, intuitive interfaces reach wider audiences and remove subtle obstacles between users and the interactions organizations on the web are trying to promote — purchases, subscriptions, likes, reads, etc.</p> <p>Before we dive into the overlap between user experience and digital accessibility, let’s briefly visit them individually.</p> <h2>What is User Experience?</h2> <p>User experience is the quality of a person’s interaction with things in the world. When it comes to websites, you can judge user experience by how easy to use a digital tool or platform is. We call this <i>usability</i>. Here are Jakob Neilsen’s five components to determine how useable a given platform is:</p> <ul> <li><b>Learnability &amp; discoverability.</b> Can users easily find things &amp; learn how things work?</li> <li><b>Efficiency.</b> How quickly can users do things?</li> <li><b>Memorability.</b> Can users easily remember how to use things when they return?</li> <li><b>Errors.</b> Can users identify and fix their mistakes?</li> <li><b>Satisfaction.</b> How pleasant is the design to use?</li> </ul> <p>A website that is usable is cheaper to operate (less customer assistance), creates a positive impression of your brand, and results in more user success — whether they're trying to buy something, subscribe, connect with other users, or do whatever it is your website is for.</p> <h2>What is Digital Accessibility?</h2> <p>Digital or web accessibility is the degree to which websites, apps, and digital technologies are designed so that people with disabilities can use them. Building accessible websites means that we consider the following users:</p> <ul> <li><b>Blind or visually impaired. </b>Non sighted, peripheral blindness, or color blindness.<b> </b></li> <li><b>Deaf or hard of hearing. </b>Non hearing or hearing impaired.<b> </b></li> <li><b>Those with cognitive impairments. </b>ADHD, Down Syndrome, seizures, age.<b> </b></li> <li><b>Physical limitations. </b>MD, arthritis, shaking, broken arm or other temporary injuries, age.<b> </b></li> </ul> <p>According to the <a href="">Website Content Accessibility Guidelines</a> (WCAG) developed by the World Wide Web Consortium (W3C), we can build accessible websites by adhering to the POUR principles:</p> <ul> <li><b>Perceivable.</b> Users must be able to perceive the website’s content, which means providing text for those who cannot hear, and audio for those who cannot see.</li> <li><b>Operable.</b> Users must be able to operate the website with a variety of tools, which means keyboard navigation and screen readers must be available.</li> <li><b>Understandable.</b> Website content and functionality should be clear, concise, and easy to understand.</li> <li><b>Robust.</b> Websites should work properly across all devices and browsers.</li> </ul> <p>An accessible website connects with a wider audience, contributes to more inclusive workspaces, and conforms to the Americans with Disabilities act (ADA) which protects disabled persons from discrimination. It’s easy to see, however, that applying the POUR principles improves user experience across all audiences.</p> <h2>Usability <i>is</i> accessibility</h2> <p>Traditionally, usability and accessibility have been treated as two separate disciplines with a small region of overlap. Upon close inspection, however, it’s clear that they aim towards the very same goals: delivering better experiences for users.</p> <p>Web accessibility focuses on specific technical and functional aspects of creating interfaces for users with disabilities. Building robust digital experiences, however — with keyboard navigation, alternative to audio, clear design, easy-to-understand content, and objectively intuitive interactions — will benefit all of your audiences. By raising the standard of usability to a level where persons with disabilities can interact with our digital products, we guarantee a better experience for everyone.</p> <p>Creating an accessible user experience isn’t just a theoretical approach to interface design. We’ve developed a collection of practical, easy to implement accessible user experience guides that focus on particular elements of digital product design from links, forms, and tables, to icons, menus, and much more.</p> <p>Here’s three to get you started:<b> </b></p> <h3>Don’t hide content</h3> <p>Users will not absorb a lot of content at one time — and they don’t want to hunt for pertinent information. Interface designers sometimes try to “cheat” these principles by cramming important information into hidden elements or forcing users to learn novel interactions that expose additional content. When important content isn’t readily available, users can become confused and frustrated. Worse still is the potentially disastrous effect on keyboard navigation, screen readers, and other assistive technologies. Here are some of the worst offenders:</p> <ul> <li><b>Image carousels.</b> Carousels are essentially mystery navigation. The user must click through or wait as images auto-advance to find out whether the content is relevant to them — most won’t do either.<b> </b></li> <li><b>Tooltips.</b> Placing important information behind an interaction (click, hover) is a great way to make sure users <i>don’t</i> see it.</li> <li><b>Form labels </b><b><i>inside</i></b><b> form elements.</b> This may <i>seem</i> streamlined, but their disappearance can confuse and frustrate users.</li> <li><b>Tabbed product or service comparisons.</b> It is difficult to compare one body of content with another if we can’t see them at the same time.</li> </ul> <p>Important content shouldn’t be hidden. Users shouldn’t have to guess, memorize, or experiment in order to use your website.</p> <figure role="group"> <div alt="Example of form labels inside and outside of form elements" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-embed-display-settings="large" data-entity-type="media" data-entity-uuid="d6e0eb99-47e8-4332-88f3-43afec2caeb3" title="Form labels" data-langcode="en" class="embedded-entity"> <img src="/sites/default/files/styles/large/public/2021-10/Screen%20Shot%202021-10-05%20at%203.28.24%20PM.png?itok=T0J4yky7" alt="Example of form labels inside and outside of form elements" title="Form labels" typeof="foaf:Image" /> </div> <figcaption>Left: example of form labels inside of form elements; Right: example of form labels outside of form elements</figcaption> </figure> <h3>Design consistent menus</h3> <p>Menus are the backbone of a website. They shouldn’t rely on subtle visual cues, complex controls, or novel interactions to send users on their way — <i>and they need to be consistent across devices</i>. In a <a href="">consumer study led by Google</a> that investigated media consumption, 90% of digital media users reported beginning a task on one device and resuming that task on a different device.</p> <p><div alt="graphic portraying that 81% of Americans use smartphones" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="d3f26e00-b36c-4771-836f-f9f1de78f749" data-langcode="en" title="Smartphones 1" class="embedded-entity"> <img src="/sites/default/files/2021-10/Screen%20Shot%202021-10-04%20at%203.42.10%20PM.png" alt="graphic portraying that 81% of Americans use smartphones" title="Smartphones 1" typeof="foaf:Image" /> </div> </p> <p>If your menu changes significantly between mobile and desktop, you’re frustrating users. Avoid these pitfalls:</p> <ul> <li><b>Different device, different menu.</b> Navigation on mobile should mirror desktop navigation as closely as possible both in interaction style and structure. Otherwise you can bet you’re frustrating multi-device users.</li> <li><b>Hover menus.</b> These can be annoying for the most nimble fingered among us, and since there is no hovering on mobile they imply inconsistent navigation across devices.</li> <li><b>Split buttons / dual purpose buttons. </b>Does the <i>About Us</i> navigation item drop down a submenu <i>and</i> serve as a link to the <i>About Us</i> page? You can bet plenty of your users don’t know that.</li> <li><b>Ambiguous interactions.</b> Will clicking <i>Men’s Clothing</i> expand a submenu? Or load the <i>Men’s Clothing</i> page? Menu interactions and links to content should be visually distinct.</li> </ul> <p>Users should intuitively know what’s going to happen when they click a menu item. They should be able to easily and confidently traverse your menu with straightforward mouse, keyboard, or assistive technology interactions.</p> <h3>Avoid overly architected experiences</h3> <p>Here’s <a href="">Jakob Nielsen</a>’s #1 Law of UX: <i>Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. </i>Translation: Don't reinvent the wheel.</p> <p>If users need to invest extra time and attention into interacting with your site, many simply won’t. Avoid these common mistakes to keep your users happy:</p> <ul> <li><b>Overly complex interactions.</b> Animations or visual effects (sliding, fading, etc) may look cool the first time you see them, but they quickly become irritating obstacles between users and their interactions.</li> <li><b>Rigid user flows.</b> Forcing users into pre-architected experiences (consumers vs. distributors, national vs. international clients) frustrates anyone who doesn’t easily identify with one of your categories.</li> <li><b>Novelty for its own sake.</b> Introducing novel styles for standard elements like links and bulleted lists — or using fonts and patterns meant above all to create an impression — often just annoys and slows down your users.</li> <li><b>Multiple architectures. </b>When links to the same page exist in two or more menu locations, it’s likely your site is poorly organized or organized along multiple schemas, both of which can confuse and frustrate users.</li> </ul> <p>Above all your digital platform should feel familiar and intuitive to users. That sense of natural usability largely relies on adhering to established norms, building interfaces in styles users already have experience with, and avoiding the temptation to “create a novel experience.”</p> <hr /> <h2>More on the accessible user experience</h2> <p>Every overly complex interaction, counterintuitive navigation, or extra hurdle between users and their goals is exponentially compounded for disabled persons who rely on assistive technologies. Designing to accessibility standards and around the POUR principles grounds your website on solid usability fundamentals, and better connects all of your users with high value interactions.</p> <p><a href="">Get in touch with Aten Design Group</a> for the latest on accessible user experience guides including best practices for icons, tables, links, scannable text and more.</p> <!-- google doc id: 1woGD_rVMKTiDyRtSsFm88vBmm1v-n1BpRUB4zBsWzco --></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> <a href="/about/trevor-calabro" hreflang="en">Trevor Calabro</a> Tue, 05 Oct 2021 21:09:27 +0000 Trevor 10333 at Aten & the Blind Institute of Technology: An Exciting Partnership <span>Aten &amp; the Blind Institute of Technology: An Exciting Partnership</span> <figure> <picture> <source srcset="/sites/default/files/2021-08/aten-and-bit_0.png 1x" media="(min-width: 1860px)" type="image/png"/> <source srcset="/sites/default/files/2021-08/aten-and-bit_0.png 1x" media="(min-width: 1540px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_large/public/2021-08/aten-and-bit_0.png?itok=qlu2_HWl 1x" media="(min-width: 1265px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-08/aten-and-bit_0.png?itok=NKL7K-xU 1x" media="(min-width: 1024px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-08/aten-and-bit_0.png?itok=NKL7K-xU 1x" media="(min-width: 768px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-08/aten-and-bit_0.png?itok=NKL7K-xU 1x" media="(min-width: 600px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-08/aten-and-bit_0.png?itok=-oJK2yB8 1x" media="(min-width: 500px)" type="image/png"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-08/aten-and-bit_0.png?itok=-oJK2yB8 1x" media="(min-width: 0)" type="image/png"/> <img src="/sites/default/files/2021-08/aten-and-bit_0.png" alt="Image of Aten and Blind Institute of Technology logos" 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, 08/30/2021 - 13:24</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"><h2>A human-centered approach to web accessibility</h2> <p>Accessibility looms large in my life. Growing up I was extremely close with a cousin my age who suffered from a rare form of Duchenne Muscular Dystrophy. With extremely limited mobility in her later years, it became incredibly difficult to reliably interact with various mobile assistive devices or speak loud enough for talk-to-type programs like Dragon or SIRI. She often had to resort to asking for help with homework, navigating the internet, or even just listening to music on an iPod. It frustrated her immensely. I have always wanted to relieve her of that stress.</p> <p>Leading Aten’s Accessibility and Quality Assurance department over the past year and a half has been so rewarding. Not only have I been able to pursue the highest standards of web accessibility for our clients, but I’ve also been able to dive deeper into the relationship between usability and accessibility. Advocating for the highest standards of both usability and accessibility creates much needed autonomy for users with disabilities — while simultaneously improving the web experience for everyone.</p> <p>When digital products are built with a keen focus on users with mobility or sensory limitations, the result is a far more robust, understandable, and usable platform for everyone. And while the myriad of online accessibility evaluators like <a href="">WAVE</a> are helping everyone dip their toes into the world of accessibility, I have long felt that <i>working with users who by necessity utilize assistive technologies </i>is the most important accessibility test of all.</p> <p>That’s one of the biggest reasons that I’m so excited to be working with <a href="">The Blind Institute of Technology</a> (BIT), headquartered right here in Denver, Colorado.</p> <h2>The Blind Institute of Technology</h2> <p>I attended a BIT Symposium in the spring of 2018, just weeks before the WCAG 2.1 was finalized. It had been a decade since the publication of WCAG 2.0, and it seemed like the industry was finally taking a fresh interest in web accessibility and assistive technology. Listening to <a href="">Mike Hess</a>, Founder &amp; Executive Director of BIT, speak about his background, personal life, and his journey to change stigmas and misperceptions around disabled professionals was incredibly inspiring.</p> <figure role="group" class="align-center"> <div alt="Mike Hess, BIT founder, presenting to Aten staff " data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-type="media" data-entity-uuid="79597e70-6f8f-4704-8cab-9d086687d4e2" data-langcode="en" title="Mike Hess, BIT Founder" class="embedded-entity"> <img src="/sites/default/files/2021-09/Aten%20Design%20Group%20Summit%20Nikki%20A.%20Rae%20July%202021%20web%20res-185.jpg" alt="Mike Hess, BIT founder, presenting to Aten staff" title="Mike Hess, BIT Founder" typeof="foaf:Image" /> </div> <figcaption>Mike Hess, Founder &amp; Executive Director of BIT, presenting to Aten team</figcaption> </figure> <p>Mike founded BIT to advance professional opportunities for people with disabilities. He’s built successful partnerships with Fortune 500 companies across the nation, creating value, inclusivity, and empathy that improves workforces through diversity. BIT’s impact has been impressive.</p> <p>Frontier Airlines, DaVita, Sales Force, the Colorado School of Mines and others presented about their partnerships with BIT during the Symposium. Each speaker in turn talked through how — with the help of BIT and Mike Hess — they had creatively overcome limitations in their digital products or work models to introduce more accessible and more inclusive technology. More than ever before large and influential organizations were waking up to the needs of their users through real-life collaborations with the people who need accessibility technologies the most. I wanted in. It wasn’t long before I spoke with Mike about how we might support each other in our missions.</p> <h2>Aten &amp; the Blind Institute of Technology: An exciting partnership</h2> <p>I’m so thrilled that Mike was as enthusiastic about an Aten / BIT partnership as I was. Through this partnership we’re able to inject real-world accessibility evaluations at the ground level of digital projects, share the incredible work BIT is doing on the frontier of inclusivity with our clients, and pursue an approach to web accessibility that truly keeps users at the center of the process.</p> <p>We’ve been working closely together since the beginning of the year, and it has been such a productive and rewarding collaboration. BIT and Aten have already co-presented at a variety of in-person events and webinars, and we’re so excited to continue building awareness and familiarity around web accessibility. With the help of BIT’s uniquely qualified perspective and their capacity for human-centered accessibility testing we’re able to deliver incredible value to clients who have prioritized web accessibility, inclusivity, and ADA compliance. Through this exciting partnership we’re able to offer:</p> <ul> <li>Accessibility focused user testing via BIT’s uniquely qualified team of assistive technology users</li> <li>Expert guidance and custom responses to accessible code and / or accessible functionality related questions</li> <li>Assurance that your digital project is vetted by true accessibility experts from ideation through architecture, design, and development</li> </ul> <p>We’ve already worked with BIT to evaluate and improve web accessibility across a host of digital products ranging in focus from grassroots political advocacy through family planning, early development, to higher education — including obtaining authorization for one client to distribute digital curriculum in Texas amidst some of the most stringent ADA requirements in the nation. I’m so excited about where this is going.</p> <p>Between our partnership with BIT, the forthcoming WCAG 2.2 release (likely this summer), and our fast-growing Accessibility and Quality Assurance department — there’s a lot to look forward to from Aten on the web accessibility front.</p> <p>Are you considering a new digital project or an accessibility assessment on an existing product? <a href="">Let’s work together.</a></p> <p> </p> <!-- google doc id: 1_c9w9OLwAuOp0JFL91GZ213I62BbPbTxBOcBzCLhA7U --></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Mon, 30 Aug 2021 19:24:40 +0000 Michaela Blackham 10300 at A User's Guide to Accessibility Widgets <span>A User&#039;s Guide to Accessibility Widgets</span> <figure> <picture> <source srcset="/sites/default/files/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg 1x" media="(min-width: 1860px)" type="image/jpeg"/> <source srcset="/sites/default/files/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg 1x" media="(min-width: 1540px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_large/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=hNk-FV7C 1x" media="(min-width: 1265px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=XcJLsysj 1x" media="(min-width: 1024px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=XcJLsysj 1x" media="(min-width: 768px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_medium/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=XcJLsysj 1x" media="(min-width: 600px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=9dnocglW 1x" media="(min-width: 500px)" type="image/jpeg"/> <source srcset="/sites/default/files/styles/responsive_small/public/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg?itok=9dnocglW 1x" media="(min-width: 0)" type="image/jpeg"/> <img src="/sites/default/files/2021-05/ACCESSIBILITY%20WIDGET_02_0.jpg" alt="" typeof="foaf:Image" /> </picture> </figure> <span><a title="View user profile." href="/user/1558" lang="" about="/user/1558" typeof="schema:Person" property="schema:name" datatype="">jenna</a></span> <span>Thu, 05/13/2021 - 09:43</span> <a href="/blog/category/accessibility" class="tag" >Accessibility</a> <a href="/blog/category/content-strategy" class="tag" >Content</a> <a href="/blog/category/design" class="tag" >Design</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>Accessibility widgets don’t provide an optimal experience for users. There are plenty of practical, technical reasons why accessibility overlays and add-ons simply can’t make the grade (more below) — but it boils down to relying on <i>an after the fact solution</i>, a cheap alternative to thoughtful, intentionally crafted digital experiences that are accessible to everyone.</p> <p>The importance of accessibility is hard to overstate. Digital experiences permeate our lives: from food &amp; grocery delivery to medical care, entertainment, communication, and distance education — apps, websites, and mobile interfaces are our direct connection to the public and private services intertwined in our day-to-day lives. Producing digital content that’s accessible to everyone doesn’t just demonstrate that you’re part of the push towards a wider, more inclusive internet for people all along the spectrum of physical and cognitive capacity — it’s a legal mandate. The <a href="">Americans with Disabilities Act</a>, established in 1991, requires <i>public accommodation and commercial facilities to be designed, constructed, and altered in compliance with [the following] accessibility standards. </i></p> <p>When it comes to digital products, the accessibility standards in question are the W3C’s Web Content Accessibility Guidelines, or just WCAG for short. The latest standards — <a href="">WCAG 2.1</a> — lay out specific guidelines for structuring HTML code in such a way that standard accessibility features can properly interpret your content and users along a range of capacities can interact with your products and services.</p> <h2>How accessibility widgets “work”</h2> <p>Accessibility widgets look for improperly structured HTML code in your website, then attempt to apply generally applicable fixes that bring your website “up to code” according to automated scanners that look for WCAG compliance. This could mean automated creation of alternate text for images, rearranging elements of your HTML code to be in the right order, injection of Accessible Rich Internet Application code (<a href="">ARIA</a>) into HTML elements that should contain it, or a variety of other changes. Some accessibility widgets alter the CSS stylesheets that control the look and feel of your website, introducing larger fonts, high contrast colors, and other adjustments aimed at the visually impaired.</p> <pre> <div class="geshifilter"><pre class="xml geshifilter-xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"oak-tree.jpg"</span> <span style="color: #000066;">height</span>=300 <span style="color: #000066;">width</span>=300<span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #808080; font-style: italic;">&lt;!-- This image is missing the "alt" tag --&gt;</span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"oak-tree.jpg"</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">"Decorative image"</span> <span style="color: #000066;">height</span>=300 <span style="color: #000066;">width</span>=300<span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #808080; font-style: italic;">&lt;!-- The "alt" tag automatically added --&gt;</span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"oak-tree.jpg"</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">"An oak tree in a field"</span> <span style="color: #000066;">height</span>=300 <span style="color: #000066;">width</span>=300<span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #808080; font-style: italic;">&lt;!-- The "alt" tag added by a human --&gt;</span></pre></div></pre> <p>Check out the example above. The first line represents an incorrectly crafted <em>image</em> tag, which is missing the required alternate text and would trigger a WCAG compliance checker. The second line represents an automatic fix which could be performed by software, and the third line represents the correct <em>alternate text</em> as crafted by a human familiar with the content. The automatically fixed HTML markup won't trigger warnings from WCAG compliance checkers (because the <em>alt</em> attribute is not missing), but it may not help real users consume the content, either. In this example, the automatically added alternate text for the image doesn't deliver the right meaning of the content to screen readers: <em>An oak tree in a field.</em></p> <p>With accessibility widgets, the source code of your website remains unchanged. The automated adjustments are introduced “on the fly” using client side technologies like Javascript — technologies that run in the user’s browser and introduce the quick fixes after your website fully loads but before it’s presented to the user. This “extra step” has a performance tax that slows down load times and could make your site respond more slowly to user interactions.</p> <p>Also, it’s important to note that while automating changes to your website’s HTML markup could bring it “up to code” per WCAG compliance scanners, it doesn’t consider the real people and real needs the standards are intended to address in the first place. Perhaps that’s why of the 3350 digital accessibility lawsuits in the USA last year, <a href="">some 250 were brought against platforms using accessibility widgets</a>.</p> <h2>Widget wonderland: How automations frustrate user experience</h2> <p>Accessibility widgets use automated technologies to scan your website’s code, find problematic and non-compliant HTML markup, then apply preprogrammed fixes. The result in some cases is “compliant” as far as popular <a href="">automated WCAG compliance</a> scans go, but it rarely resolves the obstacles to intuitive human interaction. That’s because it’s extremely difficult for an automated program to discern the <i>intent of the website designer</i> and apply the appropriate structure, alternate text, ARIA attributes, and other accommodations that expose that intent to users with varying needs.</p> <p>In our collaborations with the <a href="">Blind Institute of Technology</a>, we’ve surfaced a variety of complaints about accessibility widgets from real users that routinely take advantage of standard accessibility features:</p> <ol> <li>Accessibility widgets often require configuration &amp; customization in order to begin working, which means completing an extra step before users can begin to interact with your content, product, or services.</li> <li>A majority of the guidelines in WCAG cannot be properly applied by automated tools alone. The purpose of an image or the intended order of menu items, for example, need to be explained by real humans with context around your content.</li> <li>Every accessibility plugin is different which means users must configure new plugins and widgets for each new website visited, rather than simply relying on websites to independently comply with WCAG standards that enable native browser accessibility features.</li> <li>Accessibility widgets can have an overwhelming amount of options and customizations including image magnification, color scheme changes, proprietary screen readers, font changes and more. Many of these are unnecessary and complicate direct access to content.</li> </ol> <p>Mike Hess, Founder and Executive Director of the <a href="">Blind Institute of Technology</a> — and a screen reader user — adds yet another voice to the choir:</p> <p>“Website overlays high-jack the user experience, attempting to display the site in a way <i>it</i> thinks is helpful to me. Many overlays sit at the top of the page and continuously send audio announcements to the screen reader asking the user to engage the tool. These alerts constantly interrupt the audio when the webpage is [already] being read.”</p> <p>Accessibility widgets may help websites report “compliance” against automated scans, but they do very little to address the core problems and <i>make digital content accessible</i> for users with varying needs.</p> <h2>The alternative: Design, build, and alter your website with users in mind</h2> <p>Accessibility and usability go hand in hand — both are the product of thoughtful, informed, and standardized approaches to website structure, layout, design, and interaction. In much the same way that building safer, better homes and offices means adhering to national and local building codes, crafting digital experiences that are accessible to everyone begins with meeting standards like WC3’s WCAG. <a href="">Accessible content is better content for all of your audiences</a> — and investing in affordable, incremental improvements to your HTML templates, stylesheets, and content management systems can have far reaching benefits for your users regardless of their individual physical capabilities.</p> <p>Accessibility widgets are often touted as affordable alternatives to restructuring your web content, but the monthly rates (from ~$50 to about $300 a month in many cases) do more to silence the alarm bells of automated compliance tests than to solve core issues for real-life users.</p> <p>Accessibility audits, accessibility workshops, and incremental improvement plans can have long lasting effects on your website, your team, and the way your organization engages with audiences of all kinds. And the team at Aten can help. <a href="">Get in touch</a> with us to learn more. </p> <p>Want to learn more about accessibility on the web? Check out my recent webinar "Accessibility Testing in Practice" that covers the basics of assessing a website.</p> <p><div data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="a6b352a8-ebd2-4bc6-ae32-58bac2716121" 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=";start=0&amp;rel=0"></iframe> </div> </div> </figure> </div> </p> <!-- google doc id: 1lFCqXh8mBSzKW10XSoxTVd8lI5X5v32aVFw6fYo9ncA --></div> <a href="/about/michaela-blackham" hreflang="en">Michaela Blackham</a> Thu, 13 May 2021 15:43:22 +0000 jenna 10260 at Create better, more accessible content with the 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="">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="">CKEditor Accessibility Checker demo</a>, then <a href="">download the Drupal 8 module</a> or visit the <a href="">Accessibility Checker download page</a> to find installation instructions for other platforms.</p> <h2>Accessible content is better content</h2> <p>Accessibility and inclusion on the web are huge and growing topics. With about <a href="">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="">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> <h2>The weak link: user generated content</h2> <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> <h2>Produce better content today</h2> <p>Take a look at the <a href="">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="">Edmund Dunn</a> as a maintainer on the <a href="">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 Building accessible menus for <span>Building accessible menus for</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="">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="">Michaela Blackham</a>, our resident Accessibility and QA specialist. Michaela manually tested 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="">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 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=""><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> 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 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="">WebAIM</a> for excellent web accessibility material, <a href="">install their Chrome extension</a> to begin to see how your website stacks up, or <a href="">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 How to write good alternative text (alt text) for 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="">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="">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 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="">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=";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 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="">Michaela</a> will be sharing how to <a href="">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="">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="">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 A Holistic Approach to 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="">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="">Lighthouse</a>, <a href="">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="">The Importance Of An Accessible Website - Part 1: Who Needs an Accessible Website?</a> </li> <li> <a href="">The Importance of an Accessible Website - Part 2: How Can Your Team Get Involved?</a> </li> <li> <a href="">The Importance of an Accessible Website - Part 3: Make Your Drupal 8 Site More Accessible</a> </li> <li> <a href="">The Importance of an Accessible Website - Part 4: Wrap Up</a> </li> <li> <a href="">Accessibility Audits</a> </li> </ul></div> Wed, 05 Jun 2019 13:54:28 +0000 Christine Coughlan 2552 at 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="">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="">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="">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="">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="">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