Archives

Home » Blog

WordCamp Buffalo Slides: Selfish Accessibility

This post originally appeared on my blog.

Photo of Buffalo WordCamp t-shirt.
The Buffalo WordCamp shirt was again printed by You and Who (whose logo is visible where the tag would be), which means that 1,600 meals were donated (one for each shirt) to those in need. I think every WordCamp should do this. (related tweet)

Buffalo WordCamp has just wrapped up and folks are hopefully going to take new ideas back to their own projects. There were many great talks and even panel discussions that turned into more of a WordPress support group for the audience and panelists alike. A first for Buffalo WordCamp that I hope they repeat. Also a plus, 48% of the attendees and 35% of the speakers were female, better ratios than I’ve seen at many other conferences.

My Slides

If you just come for my slides, then you are at the right spot. I’ve embedded them here, or you can go see them at SlideShare. In addition to questions and feedback from the audience, I’ve already gotten some feedback from the Twitterverse. In particular my use of the word “continuum” on slide 77. I am open to suggestions for a better word, so feel free to share.

Photos

I grabbed some photos from the event as well, captioned below (originally posted on my Tumblr, where they are larger).

Panoramic view of Canisius College Science Hall
This year the event was held in the new Science Hall at Canisius College. This is the atrium where lunch was served and announcements were announced (shot taken shortly after the lunch crush).
The crowd at the start of the event.
Some of the announcements being announced by announcers and co-organizers Ben Dunkle and Andy Staple.
The breakfast table.
A nice spread of pastries to get the day going. I am amazed I only ate one.
Attendees for my talk.
Accessibility talks never net a huge crowd, but at least those who did show up wanted to learn more, had good questions, and challenged me.
My shirt.
After a quick Twitter poll, I broke from my normal pattern of wearing more professional attire and went with the Montgomery Ward mechanic’s shirt with the fur collar.
My badge and the schedule
The badge had the day’s schedule printed on the back (handy), and they also provided a printed schedule (also handy).
Cemetery
View of the cemetery from one of the talks.
Buffalo skyline.
A view from the after-party at Western New York Book Arts Center.
Type bits.
Some sample type at Western New York Book Arts Center. If you’ve never been and you are at all interested in type, you should visit.

Adrian Roselli’s Upcoming Speaking Gigs

One of the things I enjoy about my job is having the opportunity to share my knowledge and experience (and get corrected). This year already started out well with my talk at HTML5 Developer Conference back in May. Happily I have five more speaking engagements coming up in the next couple months.

WordCamp Buffalo

On Saturday, September 13, I will have the pleasure of speaking at WordCamp Buffalo for its (and my) third year. Based on the speaker line-up there will be plenty of great topics, so I look forward to being an attendee as well. My talk this year will be about accessibility.

If you are new to WordCamp Buffalo, a quick overview:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

Tickets are available now, so you have plenty of time to prepare for heckling me. This year the event is being held at the new Science Hall on the Canisius College campus. A map is embedded below, and information on metro stops, hotels, and parking is available on the WordCamp Buffalo site.

Accessibility Camp Toronto

I am excited to say that I will be speaking at Accessibility Camp Toronto in late September. It probably goes without saying that I’ll be speaking on accessibility. Given Toronto’s proximity to my home town of Buffalo, and the fact that I used to wander up to Toronto about once a month, it will be nice to visit a city I’ve neglected for a couple years now.

Instead of re-stating what Accessibility Camp Toronto is all about, I am going to cheat and quote the site directly:

Focusing on users with different disabilities, sessions can cover digital accessibility topics from the web (technical to tactical), desktop software, mobile apps, eLearning, online gaming, open source innovations, and everything in between. Watch this brief video from the first Accessibility Camp Toronto to get a feel for what to expect during the day. Also, video recordings from the 2013 camp are available.

Regardless of your level of knowledge, this event is for you. It will be a great opportunity for members of the design/development, usability, accessibility, other IT and end-users with disabilities communities to interact and learn from each other. We recommend you browse the Frequently Asked Questions, especially if you have never attended a participant-driven BarCamp/unconference before.

