Web Accessibility

Whether you are designing a websites or form or a menu interaction, be sure to annotate accessibility requirements into the documentation you provide for developers. For example when you are designing the way a form looks, specify meaningful form labels and add a notation to the developer that the form must be accessible.

Adding accessibility notations to your documentation is a great way to set the stage as early as possible for integrating accessibility requirements into software and web design projects.

Please plan some time to watch this YouTube webinar, Translating Design Wireframes into Accessible HTML/CSS, to help you get started.

Here is a handy checklist to help you create more accessible web and application designs.

Color Contrast

Whenever there is text in a design, be sure the contrast between the background and text color has at ratio of at least 4.5:1 depending on the font size. You can use WebAim's Color Contrast Checker to verify.

See Understanding Success Criteria 1.4.3 for more information.

Communicating Using Only Color

Color can be used to help people better understand context or where they are on a website or when they've made a mistake and so much more. But for people who are color-blind (about 10% of males and about 2% of women) if color is the only way something is communicated, they may miss it or misinterpret it. Be sure to use more than just color to convey information. You can also use text, symbols or shapes as well.

See Understanding Success Criteria 1.4.1 for more information.

Font Sizing

People with low-vision should be able to increase the size of the fonts of a website 200% without breaking the layout. If a website is not designed with this in mind, the developer might be tempted to disable a user's ability to increase font sizes in order for the layout to look nice. Fortunately this ability has been disabled on Apple operating systems, but it may still be an issues with other operating systems. Font sizing must be left up to the user and never disabled in code.

See Understanding Success Criteria 1.4.4 for more information.

The heading structure of your content is used both for navigation and also to understand the relationships within your content; i.e. whether things have equal importance, or if items are subordinate to other items. When you are creating headings in your content, click on the "Normal" drop-down item in the rich text editor. Then choose the appropriate heading level for your text.

Remember that your heading structure should be similar to an essay outline. Headings should descend numerically when following the natural numbering order, i.e. a heading level 2 follows a heading level 1. You shouldn't skip numerical order, from a level 1 to a level 3, however you can jump back up to a higher level.

A recent Ohio University Compass magazine article provide more detail on structuring your content with headings.

Tables should only be used for presenting data like spreadsheet rows/columns, not to position elements on a page. Data tables must be marked up with appropriate headers. When you create a data table, you the tools in a rich text editor or the Table ribbon of Microsoft Word (for example) to add descriptive row headers, column headers or both row and column headers. If your table is more complex (for example, a table with merged cells or multiple levels of headers) either break the table down to several simple tables or contact University Communications and Marketing to help you make your complex table accessible.

You can learn more about accessible tables on the WebAim website.

Describing images in alternative text can be an art form. While it is nearly impossible to state what a perfect alternative text looks like, there are some guidelines that can help you create better alt text. Imagination is the key.

Understand that:

• Screen readers announce the image information to people who cannot see the content on your webpage.
• Screen readers will announce the word "image" so you don't have to in your description.
• Using a screen reader is tedious.
  • Keep your descriptions meaningful.
  • Try to keep descriptions under 140 characters (think about the length of a tweet.)

For more information about accessible images, visit our Universal Techniques page.

A 2019 report from The Next Web shows that people spend around more than 6 hours a day online - a great deal of that time is spent reading. Far from the myth that using plain language techniques "dumbs down" content, it requires that we write and design our content with simplicity and clarity. The Federal Plain Language Guidelines state that members of your audience can quickly and easily:

• Find what they need.
• Understand what they find.
• Use what they find to meet their needs.

Given the high number of distractions in our digital world, plain language is a welcome relief for the vast majority of our audiences regardless of their abilities.

Here are a few tips to keep in mind:

1. Focus on your readers.
2. Structure the whole page for scanning.
3. Write simply using words common to your audiences' vocabulary.
4. Get to the point - put the most important information first.
5. Use images that add meaning to illustrate your point.
6. Write in the active voice.
7. Use shorter sentences.
8. Uses headings and bullets to break up large blocks of text.
9. Limit column lengths to 65-75 characters.

Page titles, headings and now descriptive links are all ways that people using assistive technologies can scan a web page to better understand whether your page will help them or not. A screen reader user can set their device to just read headings or just read links on the page.

If a screen reader is just announcing links on a page - and every link on your page says "Read More" or "Click here" - that can present a real problem for that person. But if those links are descriptive of their destination, the user will have a better idea of the content on the page. This practice will also enhance your search engine optimization.

The following is a list of functional requirements as specified on the Department of Education website and is an effective set of guidelines for digital accessibility.

Specific Functional Requirements

Software applications and operating systems.

