Accessible Web Development: Part 2 – Usable

Table of Contents

• Part 2: Usable
  • Easy to Use
    • Offer Skip links for redundant or lengthy content
    • Responsive Design & Simple Layout
    • Provide an alternate presentation to JavaScript
    • Provide Sufficient Pointer and Touch Target Sizes
    • New Page
    • New Content
    • Avoid the use of frames
    • Give users sufficient time to respond to timed content
    • Don’t present flashing content or multimedia
    • Use Device-Independent code
    • Offer Support
    • Accessibility Testing
    • A Note on Accessibility Overlays
    • Resources

---

Easy to Use

Offer Skip links for redundant or lengthy content

• Allow users to bypass certain content such as “main navigation” links. You can visually display skip links or use CSS to hide them until the link is active.
• Do not use display: none; to hide the skip nav link. Instead, use off-screen placement, to “hide” the link until it has focus.
• This technique can be used to bypass any block of content which might be lengthy, redundant or unimportant to some users.

HTML example for “Skip to main content” link:

<header><a href="#main" class="skip">Skip to main content</a>…</header>…<main id="main">

CSS example for “Skip to main content” link:

.skip {  position: absolute;  left: -10000px;  top: auto;  width: 1px;  height: 1px;  overflow: hidden;}

.skip:focus {  position: static;  width: auto;  height: auto;}

---

Responsive Design & Logical Order

• Page content must be presented in a way that is logical and preserves meaning for all users. Keyboard focus, Tab order and the reflow of content should align with the logical presentation, and be consistent with the visual order.
• For alert messages and new content that appears on-screen, or populates page areas, keyboard focus should automatically move to the new content or land on the next focusable item in the Tab sequence when a user takes action; and/or all users should be informed that new content has appeared or changed.
• All webpages must be readable and usable when browser Zoom is used and in smaller viewports such as mobile devices. The Reflow of content should present all items in a logical and meaningful order and accommodate for multiple screen sizes and zoom levels. Responsive Design breakpoint triggers should not be device dependent.
• Ensure no content becomes off-screen or hidden when responsive breakpoints are triggered. Specific provisions can be made to offer alternative access for items intentionally placed off screen. All content must be available to all users and easy to navigate.
• Users should not have to scroll horizontally in order to navigate or read page content. Similarly, copious vertical scrolling should also be avoided.
• For individual components, ensure a logical presentation of content is maintained in a reflow of content. Whenever possible, minimize the scrolling needed to access content. For example, a responsive table is often more easily read and understood as stacks of data rather than scrollable overflow content that maintains pre-determined width (or height).

The following image, is an example of a table spanning 4 Columns and 4 Rows (provided by D, Mercier):
To trigger the responsive design, increase the Zoom level of your web browser until the table shows a reflow of stacking content.

Table Caption

Column Header 1	Column Header 2	Column Header 3	Column Header 4
Column Header 1Row 1 – Cell 1	Column Header 2Row 1 – Cell 2	Column Header 3Row 1 – Cell 3	Column Header 4Row 1 – Cell 4
Column Header 1Row 2 – Cell 1	Column Header 2Row 2 – Cell 2	Column Header 3Row 2 – Cell 3	Column Header 4Row 2 – Cell 4
Column Header 1Row 3 – Cell 1	Column Header 2Row 3 – Cell 2	Column Header 3Row 3 – Cell 3	Column Header 4Row 3 – Cell 4

The following image example, is the preceding table, after responsive design has been triggered. Notice how the table stacks, rather than creates a scrollable area:

---

Provide an alternate presentation to JavaScript

• If you use JavaScript on a web page, it’s important to provide the equivalent value for users who do not have JavaScript on their browsers. A common method is to add <noscript> tags immediately after the closing tag.

---

Provide Sufficient Pointer and Touch Target Sizes

• A good user experience may rely on the provision of adequate size and spacing of interactive targets.
• Users with limited dexterity or larger appendages and individuals that experience tremors, rely on adequate target sizing and spacing.

---

New Page

• Allow users to have control over whether to open a link in a new tab or new window. By forcing an off-site link to open in a new browser window, you are taking away that control from the user.
• It is also a best practice to identify hyperlinks that open in a new Tab or Window. If icons are used, ensure a programmatic descriptive label is applied appropriately. When the action is also conveyed in plain text, the icon can be programmatically hidden to avoid redundancy.

The following are examples of various ways to inform the user that a hyperlink address opens in a new window:
Example 1 – Link text followed by an icon using alt text to describe the icon as “Opens in a New Window”
Example 2 – Link text followed by an icon using alt text to describe the icon as “Opens in a New Window” and a plain text description
Example 3 – Link text followed by plain text description

Northeastern University – Digital Accessibility

Northeastern University – Digital Accessibility (Opens in new Tab)

Northeastern University – Digital Accessibility (Opens in new Tab)

---

New Content

• If scripting provides new content on a page, ensure all types of users are informed. This can be done using the following techniques:
  • Create an alert that informs the user that new content has been added to the page.
  • Ensure keyboard focus is logical and tab focus moves to the location of the new content after it loads.
  • Ensure that tab-focus lands on the new content in the subsequent order.

---

Avoid the use of frames

