Our focus in this chapter is accessibility in relation to the web. We’ll cover some best practices for web development and provide sample code for you to follow along with cognitive ability.
Thus, the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.1
“Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.” W3C
Web standards defined
Importance of web content
HTML (H1, H2, H3, and SEO)
CSS (color contrast)
JavaScript (navigation)
ARIA (Accessible Rich Internet Applications)
Governing on the Web
Who can use this entrance/exit?
What do you see when you look at this photo?
When will people enter or exit?
Why would people use the ramp or stairs?
How does this apply to the digital world?
Photo of stairs with a ramp. Handrails are only on the stairs
Taking a closer look at the ramp and stairs, notice the steepness of the ramp, notice there are no rails where the ramps are and that there are only rails for two out of four sets of the stairs.
Is this really accessible? No, it is not. In many instances, what we think is accessible is often times not and that depends on many factors including the design. This is an easy way to think about web accessibility—or really, how you might not have been thinking about web accessibility. Similar to the ramp in Figure 2-1, you might think because there’s a ramp, it’s accessible to everyone. But in this case, it can definitely be more accessible-friendly, and there’s room for us to question what can be improved upon.
One of the things that can help us understand what to do are regulating legislation like the American with Disabilities Act2 for structures and the web. The web has a governing body called the World Wide Web Consortium (W3C).
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
—Tim Berners-Lee
Web Accessibility
Perceive, understand, navigate, and interact with the web
Contribute to the web
Auditory
Cognitive
Neurological
Physical
Speech
Visual
People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
Older people with changing abilities due to aging
People with “temporary disabilities” such as a broken arm or lost glasses
People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
People using a slow Internet connection or who have limited or expensive bandwidth
Many of us are using the Internet and other digital products every single day. Approximately 3 billion people are on the Internet right now! Digital products are all around us, and in order to best serve those who use them, we need to ensure accessibility.
Web Content
More than half of the world’s population is on the Internet. What might they be looking at? Regardless of the details of that answer, they are looking at content, and that content is the main reason any of visit any web site.
A proper layout of content is important for any readership. Typically, content is provided by content strategists and copywriters, but this varies by organization. When first organizing a product, it’s good to start with knowing what type of content you will provide. Content, page layout and hierarchy are important for readability. We will dive deeper into accessible web content in Chapter 5.
When it comes to accessibility and content, there are some key layout “best practices” to follow. For a more inclusive experience, overall, content should be placed in a way that is understandable.
Titles, headings, and links should be clearly visible upon first glance since this is the way that many people scan a site. This is also the way assistive technologies, such as screen readers (typically used by people with visual impairments), read a page.
Headers
Titles
Paragraphs
Images
Forms
Links
Content hierarchy. Each header has a level of importance based on the size and location on the page
Headers should be reflective of the most important things on the page. Paragraphs will contain text in sentence form and links should clearly reflect where the user is going to go next and should have enough contrast.
When organizing the content, you need to ensure that you use proper hierarchy and associate the proper headings. Information architecture and content strategy play an important role in the design of digital products.
Information Architecture Helps Build Better Experiences
Information Architects (IA) organize digital products. When you think of the massive amounts of data out there, it all needs to be structured in some way, and this is what an IA can do.
A prominent information architect is Abby the IA. Abby is an independent information architecture, and one of the approaches she takes to information is to look at the why, what, and how (Figure 2-3).
Why: Reasons
What: Specification
How: Execution
The loop of How, Why, What, and How from Abby the IA4
Information architecture helps designers, developers, and content strategists do their jobs better when they can specify the reasons, the specifications associated with what needs to be done, and how to execute those specifications.
What type of content might your product include? Will there be images, text, and forms? How will you organize this information? More times than not, the content of your product is not available before development. However, it is best practice to develop the content ahead of the design by introducing a content model. In Carrie Hanes and Mike Atherton’s book Designing Connected Content, they recommend starting with a content-first strategy. This will give structure for the creation of different representations and interfaces (think about how your users may access your product via mobile, desktop, or a voice application), allowing people to efficiently navigate through the content.
Example of content model: audience, purpose, audience questions, keywords, FAQ’s, content (including title and alt tags), footer and primary navigation, images, captions, downloads, and other page content
After development of the content, your product will then be ready to be built. There are many ways to build web pages these days, and for the purposes of this book, we will focus on HTML, CSS, JavaScript, and ARIA. Development of a product takes a team effort and so does creating accessible products. Now we’ll go into more detail about each of those steps.
What Does the Code Do?
Whether you are building things yourself or working closely with those who build digital products, it is helpful to understand how things work. If you are already familiar with building products, this may be a refresher for you and for those who this is new to, it’s my hope you learn something new.
While on a panel during Computer Science Week in November of 2018, a young student asked the question, “What does code do?” The three of us on the panel were stumped to answer the question. One of the panelists then answered, “The things you see on a computer screen have to be programmed. A computer doesn’t know how to do anything unless you tell it how to do it.” With this in mind, not only will people be reading the content of whatever you create, there may be machines who read what you create as well
Whether you are in design, development, or any part of the creative process, you get the chance to make things that are accessible to those who may access it.
The Benefits of Knowing Basic HTML and CSS
Designers would benefit greatly from acquiring some foundational knowledge of what’s called the “front end” (the presentation layer) driven by HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets, a language that describes the component styles in an HTML document) and would perhaps be surprised by how easy it is to learn the basics.
HTML and CSS don’t involve programming logic. The letter M in HTML stands for “Markup,” a way to describe the coded structure of page elements which are the building blocks of pages. HTML with CSS and JavaScript form a triad of foundational technologies for the World Wide Web.
In layman’s terms, HTML is an architectural map that tells the browser what to display, and CSS, or Cascading Style Sheets, is the code that tells the browser how to display things.
Metaphorically speaking, if HTML is the skeleton of a page, CSS would describe the height, the body shape, the skin, eye color, hair color, etc. The language has a very simple code structure that determines typography, colors, positions, and dimensions.
Understanding Code and How to Code Is Understanding Pixels
Learning how to code the front-end UI and previewing it gives designers the opportunity to immediately see how things are displayed when viewed on various devices. If designers play with HTML and CSS, they’ll notice that everything is measured in pixels (there are other measurement units such as “ems” and percentages that will ultimately be converted to pixels).
Understanding measurements and code structure, that is, how pages are displayed, will provide a deeper understanding of the front-end development process. That in turn will cause designers think more deeply about their designs and how to make them more efficient for that process. They will know what can be easily achieved and what would be more challenging.5
Alongside an understanding of code, it is also helpful to understand assistive technologies that people with disabilities may use in order to access the code.
Assistive Technologies
Screen readers is a software technology, typically used by people who are visually impaired, that reads the content of a web page or application. Someone using a screen reader can then use a keyboard to “see” a web site.
The American Federation for the Blind (AFB) defines screen readers as software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display.6 A screen reader is the interface between the computer’s operating system, its applications, and the user.
The user sends commands by pressing different combinations of keys on the computer keyboard or braille display to instruct the speech synthesizer on what to say and to speak automatically when changes occur on the computer screen.
A command can instruct the synthesizer to read or spell a word, read a line or full screen of text, find a string of text on the screen, announce the location of the computer’s cursor or focused item, and so on.
In addition, it allows users to perform more advanced functions, such as locating text displayed in a certain color, reading predesignated parts of the screen on demand, reading highlighted text, and identifying the active choice on a menu.
Users may also use the spell checker in a word processor or read the cells of a spreadsheet with a screen reader.
JAWS
NVDA
VoiceOver
For our purposes, in this book, we’ll focus on the areas of headings, keyboard navigation, forms, images, languages, and tab functionality.
It is of key importance that web pages have a H1 which should match the title of the page as shown in Figure 2-2. If you are looking for a resource on coding inclusive experiences, I highly recommend Heydon Pickering’s book Inclusive Design Patterns.
HTML Best Practices
Headers
Titles
Paragraphs
Images
Forms
Links
We can apply HTML (Hyper Text Markup Language) to the content: headers, titles, paragraphs, images, forms, and links. Adding styling to a web page could include CSS and JavaScript which we will talk about a little later.
Resources for developers by developers. https://developer.mozilla.org/en-US/
Knowledge of semantic HTML can improve the accessibility of web sites. Think of a house without a frame; that’s what a web site might be without semantic HTML. Assistive technologies, such as screen readers, will read HTML and then users can control the degree of details that the screen reader engages and shares with the user.
Use Container Elements for Layout Only
Elements like <div> and <span> are for layout only. They’re semantically meaningless, they don’t have keyboard or touch support in any browser, and they don’t communicate anything to the accessibility API. For example, never use a div or span for a button when you could use a semantically meaningful button element.
Use Other HTML Elements the Way They’re Intended
All of the other HTML elements should be used to tell the browser what functional purpose your content serves. The other HTML elements provide meaning to the browser and assistive technology about what you’re saying on your web site. You should choose them based on what the content is—not based on how they look with graphics.
header
nav
main
article
aside
footer
Headings
Use one H1 per page and have it match the page title.
Do not skip heading levels when increasing, but you can skip levels when decreasing (h1, h2, h3, h2, h3, h4, h2, h3, h4).
The headings taken out of context should logically represent the page content for screen readers and users who choose this option as a way to scan the page.7
Examples of Accessibility Do’s and Don’ts for HTML
Always include a title in the <head> section of a page. This helps screen readers as well as web crawlers for search engine optimization
Be as explicit as possible when using tags and always include headings for main titles; see Figure 2-7 for an example
Here’s an example of using alt to add a text description to images. Alt text is a phrase that can take the place of an image for screen readers or if an image isn’t rendering properly
As we can see, semantic HTML is important for the structure of pages and it helps the hierarchy of the page in a way that is not only accessible but more readable for all of us.
WCAG 2.1 Color Guidelines
Success Criterion 1.4.1 Use of Color | (Level A) | Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element |
Success Criterion 1.4.3 Contrast (Minimum) | (Level AA) | The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 |
Success Criterion 1.4.6 Contrast (Enhanced) | (Level AAA) | The visual presentation of text and images of text has a contrast ratio of at least 7:1 |
WCAG 2.1 states that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or a distinguishing element.8
Color contrast ratios according to WCAG 2.1. The left image is accessible, while the right image is not
Luckily you don’t have to be an expert when it comes to color contrast ratios. You can measure color contrast using a color contrast checker through various web sites or plugins. A list is provided in the Appendix.
The best way to learn is by doing, so let’s check out the HTML and CSS of one of your favorite web sites. In the following, we provide you with the steps to check out the inspector tools using Chrome, Firefox, or Safari.
Check out the HTML and CSS of a website:
- 1.
Right-click an element or a blank area on the web page. Select “Inspect” from the popup menu.
- 2.
Use the Chrome menu to access the More Tools ➤ Developer tools option.9
- 1.
Right-click an element or a blank area on the web page. Select “Inspect Element” from the popup menu.
- 2.
From the Firefox menu, click Web Developer ➤ Inspector.10
- 1.
Right-click or control-click an element or blank area on the web page.
- 2.
Click Develop in the menu bar and select Open Web Inspector in the popup menu that appears. If you don’t see Develop in the menu bar, pull down the Safari menu and choose Preferences, click the Advanced tab, and check the box next to show Develop menu in menu bar.
- 3.
Click individual elements of the web page to see the code devoted to that particular section.11
JavaScript
JavaScript, a language used with HTML and CSS, provides interactivity on web sites, an important aspect when we are talking about accessibility. In this section, we’ll focus on navigation and user control with JavaScript.
When it comes to using Javascript, less is more. You can get a lot of similar effects with CSS.
—Donovan Taitt
Full Stack Developer and Software Engineering Instructor at General Assembly
Making an accessible site doesn’t mean that you have to decide whether to use JavaScript or not. Accessibility is about making content available to as many people as possible, which also includes users with old browsers and computers, slow Internet connections, strict security restrictions (e.g., no JavaScript), and so on. The experience under conditions like these where JavaScript may not work or take too long to load might not be ideal but is still good enough if the web site is accessible and usable.12
There is a time and place for everything, and JavaScript can be used with Accessible Rich Internet Applications (ARIA) . ARIA is good for bridging areas with accessibility issues that can’t be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree. Let’s look at an example.
While this works fine for sighted users, a screen reader will give no indication that the element is meant to be a checkbox, so low-vision users may miss the element entirely.
Conclusion
Content plays an important role in regard to what your users may or may not be able to access. Information architecture and layout of pages has an impact on accessibility and can disrupt the use of your product if not done in a proper way.
Clearly indicate and manage focus.
Ensure users can visually track their focus when keyboard navigating.
Keep users focused on controls.
Semantic HTML—Make the content accessible (accessible content tips in Chapter 5).
Use Action words as links—put periods for abbreviations (e.g., F.B.I).
Present links in an obvious and consistent way.
Include images used as icons or bullets in the link.
Use simple, clear navigation cues and labels.