Please support the event with a $5 suggested donation at the door. Your donation will help cover the costs for miscellaneous expenses – event materials, food, etc.

Please follow event updates on Twitter via @a11yto.

Make sure you register as it is my understanding that the event is three quarters full. If you don’t follow @a11yto for updates, at least check in on the #a11yto hashtag.

The nitty gritty: the event is held from 9:00am until 4:00pm on Saturday, September 27, 2014. It is being held at OCAD University, 100 McCaul Street, Toronto, ON M5T 1W1.

UX Singapore

By far the farthest-from-home of my speaking engagements to date, I’m thrilled to be speaking at UXSG (User Experience Singapore). Having attended its sister event, UX Hong Kong (UXHK), last year I can say that I am excited not just to speak but to hear from all the other great speakers who will be imparting wisdom, knowledge, and perhaps a few local dining suggestions.

For those not familiar with it, UXSG is a three day event intended to onnect UX professionals across disciplines and cultures. As one of the founders of evolt.org (way back in 1998), this statement from the conference organizers resonates with me: It is a platform made for and by UX professionals to foster stronger professional collaborations and personal friendships. Given that I made some great connections as an attendee at UXHK, I don’t doubt I’ll have a similar experience here.

I will be giving a lightning talk on the third day of the conference, Friday, October 3, at 11:00am Singapore time. I’ll be updating my “Selfish Accessiblity” talk for the UX audience. The abstract of my talk is posted at the UXSG site.

I’ve been to Singapore once before, but only for a day. This time I am looking forward to spending a little more time there and, in particular, experiencing the venue for the event, the relatively new Star Performing Arts Centre.

National Association of Government Web Professionals

Much as I would like to say that I will be speaking at the National Association of Government Web Professionals (NAGW, I don’t know where the “P” went, perhaps it was originally “Webmasters?”) conference in September, I won’t be. I was, however, asked to do a separate webinar for members for one of the conference topics I submitted — an intro to responsive web design.

As far as I know you need to be a member of NAGW to be able to attend the webinar, so I can’t share a URL, let alone a Google Map. I can, however, point you to the slides from a similar talk I gave last September: Slides: Responsive Web Design Primer

While the federal government may have its own crack web team now (or so the reports claim), state and local governments don’t have that same team and can’t as easily share their expertise. It seems NAGW fills a gap by providing a forum for these web professionals to share and help one another, as noted in its own description:

NAGW is the National Association of Government Web Professionals, an organization of local and state government web professionals working together to share knowledge, best practices, innovative ideas, and other resources. We collaborate on technologies, and network with other web professionals to improve our capacity to provide value across the web to our communities.

If you are a member, the webinar is Tuesday, October 21 at 11am mountain time. I hope I am able to provide some value to its membership, and if not, maybe they can be amused by how deftly I don’t do webinars.

Learning Choices Network

In a break from the last speaking engagements listed above, which have all been about web technologies and best practices, I get to list an event that isn’t about the web at all. Sorta.

Learning Choices Network (LCN) is a local (to Buffalo) organization focusing on alternative education such as self-directed learning and life-long learning. To let the organization speak for itself, this is from its Facebook page:

LCN exists to create, facilitate, and promote alternative opportunities for authentic learning in the local community while connecting educators, community advocates, parents, and business people who are seeking workable solutions for educational choice.

As someone who has built a career around the web, but for whom the web had barely sprung into existence when I started, being self-taught was the only option I had. For a sense of timing, Mosaic was released while I was in college (with Netscape Navigator soon to follow), so there weren’t classes to take, let along many with experience to help me get started. As I developed skills and started to rely on mailing lists to refine them, I co-founded evolt.org and started writing, trying to become the kind of teaching and training resource I never had. I have been following that approach ever since (I believe evidenced by this very blog).

