10.3.c Websites and Apps 

The smartphone is often a person's only available access to digital media. Over 50% of web page views worldwide occur on mobile devices. Websites, documents, and digital media, in general, must be compatible with smartphones and shared, slow 4g connections to be fully accessible. Situations, where mobile devices are the only option, include:

• Persons whose only digital device is a smartphone.

• Students sharing a mobile hotspot at home

• Persons that are traveling short and long distances.

• Persons that are in situations where a laptop or desktop computer is not an option (like an impromptu meeting or public venue).

It's clear by the PEW Research Center's data on broadband access (external link), as of the end of 2021, that minorities and low income persons are disproportionately negatively affected by internet access challenges.

U.S. Population without broadband access:

• 13% of all U.S. households

• 30% aged 18-29 persons

• 29% of Black, and 35% of Hispanic persons

• 43% of households that earn less than $30K per year

U.S. Smartphone-only internet access

• 15% of all adults

• 28% aged 18-29 persons

• 17% of Black, and 25% of Hispanic persons.

• 27% of households that earn less than $30K per year.

Most of this technology has the built-in capability of providing universal access to all of our available senses. That includes visual displays, speakers, and physical inputs. It's up to designers and developers to configure them for universal attainability.

Personal Consumer Media Technology

• desktop & laptop computers

• televisions

• smart phones & tablets

• smart speakers

• smart appliances

• smart watches

• automobiles

Shared Consumer Media Technology

• ATMs

• public transportation

• movie theaters

• classroom projectors & televisions

• retail stores

• entertainment locations

• AR/XR

• A standard keyboard is an assistive technology when used with screen-reader software. Web-based media should be navigable using a keyboard's arrow and tab keys. Examples include JAWS, NVDA, and Narrator for Windows, , or Voiceover for Mac.

• Text readers are applications that will read clicked-on text with a synthesized voice and may have a highlighter to emphasize the word being spoken. They assist persons with reading challenges. Examples include Google's ChromeVox and Natural Reader for laptops and desktops as well as Voice Dream Reader for mobile devices. 

• Screen magnification software provides the ability to enlarge a section of text in relation to the rest of the screen. This is done by emulating a handheld magnifier.

• Speech input software is alternative to using one's hands to operate keyboards, this type of software allows users to type text and control the computer. An examples is Dragon 'Naturally Speaking' for Windows or Mac.

• Alternative input devices are for users unable to use a mouse or keyboard to work on a computer. Head pointers: A stick or object mounted directly on the user’s head that can be used to push keys on the keyboard. Motion or eye tracking: This can include devices that watch a target or even the eyes of the user to interpret where the user wants to place the mouse pointer and moves it for the user.

The three primary regulatory components are

1. Technical – these requirements make sure the coding of a website, software, operating systems, etc. is compatible with assistive technologies.

2. Functional – these requirements ensure that in addition to the technical coding, the entire system is usable by someone with a disability.

3. Support – these requirements make sure that support documents and alternative information are also accessible by people with disabilities.

The Four Principles of Accessibility are:

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

   • This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)

2. Operable - User interface components and navigation must be operable.

   • This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

3. Understandable - Information and the operation of the user interface must be understandable.

   • This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

   • This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

• The media should be navigable using a keyboard arrow and tab keys

• Should be consistent from page to page

• Links to the same location with different names should not be on the same page and avoid redundant links in general

• A "skip Menu" invisible or visible button should be included if the menu has more than 4 buttons.

• Do not differentiate categories of information using only color. Other indicators such as value, text and iconography, borders, etc. will work better for the sight-impaired.

• There should be multiple ways to to locate a page within a set of pages except where the Page is the result of, or a step in, a process. Acceptable methods include the addition of a search bar, a content/site map, or linear, screen to screen navigation.

• Users should be warned of time limits that are essential or longer than 20 hours. Audio and visual warnings (20 seconds in advance) should tell the user when time limits are at hand. Ideally, time limits should be extendable.