1. When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
2. Applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards. Applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer.
3. A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.
4. Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.
5. When bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.
6. Textual information shall be provided through operating system functions for displaying text. The minimum information that shall be made available is text content, text input caret location, and text attributes.
7. Applications shall not override user selected contrast and color selections and other individual display attributes.
8. When animation is displayed, the information shall be displayable in at least one non- animated presentation mode at the option of the user.
9. Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
10. When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.
11. Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.
12. When electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Web-based intranet and internet information and applications.

1. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
4. Documents shall be organized so they are readable without requiring an associated style sheet.
5. Redundant text links shall be provided for each active region of a server-side image map.
6. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
7. Row and column headers shall be identified for data tables.
8. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
9. Frames shall be titled with text that facilitates frame identification and navigation.
10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
12. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
13. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the requirements for Software applications and operating systems listed above.
14. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
15. A method shall be provided that permits users to skip repetitive navigation links.
16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

One of the most common issues with websites is the lack of keyboard accessibility. You should be able to access the links and controls using the keyboard only. To get started with testing with a keyboard, click in the location bar of your browser then set your mouse aside. Use the tab key to start going through the page. Shift-tab will move you backwards.

The Accessibility Developer Guide website provides a good overview of how to use a keyboard to navigate a website. WCAG Guidelines that apply include:

• Bypass Blocks 
• Keyboard Only
• No Keyboard Trap
• Focus (visible)
• Focus Order 

Visit the Web AIM website to learn more about testing for keyboard navigation.

Undefined Keyboard Focus Indicator

Many stylesheets use a "reset" style, that essentially removes all formatting. In doing so, the keyboard focus indicator is not defined, which prevents keyboard users from seeing what item on the page currently has the keyboard focus. Sometimes the focus is set, but it conflicts with the other colors and is not visible.

Keyboard Activation Of Custom Controls

Putting onclicks event handlers on LI, div, span, and other elements without coding for keyboard accessibility as well can create barriers for keyboard users. Unlike anchor tags, buttons, and some other elements, these HTML elements are not natively keyboard focusable. Putting onclicks on these elements will cause them to be useable only by a mouse. The options to resolve this issue depends on your intended functionality for these elements: if you intend them to show additional content, to open up sub menus, or to function as a pseudo-checkbox or button.

For further details, see Accessible Javascript Event Handlers.

Focus

Some users, especially those with specific disabilities, may rely heavily on using keyboards or other devices to change focus. For instance, a user might change locations in a web page using a tab key, and this would be a change of "focus." As the user moves around the page using the keyboard controls, there should be a visual indicator showing the element with the current focus.

Having a focus strategy will improve the experience for all website users but especially helps support people with visual and motor disabilities. A focus strategy starts at the beginning of a web development project with keeping focusable content within a logical order in the DOM.

OIT Recommendations

• Do not change the order of the DOM without taking into consideration the website experience for keyboard users.
• Include styles to highlight focusable content in your CSS files. (OIT base templates have this styling already included.)
• Only add focus behavior to interactive controls like buttons, links or anything else that requires user input
• Avoid using tabindex equal to anything greater than "0"
• Include "skip-link" option for navigation so users can go straight to content. Make sure this link is visible when it receives keyboard focus.

For further information, see WCAG 2.0 success criteria 2.1.1 on Keyboard Operability.

When we read a website (or a newspaper, or other content), we often skip around, skimming over some content or reading something in-depth when the title has caught our interest. Accessible websites provide the ability for all users to easily access and jump to the content they need. Using semantic HTML such as headings provides the information about how the content is ordered.

Semantic markup is a big topic. To illustrate the importance of semantic markup, watch this YouTube video from Udacity.com demonstrating how someone uses a text reader to navigate a website. Pay special attention to the fact that assistive technology follows the DOM order of a web page regardless of how the page is rendered visually.

In general, OIT suggests developers:

• label input elements
• provide useful text alternatives
• use heading (h1-h6) in a logical outline-form
• give links useful names (avoid "click here or read more")
• The OIT base template takes care of many of these considerations for you, but developers who are not using the base template and content contributors still need to understand and practice good semantic markup.

You can learn more about semantic HTML 5 (video).

Landmarks

If you haven't thought about landmarks on your website, chances are they need some improvement. Assistive technology users can navigate your page using the landmark structure. The type of landmark is provided to these users, along with the name of the landmark if it is provided. If you have content on your page that is not contained within a landmark, then users may miss this content if they are navigating with landmarks.

The emerging standard is that all of the content on your page should be contained within a landmark. Your page should contain at least one navigation landmark, and one "main" landmark. If you have a landmark type that is repeated on the page, such as two different sets of controls that are within a navigation landmark, those two landmarks should be identified with distinct names. The Web Content Accessibility Guidelines provides additional details on landmarks.