I’ve followed the same learn-as-you-go model for when I co-founded my business, Algonquin Studios, 17 years ago as well as other companies we’ve spun off since then. Just as I formed evolt.org to help provide a resource like I didn’t have when I started, we’ve been spinning up VCAMP, our own local incubator/accelerator to help provide a platform for other business that we didn’t have when we started.

At the LCN event I will speak about how I started down my self-directed learning path, identified (and sometimes discarded) mentors, and somehow managed to be a (so far) successful entrepreneur when both the technology and economy have flolloped up and down like a mattress from Sqornshellous Zeta (sorry, it really is the best word to use). If you’re lucky, I’ll even (probably incorrectly) speculate on the future of education and learning, something for which I am woefully unqualified.

The event will be held from November 8 through November 10, 2014. Tickets are available online. The event will be held at Buffalo History Museum.

CSS Summit 2014 Slides: Making Your Site Printable

This post originally appeared on my blog on July 15.

CSS Summit

This afternoon I awkwardly stumbled through my talk for CSS Summit, Making Your Site Printable. I can tell you that speaking to a screen instead of to a room full of people is a whole different experience than I was expecting. Fortunately for you I do not have an audio/video recording. I do however, have all the slides.

Slides

Making Your Site Printable: CSS Summit 2014 from Adrian Roselli

Links

Links to resources referenced in the slides (in the order they appear):

Ticket Giveaway

I’d like to note that thanks to the generosity of CSS Summit, I was provided with two tickets to today’s talks that I could give away as I saw fit. I opted to offer them to two deserving young women from the Buffalo chapter of Girl Develop It (neither heckled me):

The Twitters

Finally, one of the novel things about an online conference is that attendees seem to be more active on Twitter. I got feedback and questions, and even fielded a few sub-tweets (I happen to know the print styles aren’t glamorous, but most of the fundamentals aren’t). I’ve collected the tweets in a Storify, which I have embedded here:

Update: July 21, 2014

Based on the activity from these two tweets alone, I am really hopeful that web developers are starting to see that print styles have value and belong in a responsive workflow. Only time will tell. The tweets:

Update to Verizon Using Disabilities to Fight Net Neutrality

In June I discussed rumors that Verizon was arguing, behind closed doors, that net neutrality harms those with disabilities.

Perhaps in reaction to the Verizon rumors, or just because the cause makes sense, on July 18 five different organizations related to accessibility filed their own joint comments with the FCC. The organizations are: Telecommunications for the Deaf and Hard of Hearing, Inc. (TDI), the National Association of the Deaf (NAD), the Hearing Loss Association of America (HLAA), the Deaf and Hard of Hearing Consumer Advocacy Network (DHHCAN)), and the Rehabilitation Engineering Research Center on Telecommunications Access (RERC-TA) along with Professor Clayton Lewis. Together they filed a brief, which you may read online (and which I have copied locally as I suspect this URL will be allowed to rot by the FCC), outlining their support of net neutrality. An excerpt:

[We] seek to promote equal access for the 48 million Americans who are deaf, hard of hearing, late-deafened, deaf-blind, or deaf with mobility or cognitive disabilities to the informational, educational, cultural, and societal opportunities afforded by the telecommunications revolution.

The letter outlines six arguments in particular, with far more detail in its sixteen pages:

  1. Retaining and improving transparency rules will improve the ability of consumers who are deaf or hard of hearing to access the Internet on equal terms.
  2. A no-blocking rule would help ensure the availability of accessible telecommunications services for consumers who are deaf or hard of hearing.
  3. The Commission should bar paid prioritization while ensuring that Internet-based services and applications are accessible to consumers who are deaf or head of hearing.
  4. Title II reclassification would afford the Commission additional flexibility to ensure that broadband services are accessible, and the Commission should exclude accessibility-related Title II provisions from forbearance if it reclassifies.
  5. The Commission should ensure that the enterprise services and premise operator exceptions avoid facilitating illegal discrimination against people who are deaf or hard of hearing.
  6. The Commission should ensure that the use of data caps do not result in discrimination against people who are deaf or hard of hearing.