• Larger is better when it comes to button/text hit zone sizes. A good minimum to work with comes from Apple's design guidelines:

  • 48 pixels x 48 pixels for touch/click area and 8 pixels between hit zones. 60 - 72 pixels with 12 -24 pixels spacing is optimal.

  • Button or text size can be independent from the hit zone size. It may be smaller, but should not be larger.

• Links in body text should be underlined

• Links to external sources should labeled as such: 

  • Example: Google Scholar (external link)

• Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.

• Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.

  • A good example: Learn more about the principles of universal design. 

  • A bad example: Click here to learn more about the principles of universal design. 

• Symantec Web Design should be employed: When all CSS styling of the page is removed, the elements on the page should still be in a logical reading order in the HTML code. Here's how you can test:

  • • Use Firefox Developer Edition (Click View > Page Style > No Style in the top menu)

    • Use the WAVE checker (external link) (click the "no styles" tab)

    • Check manually that the elements on the page are in a logical reading order.

• The media should be responsive to a variety of screen sizes.

• Orientation should not be locked to either portrait or landscape.

• The content should be displayed in a left to right, top to bottom hierarchy.

• Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples of good visual hierarchy design (external link).

• Use alphabetical, unordered  or ordered lists when organizing  information

• Table columns should have headers.

• No automatic pop-ups or focus changes triggered by scrolling.

• There should be ample space between navigation elements that allow for ease of use on a small phone

• Avoid overuse of parallax effects and animation triggered by scrolling. As many as 35% of people over the age of 40 are likely to feel nauseous when used, due to vestibular disorders.

• Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complementary colors or stripes that may scintillate. You can dive deeper into this requirement by reading the seizure guidelines from Webaim (external link).

• If a plugin is required to view the content, a link to a download should be provided

• When a User Interface Component displays a visible keyboard focus, all of the following are true:

  1. • Minimum area: the focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.

     • Focus contrast: color changes used to indicate focus has at least a 3:1 contrast ratio with the colors changed from the unfocused control. 

     • Contrast or thickness: the focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels. 

• It is very likely that a sight-impaired person will navigate a web page by tabbing through the headings.  The headings should be written to maximize that process. Hierarchical/chronological use of text tags is also critical. For example:

  • Title, Heading, Sub-heading, Normal

  • H1, H2, H3, H4, Normal

• Should be high contrast against its background (light on dark or dark on light). Use the WebAim Contrast Checker (external link) tool to test color combinations. Use a combination of the Wave Checker and the SilkTide extension (external link) to test color combinations for various color blind conditions. The visual presentation of text and images of text should have a contrast ratio of between 4.5:1 and 16:1 (Level II) or 7:1 and 16:1 (level III). I strongly recommend level III. 

• Should be sized for easy reading.

• Should be left-aligned in most cases when there is a large volume of text.

• The line height (line spacing) should be at least 1.5 times the font size, and spacing following paragraphs should be at least 2 times the font size. 

• Letter spacing (tracking) should be at least 0.12 times the font size, and word spacing should be at least 0.16 times the font size.

• Text should be able to be resized up to 200 percent without loss of content or functionality, except for captions and images of text.

• If you use image-based text, the text in the image must be included, in full, in the image alt tag.

• Should be able to enlarge using devise controls.

• Avoid redundant text: especially between title and header tags

• Don't use all uppercase typesetting. Some screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT-style text will work well with screen readers.

• Images should be high-contrast to ensure sight-impaired persons can understand them. Reference the imaging design principles in this site.

• Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.

  • An example of a bad tag: figure 2

  • An example of a good tag: cartoon of a dog in a window barking at a postal delivery woman approaching a house on foot.

  • An example of a tag with a link destination:  fish icon: links to the fishing guide

• If an image contains complex information that is critical to understanding the content, a "long description" tag can be used. WordPress has this capability built into it.

• Icons should always include text with them.

• The visual presentation of icons and other graphical images utilized for navigation should have a contrast ratio of between 3:1 and 16:1 (Level II).

• Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.

• Purely decorative images, like those sometimes used as backgrounds in page headers, do not need descriptive alt tags. Null alt tags ( "" ) should be inserted instead.

• Captions should not be used in place of alt tags. Captions should be used for adding context to an image such as: 'It's source' or 'why it is important', etc.