HTML, CSS, and the Path to Accessible Web Design
Founder of the RedMonk consulting group James Governor described inclusive design as “If you design for a set of scenarios that are not just the ones that 23-year-old, able-bodied white men in San Francisco have, things can perhaps be more valuable.”
That’s not a bad comparison for the state of the current tech industry and who are building websites our grandparents are expected to use.
There’s an argument to create great software you have to go to the basics. And when you consider the massive scale some websites can reach these days, maybe it’s good to go back to the basics to make sure everyone can access everything we build.
I ❤️the Microsoft inclusive design toolkit. everyone should read it. are PDFs accessible, dunno, but it's a great piece of work https://t.co/316uHb7xfq pic.twitter.com/KoC92tkyrS
— Lief Lat (@monkchips) March 12, 2019
“There are no edge cases. We need to design things to be more inclusive,” Governor said referring to the image above.
Another way to look at it is that being not considered disabled can just be a temporary state. By designing inclusively and accessible from the start, you are designing with your future self in mind.
Or you could consider that you are probably breaking the law if your website isn’t accessible by design.
So now that you are at least kind of considering taking a few steps towards accessible design, how do you get started? We cover some of the ways to get started, highlighted at this year’s Monki Gras, a two-day software conference held in London earlier this year by RedMonk that centered on the theme of accessibility.
The Business of Accessibility
RedMonk analyst Rachel Stephens argued on stage that inclusivity — and ethics for that matter — starts with who you’re involving in your discussions:
- Who is responsible for this?
- Who is accountable for this?
- Who should be consulted about this?
- Who should be informed?
- When do you communicate this and how?
Stephens argues that accessibility, inclusion and diversity should be included in your risk assessment. She says to weigh the cost of action and inaction and then put it into the frameworks common to our business decisions.
“Things happen in Excel — not just thinking about the ethics and the morals that you live in but you have to be able to articulate it in a way that makes sense to the business decision makers and leaders in your organization,” she said.
You can have an organization that strives for meaning, but you also need to clarify that meaning and how it’s going to be paid for.
“You also need to tie it to getting a better product for your customer,” Stephens said.
There’s no doubt, particularly as users scale, accessibility is a key factor into good user experience.
Will a Return to HTML and CSS Reawaken Accessibility?
“We are forgetting the simplicity that is inherent in the design of the web right from the start. We’re overcomplicating it and this is how we are locking people out,” Bruce Lawson, a web standards and accessibility consultant, told the crowd at Monki Gras.
In fact, the first ever webpage was completely responsive. Then World Wide Web creator Marc Andreessen added the image tag, with no ability for alternate text — which allows for image descriptions on screen readers — in 1993.
And then things got so much worse when the screens got bigger and bigger.
“We broke it because we had fixed width websites. Broke it by bad contrast, bad colors, fonts. We went for a pixel-perfect layout like it were print, which it’s not,” Lawson said.
He continued taking the audience through the history of the Web’s journey toward inaccessibility by talking about how captions were missing from videos and images, there was no keyboard-only accessibility, and the focus indicator was removed.
Now, Lawson argues that we’re ruining the web with the tools, languages and frameworks we are using. He advocates for a return to the semantic web, using HTML and CSS to design in a way that is both human and machine readable. It makes for cleaner, clearer code that is easily read by screen readers.
The image above from Lawson is a small example of a big problem for accessibility. The bottom checkbox is based on HTML and allows you to check the full label, while in the top, you can just click a checkbox if you have the mobility and mouse use to do that.
“It works if you choose the right semantic roles. We are obsessing with tooling and JavaScript and HTML is forgotten,” Lawson said.
The tables below compare a JavaScript webpage organization and an HTML webpage, respectively. The DIV tags have no meaning, but if you instead choose the semantic HTML way of writing a webpage, screen readers will be able to navigate for those that cannot see well, finding the main part of the webpage immediately.
The surprising thing is that accessible websites are proven to convert traffic better too — perhaps because many of Google’s mobile-friendly requirements also are very accessible. Lawson cited financial services company that had made its website accessible, with the managers worried they’d be levied a fine for being non-compliant to the Disability Discrimination Act. It turned out that these updates led to 90 percent more conversions, meaning the accessibility update of their website ended up paying for itself within a year.
Want to Test for Accessibility? Follow GDS’s Example
One of the most impressively accessible group of websites is certainly the UK’s Government Digital Service, more commonly GDS, which has had the vision to include people from the start. The effort was “not trying to make things look elegant, just trying to get the job done,” said Louise Miller, senior content designer at GDS at the event.
Under the UK Equality Act, GDS is required to design specifically for edge cases — “and therefore for everyone.”
And remember GDS services weren’t originally designed for the Internet, but for people having to come into offices for services like applying for a fishing license.
At the end of Monki Gras, Marian Foley and Kevin McLaughlin, GDS content designers and particular needs IT users, offered proactive ways to test your website for accessibility, particularly for users with low vision. In the UK alone, over two million people live with sight loss, including 20 percent of all people 75 and older, and half of all those 90 and older.
For Foley, the view of GDS is “You’re only ever temporarily not disabled. You might be designing for your future self.”
How to Design for Common-Sense User Experience
When you are designing something that has a broad spectrum of users, Foley goes against a lot of search engine optimization hacks. She says to make sure to write everything in plain English, simply and clearly.
“Boil things down to the main message make it accessible for everyone,” she continued.
Also, avoid bold and italics, which she says is proven to slow down comprehension rate regardless if people have disabilities. On the other SEO-friendly hand, she does say to leverage bulleting.
At least in the left-to-right reading world, people follow an “F pattern” of reading a page, so Foley says you should always front-load your sentences with important information at the beginning and expect them to continue reading less and less as they go down your page.
And always imagine how you would use the website if you couldn’t see or hear, applying useful — and often SEO-friendly — descriptors for buttons and images, and captioning of videos.
Test for Visual Accessibility
This is another situation where many of Google’s responsive design requirements are also accessibility requirements, so there’s a clear curb-cut effect, where one small change made for a smaller group can have ripple benefits for everyone.
Magnification — When using magnification, users usually have to scroll left to right, limiting the amount of the screen they can see. Tooling to test it:
- Magnifier for Windows 10
- Accessibility zoom function for Apple, which comes included with iOS.
Low resolution and browser zoom — GDS says the easiest way to test this is to access the desktop version of your website on a mobile device and see if it’s responsive. Text should reflow to fit the page as you zoom in and out. If it’s not responsive, just the size of the text will increase and you’ll have to jump from left to right again.
Color contrast — Usually visually impaired people (and newborns) can see more with high color contrast. There are tools to help you meet contrast Web accessibility guidelines:
- High Contrast Chrome extension — numerous extensions to invert colors to make your website more accessible
- Eye Dropper Chrome extension — allows you to pick colors from websites
- Contrast Checker — a free website that measures color contrast and font requirements for accessibility
Keyboard-only — Even this author is lazy about writing keyword-friendly photo Alt Text, which makes them useless to screen readers. For your site to properly work with a screen reader — or to serve a developer audience filled with repetitive strain injuries — it needs to work with keyboard-only input, like:
- TAB key to navigate
- ENTER and SPACEBAR to make selections
- Arrow keys for navigating radio buttons
Try using just your keyboard to navigate your website and build some user empathy. Then to test the functionality for screen readers, try this tooling:
- a11y-outline Firefox add-on; a11y-outline Chrome extension
- NVDA screenreader for Windows 10
- Voiceover for Mac (already built in)
These accessibility reviews may not seem like a big impact, but, according to Thomas Otter, also a Monki Gras speaker, “A[n online] job application that would take ten minutes for a sighted person took between three and five hours for blind or visually impaired people.”
Small changes to any website people use could make a big difference.
As Governor reminded us, “There are no edge cases. There’s just lots and lots of people that need to access information.”
And now one final tip. Think this article is helpful? Want to share it? Just follow an accessibility trick for Twitter and screenreaders — turn on “Compose image descriptions” in your Twitter and use capital letters to distinguish words in your hashtags. And tweet accessibility messaging to #a11y.
Feature image: Rachel Stevens at Monki Gras. Photos by Jennifer Riggins.