The same day, the American Association of People with Disabilities and the National Council on Independent Living also filed their own joint letter with the FCC (also available from a non-FCC URL). In addition to an open internet, the letter argues for an ombudsman:

Over the past few years, Congress shifted the focus of universal service from mere availability to adoption and utilization. […] This important review of Open Internet policy provides an opportunity to ensure that people with disabilities have full and open access to broadband communications and enjoy the important consumer protections mentioned in our comments. […] An Ombudsman Office Can Monitor and Report on Access Issues Associated with Consumers with Disabilities

Ars covered the latter filing in its Tuesday, July 22 post, “Deaf advocacy groups to Verizon: Don’t kill net neutrality on our behalf.”

Hopefully these two are among the comments that will work their way to the top of the pile of the 1.1 million of comments the FCC has received (good luck finding them on your own). And then hopefully they’ll be read, and understood, as the FCC weighs the information in making a decision on net neutrality.

Changing YouTube Playback Speed

YouTube gives users the option to modify the playback speed of some videos. This is particularly useful in the case of videos that you are obligated to watch (training videos, terrible fan videos, the occasional conference talk, etc.) and want to get through quickly. You have the option to speed a video to one-and-a-half times normal speed and double normal speed. You can also slow a video to half speed or quarter speed, which can be handy when trying to draw out a training-over-lunch session.

In order to make a go of this, you’ll need to use the YouTube HTML5 player, which you can activate at http://www.youtube.com/html5 while logged into your Google account. If you worry about browser support (for both the HTML5 video element or the various codecs), the YouTube page will show you what your browser supports. In general, if you are using a current version of your favorite browser then you should be fine.

The opening image shows where the option lives. Sadly, that awesome video of Morrissey and George Michael doing film reviews has been pulled, so instead you can try it out on this video of Hitchcock’s The Lady Vanishes (I reference it in slide 58 of my Selfish Accessibility talk). The video also has closed captions and an audio description so it’s a great example of the accessibility features available for YouTube.

When at a video, click the gear icon at the bottom right and look for the Speed menu. If the video allows you to change its playback speed, it will be there with available options. This will only apply to the selected video. If you know of a setting to have it apply to all videos, please let me know.

If you still aren’t sure where this can handy, just try listening to Thundercats dialogue (particularly Panthro) at normal speed and then again at 1.5× normal speed. To me the difference is dramatic.

Verizon Using Disabilities to Fight Net Neutrality

This post originally appeared on my blog.

On Friday, Mother Jones reported that it has three sources saying that Verizon lobbyists are making a case on Capitol Hill that net neutrality harms those with disabilities. From Mother Jones:

Three Hill sources tell Mother Jones that Verizon lobbyists have cited the needs of blind, deaf, and disabled people to try to convince congressional staffers and their bosses to get on board with the fast lane idea. But groups representing disabled Americans, including the National Association of the Deaf, the National Federation of the Blind, and the American Association of People with Disabilities are not advocating for this plan. Mark Perriello, the president and CEO of the AAPD, says that this is the “first time” he has heard “these specific talking points.”

In the absence of seeing the language Verizon is using, I can only go on what Mother Jones reported (other news outlets covering this are linking back to Mother Jones). Given the amount of cash ISPs like Verizon are lobbying to kill net neutrality ($19 million in the first quarter of 2014 alone), I don’t consider this report to be far-fetched. Certainly Verizon is unlikely to make this argument in the open — there will be a backlash when no proof is offered and disability rights groups shoot it down (as has been happening just on these rumors).

It seems to me it is in the best interest of net neutrality to react as if this report is true. Further, it seems like a good idea to make it clear disabilities cannot be used as a pawn in some armchair morality action, no matter how well elected officials feel it may poll.

I was pretty quick to jump on this on Twitter, mostly out of anger, and given the retweets and favorites from my meager following (particularly from the accessibility community) I suspect I am not alone. Feel free to retweet it to your followers (or write your own):

A quick Google search (or use your own search terms) will net you many results from people who think Verizon’s reported argument is absurd (Won’t somebody please think of the childrendisabled?).