ARIA is an acronym meaning Accessible Rich Internet Applications, and is a standard developed by the W3C. Developers add ARIA to web code to provide additional information to assistive technologies, such as screen readers. When used appropriately, ARIA will greatly increase the accessibility of your website and helps meet WCAG 2.0 guidelines. However, just adding ARIA to your code is not going to fix all of the accessibility issues of your website; in fact, an overuse of ARIA can introduce blocks and issues that did not exist before.

ARIA will override semantic HTML5, so unless you have a custom control or other really good reason to use ARIA, don't use it.

ARIA provides semantic information to assistive technology about elements on the webpage. ARIA provides a way to include roles and states of elements on your webpage, such as "expanded," "collapsed."

ARIA also provides design patterns for interactive "widgets," such as drop-down menus, expandable accordions, etc. These design patterns specify how ARIA should be used and also which keyboard commands should be used and what they should do. Typically, the keyboard commands are the arrow keys, the enter and space keys, and escape.

The full ARIA specification is available from the World Wide Web Consortium.

The nice thing about this tool is that it gives you a score for each page you run the automated checker on. You can assign each page 100, then you can average that out to scores for each page.

If you'd like to run your own audit, here are the steps:

1. Use Chrome to navigate to the page you want to check.
2. Go to the View menu.
3. Choose Developer then Developer Tools.
4. Go to the Audits tab choose Accessibility. Optional: deselect the other audits to speed up the process.
5. Scroll down and choose Run Audits.

It will take a few moments for the checker to process, then you will see a score.

There are many other automated tools you can use and the more tools you use, the better idea you will have about the accessibility of the site. Please keep in mind however, that any automated tool, while helpful, will only indicate about 30% of the possible accessibility problems with the web page it is evaluating. Even the errors it finds still need to be understood in context because they may or may not actually be errors.

This section is an introduction to some of the manual checks required for accessible web pages. Some manual checks can be performed on an individual page, while some require looking at usage across pages on a site.

1. Do a visual inspection of your pages. Check the contrast with a Color Contrast tool (beware of false positives- you may need to manually check items that are marked as a violation).
2. If you have media and images, check to make sure that your images have alternative descriptions and your videos have captions.
3. Order and presentation of content should make logical sense. Headings should be used to designate content, not simply change the appearance of text.
4. Access your website with a keyboard. Set aside the mouse, and start tabbing through your page. A good example site to tab through is the Web Experience Toolkit. Note you will need to use your keyboard arrow keys on the menus on that toolkit. Some things to be aware of:
   • Can you see where the focus is as you tab through the web page?
   • Are there places that lose focus or do there appear to be multiple steps between items on the page?
   • As you tab through the page, does the order follow how things are visually placed on the page?
   • With menus that have sub menus, can you open those menus by hitting space or return?
   • Is there a skip link at the top of the page to skip over the navigation into the main content area?
   • Are there areas on the website that can?t be accessed via the keyboard?
   • For further details, visit the WebAIM resource on keyboard accessibility.
5. Look across the pages on the site, and check:
   • Is the order and appearance of elements on the pages consistent?
   • Do you consistently use headings the same way?
   • Do you have "skip to main content" links? (These may only be visible when they receive keyboard focus by tabbing to the link.)

When you're ready to make the next step to checking for all of the accessibility guidelines, WebAIM has a good checklist introducing WCAG 2.0.

• Why access matters (ACCAN)
• WAI: How People with Disabilities use the web

• Web AIM "Our mission is to empower organizations to make their web content accessible to people with disabilities."
• W3C Web Design standards for accessibility.
• Coursera.org Basics of Inclusive Design for Online Education - free course when registration is available
• SiteImprove Web Accessibility Fundamentals free course - see instructions on the OHIO DAN webpage

• Screen Reader Gestures and shortcuts
• AInspector Firefox browser plug-in.
• AXE browser plug-in for Firefox and Chrome.
• WAVE Accessibility Checker browser plug-in.
• IT Accessibility Illinois
• Accessible Color Checker
• Color Safe
• WCAG 2.0 Checklist from WebAIM
• A11Y Project Web Accessibility Checklist
• Accessibility Visualization Toolkit bookmarklet.

• WAI-ARIA Document Landmark Roles
• How to caption videos on YouTube
• Web Accessibility Web Delay until 2018
• Nielsen Norman Group: Accessibility Articles

• AHEAD
  • AHEAD is a professional membership organization for individuals involved in the development of policy and in the provision of quality services to meet the needs of persons with disabilities involved in all areas of higher education.
• ATHEN
  • ATHEN is a network of higher education professionals committed to improving accessibility for students, faculty, staff, and administrators.
• IAAP
  • International Association of Accessibility Professionals

• List of resolution agreements and lawsuits compiled by the University of Washington
• Web AIM US laws information