When we think about accessibility most of us think about screen readers but there's a lot more. The automated and manual techniques are a starting point. After you make all the changes suggested by the tools you still have to make decisions about your content. This is the beginning of my learning accessibility. Will report back along the learning path :-. Links and Resources - Accessibility - ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watsonhttps://www.youtube.com/watch?v=qdB8SRhqvFc - Leonie Watson: Using ARIA to solve everyday accessibility problemshttps://www.youtube.com/watch?v=gQADBOsjBTM - ARIA - Using ARIAhttps://w3c.github.io/using-aria/ - Best Practices - WAI-ARIA...
Now that we've created accessible components. Now we get to test them. To test accessible components we'll use 3 tools: The Accessibility Audit built into Chrome Dev Tools aXe and aXe Coconut from Deque Systemshttps://www.deque.com/ Screen Readers Lighthouse Accessibility Test In recent versions of Google Chrome, there is a new Audits panel in Dev Tools. I start here because it uses Lighthouse to run the test and aXe Core under the hood so, unless you have specific requirements why aXe Core or Coconut are required, this may be the only tool you need outside of a screen reader. To get...
Rather than reinvent the wheel I'll look at two collections of accessibility best practices: WAI-ARIA Authoring Practices 1.1https://www.w3.org/TR/wai-aria-practices-1.1/ and Ebay's MIND Patterns: Accessibility Patterns for the Webhttps://ebay.gitbooks.io/mindpatterns/ suggested by Rob Dodson. we will take the accordion example from the ARIA Authoring Practices and explore what we need to have in an accessible component. Note that, as of this writing, MIND does not have suggestions for an accordion element. This is a longer exercise than the one we did for the button demo earlier. Longer because of the element complexity, because there are many more moving parts and because there is...
Using ARIA Accessibility is one of the most important aspects of development and one that we don't pay as much attention as we should. We will look at ARIA Accessible Rich Internet Applications, what it is and how we can use it in our content to help improve the accessibility of web applications and pages. we will also discuss When it's better to use native elements and DOM interactions rather than create our own. we will also look at ARIA best practices and authoring guidelines. These are particularly suited to custom elements and components we create using Polymer or React-based...
HTTP/2 is the later evolution of the HTTP protocol that powers the web. It's main goal is to improve performance and latency over existing HTTP 1.1 implementations. For more details see Ilyia Gregorik's High Performance Browser Networking chapter on HTTP/2https://hpbn.co/http2/ HTTP/2 landed in Node.js 8.4 behind a flag. With Node.js 9, it became an experimental part of Node core, still at stability 1. This is the version we'll be working with. Do not run production workloads using this API yet, since it might change. Check the Node HTTP/2 API documentation for more information Getting an SSL certificate for localhost While...
I'm still surprised that things haven't changed for epub. Via Twitter, I saw David Bergsland's articlehttp://www.bergsland.org/2017/11/christian-writing/ebook-future-grows-complex/ that, in turn, referenced Teresa Elsey's ePUB Secrets posthttp://epubsecrets.com/w3c-publishing-summit-2017-an-ebook-devs-view.php I haven't done serious work on epub in a while but the playing field hasn't changed much since I did my last book about 4 years ago. Some of the issues remain the same and some issues are new and originate, in my opinion, from the merger of the IDPF and W3C or haven't been addressed since that time. Unless otherwise noted, all quotes are from Teresa Elsey's ePUB Secrets posthttp://epubsecrets.com/w3c-publishing-summit-2017-an-ebook-devs-view.php. The Article > “Many...
I've been playing a little with Open Type font variations and their CSS equivalents for a few weeks now and I've revisited a few areas I had played with before and left because, at the time, I didn't see the need or usefulness. That said, there are projects where good typography is just as important than size, line height, and other basic elements. In this essay, we'll look at some less common features of OpenType fonts and how to use them in CSS, both the original specification using font-feature-settings and the newer version using font-variants-. We'll also look at ways...
I've done some prior work with Webpack and, while I still have my reservations, it's worth taking a look at it again from a different perspective. As I was working on my research on how to automate UI localization I came across a Webpack project and thought it'd be interesting to look at Webpack again and how to build an application around it. This is far from a perfect project. Currently, the assets are 1.7MB and I haven't figured out if I need to do further Webpack processing or if it's about how the CLDR Javascript is written. I will...
The following tweets, products of an earlier request for comments on an essay about ebooks, started an interesting line of thinking. Re: image quality, as a book publisher whose backlist is pre-digital, our problem is generally that we don’t have high-enough-res source art.— Teresa Elsey @teresaelsey December 11, 2017 <>If we're lucky we have a digital file for what appears in the original print book! Often we're scanning a print book to recreate the assets ...— Teresa Elsey @teresaelsey December 11, 2017 After the initial thought that poor archival practices can bite you hard I started thinking about a solution...
Puppeteer is a project from Chrome's Devtools team to provide a high-level way to automate running Chrome in Headless mode Chrome running without a graphical user interface. Headless browsers provide automated control of a web page in an environment similar to regular Chrome, but executed via a command-line interface or using network communication. The idea behind headless browsers like PhantomJS, Headless Chrome or He adless Firefox is to automate tasks like testing and doing screenshots of the page visited. As we go through some of these examples we'll explore the Puppeteer API in some but not all details. For a...