I don’t think my blog post, which ranks nowhere on Verizon’s radar, will do much to sway its nor the FCC’s opinion, but I do want to make sure I add to the growing chorus of people publicly denouncing something Verizon is arguing behind closed doors.

Related

In April I wrote a post about net neutrality (We Need to Raise a Stink about Net Neutrality) where I asked people to tweet to Tom Wheeler and the FCC. In it I include plenty of references and arguments, but this video from Last Week Tonight with John Oliver (which I amended to my original post) does a better job of explaining net neutrality:

As John Oliver suggests, you can leave our own comments at the FCC site. As of a week ago there were 49,206 comments. As of this writing there are 115,213 comments. Only the most recent 10,000 comments are available to be viewed, which I cannot explain. Further, if you want to consider accessibility, as Verizon seemingly does, you may want to also ask the electronically filed responses be made available in a format other than PDF.

Keep the Focus Outline

This post originally appeared on my blog.

Animated GIF screen capture of Virgin America site.
This animated GIF is a screen capture of cycling through every interactive element (mostly links) on the page using just the tab key. You’ll note that in all but one case, the only indication of any change is in the lower left in the browser’s status bar where it shows the URL of the destination link. The URLs ending in a “#” are the booking options.

Today’s rant is inspired by all the gushing over Virgin America’s new web site — just because it’s responsive.

To be fair to Virgin America, making its site responsive is a huge win for users whose primary method of booking is via a smartphone or tablet (or, god forbid, phablet or tablone). Its new site, however, is a huge step backward for users who rely on the keyboard as their primary method of interaction.

Virgin America’s CSS has a style to identify anchors with focus (yes, there are other elements that should get focus, but I am looking at just the most basic support): a:focus {outline: thin dotted;}

What’s so frustrating is that the useful style is then overridden with this harmful declaration: a:focus {outline: none;} This override greatly decreases the usability and accessibility of the site. Unfortunately, this practice is still common on many more sites across the web.

As a web developer, one of the simplest accessibility tests you can do is unplug your mouse. Two quick things to review as part of that: Can you interact with all controls with only the keyboard? Can you tell which item has focus?

Even if you aren’t motivated to run that simple test from an overriding sense of being nice to your users, there’s a legal concern here. As I wrote last week, the U.S. Department of Justice held H&R block accountable to Web Content Accessibility Guidelines 2.0 Level A and AA Success Criteria. That means there is case law for making your consumer-facing site comply or face penalties.

By excluding focus styles, Virgin America is running afoul of one of the AA Requirement 2.4.7:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

In short, if your site doesn’t make interaction elements obvious when accessed via keyboard, not only are you hurting users, you’re opening yourself up to litigation.

Further Reading

Again, this isn’t a new issue. It even has its own mini-site at OutlineNone.com, which offers these handy links:

To add another, this article, When Do Elements Take the Focus?, might be handy to understand just when you can expect to see :focus styles get applied by a browser.

Related

In March I wrote about how Google removed underlines from search result links. My concern there was that web developers might follow suit. Between removing keyboard focus indicators and underlines from links, I am amazed that developers do so much to make the core interaction element of the web essentially hidden to so many users. I am reproducing the list of related links here as they are relevant to the overall issue of keeping links usable:

My Efforts to Reach Virgin America (so far)

I may have contacted Virgin America on Twitter once. Or Twice. Or three times. Perhaps even a fourth time. And filed a bug with WebCompat.com. And left a comment at Wired’s article. I’ve embedded the tweets below so you an retweet if you are as whiny as I.

Update: June 27, 2014

On December 12, 2013 a rule became effective from the U.S. Department of Transportation (DOT) titled Nondiscrimination on the Basis of Disability in Air Travel: Accessibility of Web Sites and Automated Kiosks at U.S. Airports. That links points to the following section on accessibility:

Finally, we proposed a tiered implementation approach in which the WCAG 2.0 standard at Level A and AA would apply to (1) a new or completely redesigned primary Web site brought online 180 or more days after the effective date of the final rule; […]