• If frames are used, ensure appropriate markup is applied. Add programmatic labels to <frame> and <iframe> elements. Provide equivalent content (or link to content) within the <noframe> tags. Similarly, when you’re using iframes, provide equivalent content (or a link to it) within the <iframe>.

---

Give users sufficient time to respond to timed content

• When a timed response is required, allow the time to be extended whenever possible; and create a notification to alert users and give them sufficient time to respond, to the notification.

---

Don’t present flashing content or multimedia

• To reduce the chance of seizures, ensure web pages do not contain anything that flashes or blinks more than three times in any one second period.
• If you must present flashing or blinking content, ensure auto-play is disabled and provide a warning before the flashing or blinking occurs.

---

Use Device-Independent code

---

Offer Support

• Include a channel for individuals to request support specifically for accessibility, and ensure a timely response will be provided.
• NU offers a digital accessibility feedback form, that allows people to report a disability-related barrier, or to provide feedback.
  Alternatively, individuals can send an email to digital-accessibility@northeastern.edu.

---

Accessibility Testing

The best way to tell if your web content or digital information is accessible, is to test it.
The most accurate testing is done by people who use assistive technology in their daily lives, experienced users who can give you an accurate report of the usability of the site content; however, many of the things that make digital content difficult or impossible to use, can be detected with a little bit of testing by any user.
We highly recommend considering the following tests before publishing a website or sharing other digital materials. If you need any additional assistance or would like to request an assessment of your digital content, send a message to the Digital Experience team at digital-accessibility@northeastern.edu, or fill out the Consultation Request Form, to request a consultation.

• Color:
  • Look for any text that uses colors or images that make reading difficult.
• Media:
  • Play videos and make sure there are appropriate captions and audio descriptions available.
• Keyboard usability:
  • Basic keyboard testing –
    • After a webpage is loaded, use the tab key to navigate the page (Shift + tab to go backwards). The esc key can sometimes be used to close and dismiss content like an open menu.
      • There should be a visible way to tell where you are at all times, such as a box around a button or link. For forms, it may just be a blinking cursor.
    • You should be able to use all interactive items. Try using the return/Enter ⏎ key or the spacebar to follow links or push buttons. Some items such as menus and tabs may use right → and left ← or up ↑ and down ↓ arrows.
    • Make sure you can perform all actions that a mouse user can, fill out any forms and submit them successfully.
    • The order of interactive content, or “tab order” should match the visual layout and reading order.
• Magnification and smaller screen sizes:
  • Use the zoom function of your browser to increase the zoom level (200% is a good level to test).
    • All content should remain visible and in a logical order. If content is hidden (or collapsed) intentionally, make sure it’s easy to get to.
    • Make sure you can still use things like the main menu with a just a keyboard.

A note about Automated testing tools:

Automated testing can be an excellent way of evaluating basic accessibility of digital content; however, an automated testing tool will not be able to give a comprehensive report of all aspects of accessibility that could have a large impact on users of assistive technology. For instance, an automated tool cannot identify an image which is marked as decorative, but includes informative content. Successful accessibility testing must include aspects of manual testing. Currently, Northeastern University offers Siteimprove’s Accessibility Checker tool for use on NU web content as a supported automated testing tool which can be implemented upon request. For details, see: How do I request access to Siteimprove?. One advantage of the Siteimprove Accessibility tool, is that it can crawl multiple pages and deliver accessibility and Q&A scores on some aspects of accessibility.

A note about screen reader testing:

Using a screen reader is a great way to assess the accessibility of digital components, especially interactive elements that require labels and non-visual indicators. Ideally, anyone publishing or distributing digital content would know how to do some basic testing using a screen reader, though that might not always be possible due to certain limitations.
If you are interested in testing using a free screen reader, we recommend the following resources:

Voiceover Mac (MacOS )

• VoiceOver Getting Started Guide (Apple)
• Using VoiceOver to Evaluate Web Accessibility (WebAim)
• Getting Started Testing with VoiceOver (Harvard University)

NVDA (Windows)

• Download and experienceNVDA today (NV Access)
• NVDA 2021.2 Commands Quick Reference (NV Access)
• Getting started with NVDA (The A11y Project)
• Getting Started Testing with NVDA (Harvard University)

---

A Note on Accessibility Overlays

Due to the documented failures and shortcomings of accessibility overlays, the Northeastern University Digital Experience team recommends against using any kind of accessibility overlay or plug-in, in attempt to improve the accessibility of web content. Instead, it is advised to test digital content for compliance to applicable standards and ensure adherence to Northeastern Policy on Digital Accessibility without the use of such tools.

---

---

Resources

Related Resources: Part 2 – Usable

Usable

• Understanding Bypass Blocks – (W3C)
• Understanding Resize Text – (W3C)
• Understanding Reflow – (W3C)
• Understanding Target Size (Minimum) – (W3C)
• Three Flashes or Below Threshold – (W3C)
• Keyboard Accessible – (W3C)
• Easy Checks – A First Review of Web Accessibility (W3C)

Additional Resources

---

Your Feedback is Welcome

We would love to hear your thoughts on this learning content. Please let us know if you have completed any of the modules, have any feedback or just want to say hello. Email us at digital-accessibility@northeastern.edu.