As keyboard accessibility is one of the requirements of WCAG AA compliance, Virgin America’s new site does not honor this rule. However, if the Virgin site officially launched before June 10, 2014, then it squeaks by on a date technicality.

More information on the implications of the law are in the post New accessibility rules coming to airline websites. Are you ready?

Accessibility Regulation Confusion from U.S. Government

This post originally appeared on my blog.


There has been some activity lately from the U.S. federal government related to accessibility requirements for web sites. Unfortunately, that activity is sending a mixed message to many burdened with making a case for accessibility compliance in the private sector.

Good News

The U.S. Department of Justice (DoJ) made news in the accessibility community back in March by issuing a Consent Decree in a case with H&R Block requiring H&R Block to follow the Web Content Accessibility Guidelines (WCAG) 2.0. From the DoJ press release:

On Dec. 11, 2013, the Civil Rights Division and the U.S. Attorney’s Office for the District of Massachusetts filed a complaint in intervention in the lawsuit National Federal [sic] of the Blind (NFB) et al. v. HRB Digital LLC et al. to enforce Title III of the ADA [Americans with Disabilities Act]. […]

[…] The recognized international industry standards for web accessibility, known as the Web Content Accessibility Guidelines (WCAG) 2.0, can be found online and are freely available to help companies ensure that individuals with disabilities can fully and equally enjoy their web-based goods and services.

Under the terms of the five year decree, H&R Block’s website, tax filing utility and mobile apps will conform to the Level AA Success Criteria of the WCAG 2.0. […] H&R Block will also pay $45,000 to the two individual plaintiffs, and a $55,000 civil penalty.

Essentially the DoJ stepped into a lawsuit, identified an accepted standard to follow, and put some teeth in its action in the form of a financial penalty (both in cash and H&R Block’s cost to rebuild its offerings). For those who champion accessibility, this is a win.

It’s not the first. Back in 2012 the DoJ filed a Statement of Interest in a battle between Netflix (never mind that it’s in a PDF) and the National Association of the Deaf that the absence of closed captioning violates the ADA. Earlier this year it also filed a Statement of Interest in a case against Lucky Brand Jeans (another PDF) for its inaccessible customer-facing credit card swipe machines (which probably inhabit far more stores than just Lucky’s).

The DoJ has effectively been enforcing ADA laws for private entities, not just state and local governments. This is A Good Thing™

Bad News

Let’s ignore the fact that the DoJ can’t get the name of the National Federation of the Blind correct in a press release, or that the ADA site provides Statements of Interest from the DoJ as PDF files (you can learn some more about PDF accessibility at Denis Boudreau’s a11y Tips site).

The Laws

The DoJ was expected to release a set of legally binding standards for web site accessibility back in April. That deadline flew by with hardly a word from the DoJ. Instead, buried in a Unified Agenda (a catch-all planning document), The DoJ casually mentioned that it’s been delayed until March of 2015. You can credit Seyfarth Shaw LLP for catching that one.

As the Law Office of Lainey Feingold notes, this has been happening for years:

The web regulations have been pending since July 26, 2010 when the DOJ issued its Advanced Notice of Proposed Rule Making (ANPRM). The public comment period ended on January 24, 2011. Ever since then, the DOJ has been announcing deadlines for the next step — and then moving those deadlines as the target date approaches.

Enforcement

The H&R Block Consent Decree has some dates associated with adhering to the ruling. One of them (14.d) has come and gone:

  1. Web Accessibility Policy [underline theirs, not mine]: By June 1, 2014, H&R Block shall adopt and implement a Web Accessibility Policy consistent with the attachment at Exhibit A and as approved by the Private Plaintiffs and the United States. By June 1, 2014, H&R Block shall: […]
    1. make publicly available and directly link from the www.hrblock.com homepage, a statement of H&R Block’s policy to ensure that persons with disabilities have full and equal enjoyment of the goods, services, facilities, privileges, advantages, and accommodations of H&R Block, through www.hrblock.com, its mobile applications, and its Online Tax Preparation Product; […]

When I visit the H&R Block home page, I see no link or content related to accessibility, disabilities, nor the ADA (if I am wrong, please correct me). I even made an archived version from the Wayback Machine so you can see it in case H&R Block changes it tomorrow (see how you can make your own).

Granted, that requirement is only a week overdue, but given that the DoJ is four years overdue on issuing regulations, one could argue that deadlines don’t carry much weight with the DoJ.

Just Setting a Good Example

The DoJ site itself is not exactly a shining beacon of accessibility. From the odd image map on the logo (really, one image, two links to the same location?) to text as images, it could use some help. If you head over to the DoJ Acccessibility Information page you will see it states that the DoJ is committed to provide its content in accordance with Section 508 of the Rehabilitation Act.

If you’ve been working in web accessibility, then you may be aware of the government web site devoted to Section 508, which requires that Federal agencies’ electronic and information technology is accessible to people with disabilities, and which is intended to be used by federal employees: Section508.gov

As I challenged on Twitter, try using it with your keyboard. Go ahead. Just try it.

For the more technical among my readers, here’s an example of the CSS declarations of agony (files linked in this tweet):

For added fun, find the Skip link and then see where it takes you.

The government body in charge of creating rules for making sites accessible is built based on the requirements of a federal site that itself is a complete cluster. It may, in fact, be a brilliant parody site showing government workers how not to build a compliant site.

Or it might really be the best they can do.

What You Should Do

Keep coding (or start coding) your sites to meet Web Content Accessibility Guidelines 2.0 Level A and AA Success Criteria. This is the requirement the DoJ put in its ruling against H&R Block, the most recent example we have of where the federal government is defining a standard.

And then stop worrying. As WebAIM notes, fear of litigation isn’t the best reason to make a site accessible. You should do it because it’s the right thing to do. Of course, in my HTML5 Developer Conference talk, I argue that making accessibility all about you (slide 13) is probably a more effective means of getting developers to implement, but I leave that decision up to your personal level of narcissism.

Related

  • Assets, the accessible, Bootstrap-based development framework from the federal government (really from the Centers for Medicare & Medicaid Services).

Update: June 9, 2014

Read my post about Assets, the U.S. government framework based on Bootstrap 3, and PayPal’s accessibility plug-in, which promises to make your existing Bootstrap implementation accessible: Accessible Bootstrap Frameworks

Update: June 25, 2014

In a release last week from the National Federation of the Blind (NFB), the NFB and a bling business owner reached an agreement with the Small Business Administration because its web site violated Section 508 (read a brief from the law firm representing the NFB). This is newsworthy for two reasons:

  • The SBA is a government agency and is being held to the only current federal law pertaining to web site accessibility, effectively stating the government has to follow its own rules.
  • The Section508.gov site, the one housing the rules to which the SBA is being held, doesn’t follow those very rules, as I noted above.

I am struggling to find a way to describe how absurd this is. I am open to suggestions.

Accessible Bootstrap Frameworks

If you work much with accessibility, then you might consider the title of this post to be an oxymoron, a self-contradicting mess. Frankly, I tend to agree. Barring a compelling use case, I never start a project with Bootstrap and I resist including it when explicitly requested (so far successfully in nearly every case). Of a few reasons, accessibility is the biggest issue I have with it.

There are, however, a couple options to mitigate the accessibility mess that is Bootstrap.

I should note that this post is a follow-up to the Q&A after my talk at HTML5 Developer Conference, Selfish Accessibility, where I gave some advice about Assets which, at the time, was using Bootstrap 2 (it has since moved to version 3).

Assets.CMS.gov

Screen shot of Assets.cms.gov.
The Centers for Medicare & Medicaid Services (CMS), a division of the US government (specifically HHS), has emerged as an unexpected champion of accessibility for Bootstrap and made its own framework, Assets (first announced in late 2012). This may not be a surprise to many when you consider CMS’s role working with people who are older and/or in need of some form of medical assistance (equipment or services). Arguably, its constituency stands to benefit the most of any division of the US government.

Assets was just updated to use Bootstrap 3 (which should make many a Bootstrap user happy). Assets promises you:

Section 508 compliant, cross-browser compatible UI components that you can use in your accessible web site or web application. Assets is an accessible, responsive, modern framework.

If you are an organization that works with the federal government to build web-based applications for the general public, then it may be a no-brainer to use this framework. Arguably your Section 508 accessibility requirements are met to a high degree, and where the framework fails you may be able to make a case that you are using a government-sanctioned tool. It doesn’t let you off the hook for more fundamental accessibility failures (color contrast, images as text, infinite scroll, etc.).

The accessibility statement identifies the profiles used for testing. The documentation page links to all the UI components, which is handy. Jennifer Sutton has also provided links to tests she made with the calendar widget over at the WebAIM mailing list (though she was using version 2).

There are some caveats. On the spectrum of Internet Explorer versions, it only supports version 8 and above (the last version, built on Bootstrap 2, also only supported IE8+). The files are served from a US government CDN, which while not bad in and of itself, should require you to test them to make sure it serves the files as well as a commercial CDN. For example, icon font FontAwesome is served via the Assets CDN, though you may want to compare against others given its ubiquity on the web.

The Assets documentation also provides links to a Medicare style guide and a Healthcare.gov style guide, both of which require a login to see, severely limiting their value to sub-contractors.

PayPal’s Accessibility Plug-in

Screen shot of PayPal Bootstrap accessibility plug-in on GitHub.
If you refuse to use anything from the US government, you can head to the other end of the spectrum and use the accessibility plug-in from PayPal.

According to PayPal:

This plugin adds accessibility mark-up to the default components of Bootstrap 3 to make them accessible for keyboard and screen reader users.

Because it’s an add-on to your existing Bootstrap 3 code, it should just work. It will make the following default UI components accessible: Alert, tool-tip, pop-over, modal dialog, drop-down menu, tab panel, collapse, and carousel. You can pop over to the demo page and test it out with and without the plug-in (use a keyboard to understand the benefits).

As with Assets, this doesn’t guarantee that what you build will be accessible. You still need to consider the same items I cite above along with many many more accessibility elements which cannot just be handled with a plug-in nor a checklist.

Related

The Canadian government has created its own framework, also intended to be accessible, usable, interoperable, mobile friendly and multilingual. The Web Experience Toolkit (WET) has just moved up to version 4.

While not a framework nor an accessibility add-on, the United Kingdom has a handy style guide to make all its gov.uk properties look consistent: GOV.UK elements

There may be hope for government web sites after all, though just don’t try to use Section508.gov with a keyboard.

Update: July 7, 2014

Heydon Pickering has updated his Revenge.css to work with some Bootstrap shortcomings. If you aren’t familiar with Revenge.css, it’s a handy CSS file you can call via a bookmarklet to highlight accessibility issues in your CSS file (like removing outlines, or forgetting the :focus selector when you use the :hover selector).

HTML5 Developer Conference Slides: Selfish Accessibility

Note: This originally appeared on my blog shortly after the talk on May 22.

2014 HTML5 Developer Conference

Today I had the pleasure of speaking at the HTML5 Developer Conference in lovely San Francisco. I presented on accessibility and how it relates to you as a current and future user with my presentation Selfish Accessibility. The full abstract:

We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

After submitting a couple drafts, and then some furious last-minute editing as some of the specs I referenced were tweaked a bit, I managed to squeeze out 89 slides in ~50 minutes. The slides are embedded below. There will likely be a video of the talk coming on the official site later, though I think they started the camera late.

Quick links to two items I referenced in Q&A after my talk:

If you attended, thanks! Whether or not you did, make sure to grab the links throughout as well as on the references slides scattered throughout (though mostly at the end).

Update: August 6, 2014

Good news everybody! The video for my talk was just posted at the HTML5 Developer Conference channel on YouTube. For your convenience, I have also embedded it below.